Já utilizei essa biblioteca uma vez em um projeto de uma empresa q eu trabalhei. Estávamos notando que tinha uma perda de performance quando mudava o estado de um nó, pq tinha muitos nós no quadro. Então, consegui resolver esse problema utilizando eventos para atualizar os estados dos nós.
Sou iniciante e ainda não entendo muito de React, mas acho muito incrível a forma como o Diegão explica. Com certeza queremos continuação desse projeto
Bahhhhh projetasso!!! Taí um desenvolvimento fora da curva, tecno e news bombando. Gostaria que a parte 2 fosse colocar caixas de texto e que estes textos pudessam ser estilozados pelo cliente. tipo letra maior, trocar a fonte e estas firulas...
Boa dica de projeto, é um bom exemplo de projeto que pode ser integrador e inclusive comercializado pegando exemplos como o MIRO e Whimsical, além do próprio FigmaJam que hoje é integrado ao Figma, porém usado como módulo comercial que pode ser contratado a parte (se não mudaram a forma de contratação dos planos).
Cara que incrível, estou começando a estudar React Js, atualmente aprendendo sobre a router-dom, e os olhos chega brilha olhando as inúmeras possibilidades dessa framework. Esses vídeos da Rocketseat me motiva cada dia a buscar mais conhecimento para chegar a esse nível de programação. Vocês são feras!!!
Continue, por favor. É possível usar o React Flow para contruir um white board que armazena código javascript (lógica de programação) e possa ser executado posteriormente? Como uma interface de programação, de forma que o usuário possa pegar blocos prontos com pedaços de código, e ir montando a lógica a gosto? E se sim, mostrar o output disso em outro bloco, escolhendo, por exemplo, uma planilha Google como fonte de dados (ou quem sabe uma API) e mostrar um gráfico do Apex Charts? Mais ou menos como o ObservableHQ, porém como blocos de arrastar e soltar. Se tornaria uma aplicação low-code. Seria muito legal também a possibilidade de criar blocos com um código específico, ligar os pontos e ver o resultado disso na hora.
Dependendo da aplicação e do nível de abstração que pretende disponibilizar, sim, acho possível criar editores, códigos e runtimes com react-flow ou outras bibliotecas que fazem diagramação nesse estilo para criar um ambiente low-code ou no-code. Particularmente, acho interessante o estilo da Unreal engine, o editor visual de código tem uma "tipagem" nas conexões: Por padrão, as portas de saída só se conectam as de entrada que sejam do mesmo tipo. As bibliotecas react-diagrams, blackprint e flume seguem esta ideia e têm boa parte disso implementado, os exemplos inclusive lembram muito a interface da UE. Vale a pena olhar os exemplos para se inspirar.
Por favor!! Já pode criar uma série de como deixar essa aplicação cada vez mais robusta. Outra coisa interessantes seria listar e dar dicas de boas libs para react com real-time, ui/ux, galeria de imagens e etc. Outra dúvida minha, como adiciona os icons e folders igual ao seu? :)
Já vou me adiantando e pedindo a parte 3 para salvar o desenho para edição posterior... Tipo fazer a versão 1 e salvar, criar melhorias ou mudar a estilização e salvar...
Queremos DEMAIS a continuação! Daria um episódio daora um servidor em Node pra comemorar a regravação da trilha do Ignite!!
Então boooooora! Já vou preparar o próximo episódio :)
Up
@@dieegosf go go go go
@@dieegosf Já tem a segunda parte?????
@@dieegosf Rapaz, ce nunca volta nos projetos? kkkkk ainda da tempo de postar
Que projeto diferenciado. Continue porque ficou incrível.
Bora continuar. User interface 🤩❤️
Já utilizei essa biblioteca uma vez em um projeto de uma empresa q eu trabalhei.
Estávamos notando que tinha uma perda de performance quando mudava o estado de um nó, pq tinha muitos nós no quadro.
Então, consegui resolver esse problema utilizando eventos para atualizar os estados dos nós.
Faz um vídeo sobre isso 😂😂😂
Muito útil meu parceiro, obrigado.
Queremos parte 2!!!!!! Ótima aula e projeto incrível
🔥🔥Continuaaaaação, pleaseee!!!
Continuaçãooo, projeto muito bom para conhecer novas ferramentas...
Essa lib facilita muito o processo de aplicações como Figma Jam, implementar isso na mão é bem custoso rsrs.
Posso dizer que QUEREMOS MUITO a continuação desse projeto!
Espereiiii mtooo por esse videoo!!! Borraaaaa
Continua sim, mano
Muito bom dá continuidade na aplicação show...
Muito dahora o projeto, quero continuação sim!
Gostei demais Diegão! Dale na continuação desse projeto que a gente vai amar o/
Projeto muito fodaaaa!!!! Já quero a continuação
Show de bola continua o projeto sim vale a pena tá muito show continua aí
Vamos continuar por favor!
Sou iniciante e ainda não entendo muito de React, mas acho muito incrível a forma como o Diegão explica. Com certeza queremos continuação desse projeto
Muito bom! Seria muito bom ver uma série construindo essa ferramenta.
Muito bom, Diego!
Manda ver na continuação do projeto, vai ser massa?
Bahhhhh projetasso!!! Taí um desenvolvimento fora da curva, tecno e news bombando. Gostaria que a parte 2 fosse colocar caixas de texto e que estes textos pudessam ser estilozados pelo cliente. tipo letra maior, trocar a fonte e estas firulas...
Muito top, estava procurando ha um tempo! 🎉 Continue que é conteúdo gold!
Esse projeto ficou massa demais. Queremos parte 2, Diegão.
Já quero!!! Boa Diego video top d+
Uau, quanto mais vejo mais me apaixono pelo react. Por favor Diego, faz uma série do figma 🎉🎉
Boa dica de projeto, é um bom exemplo de projeto que pode ser integrador e inclusive comercializado pegando exemplos como o MIRO e Whimsical, além do próprio FigmaJam que hoje é integrado ao Figma, porém usado como módulo comercial que pode ser contratado a parte (se não mudaram a forma de contratação dos planos).
Que projeto dahora. Continua, Diego, por favor!
Diegasso, pode trazer mais, seria uma série incrível!
Video top demais... Sempre tive a curiosidade de saber como esses flow eram construidos... Espero a continuacao. Top
Cara que incrível, estou começando a estudar React Js, atualmente aprendendo sobre a router-dom, e os olhos chega brilha olhando as inúmeras possibilidades dessa framework. Esses vídeos da Rocketseat me motiva cada dia a buscar mais conhecimento para chegar a esse nível de programação. Vocês são feras!!!
Projeto bom demais. Queremos a continuação, por favor!
Nossa que projeto incrivel, muito diferenciado, conteudo bastante inovador, continua o projeto sim
Com certeza queremos continuação! Projeto muito top
Diegão, por favor continua esse projeto!!
CONTINUA VELHO! eu amei
!!!!
Continua por favor! Se possível mostrando como adicionar nodes dentro de outros nodes, assim como é no typebot. Conteúdo excelente, Diego!
Cara que conteúdo foda, muita entrega pfvr continua a serie
pelo amor de DEus, que tenha continuação!! isso é mt irado
faz a continuação por favor, projeto top de mais
Continuação da serie! 👍👍👍
O diego ainda pergunta se queremos que continuem o projeto ! Mas e claro que queremos !!
Manooooooooooo, que aula!!!
Uma continuação seria mais do que show!
Amei muito essa aula! da para criar muita coisa com essas ferramentas!
Muito bom! Ansioso pelo resto do projeto.
Diegão é só falar bora que eu boro!!!!!!!!
Foda demais, irmão!! Continua o projeto, por favor.
Continue, por favor.
É possível usar o React Flow para contruir um white board que armazena código javascript (lógica de programação) e possa ser executado posteriormente?
Como uma interface de programação, de forma que o usuário possa pegar blocos prontos com pedaços de código, e ir montando a lógica a gosto?
E se sim, mostrar o output disso em outro bloco, escolhendo, por exemplo, uma planilha Google como fonte de dados (ou quem sabe uma API) e mostrar um gráfico do Apex Charts?
Mais ou menos como o ObservableHQ, porém como blocos de arrastar e soltar.
Se tornaria uma aplicação low-code.
Seria muito legal também a possibilidade de criar blocos com um código específico, ligar os pontos e ver o resultado disso na hora.
Dependendo da aplicação e do nível de abstração que pretende disponibilizar, sim, acho possível criar editores, códigos e runtimes com react-flow ou outras bibliotecas que fazem diagramação nesse estilo para criar um ambiente low-code ou no-code.
Particularmente, acho interessante o estilo da Unreal engine, o editor visual de código tem uma "tipagem" nas conexões: Por padrão, as portas de saída só se conectam as de entrada que sejam do mesmo tipo. As bibliotecas react-diagrams, blackprint e flume seguem esta ideia e têm boa parte disso implementado, os exemplos inclusive lembram muito a interface da UE. Vale a pena olhar os exemplos para se inspirar.
Diegão sempre se superando com a Criatividade dos Conteúdos, Aula top!
Por favor!! Já pode criar uma série de como deixar essa aplicação cada vez mais robusta. Outra coisa interessantes seria listar e dar dicas de boas libs para react com real-time, ui/ux, galeria de imagens e etc. Outra dúvida minha, como adiciona os icons e folders igual ao seu? :)
Só bora Anderson. Os ícones são um pacote chamado Symbols
Continue com o projecto. Ficou incrível
Conteúdo insano, ficou incrível, por favor continua
Muito massa! Da pra fazer um app de mapa mental
Traz mais vídeos sobre esse tema!!!
Incrível!!! Rumo a parte 2!
Continue porque ficou incrível
Ficou top mano. A única objeção é só o uso do Tailwind poluidor kkk, mas claro isso vai de cada um rsrsrs.
Continua !!! ficou top demais
Manda bala na evolução desse projeto Diego! Bem demais 🎉, seria legal ter um arrastar e soltar para adicionar os nodes
Queremos demais a continuação desse projeto
Muito show!
Tem como fazer algo sobre quando um node é selecionado ele poder mudar alguma coisa fora do node, tipo abrir um modal?
Continua a aplicação porque ficou muito top.
Como que faz para limitar viewport? Se deixar "aberto" ele vai até o infinito, a posição x e y
parte 2 já!!!!
ficou massa demais!
Top d++ Diegão
Que top, parabéns 👏🏼
Parte 2! Manda aí Diegão.
Ótimo conteúdo, poderia continuar a saga mas mostrando sobre o drag and drop?
Show! 🤩 Já tem continuação?
Já vou me adiantando e pedindo a parte 3 para salvar o desenho para edição posterior... Tipo fazer a versão 1 e salvar, criar melhorias ou mudar a estilização e salvar...
queremos a continuação do projeto!!!!!!!!!!!
Quero continuação. como faço para exclui a linha ?
Massa diego. Alguém conhece alguma biblioteca que crie organogramas em react ?
Alguém sabe os tema que o Diegão usa para o vscode tanto para pastas e o próprio tema em si ?
queria muito aprender com nextjs + react flow, tem muita diferença?
queroo continuacaooooo !!1`
aeeeee, mito demais
Quero parte 2!!!!
Que ideia top
Muito tooooppp!!
Quando será lançada a data do evento RSXP? Gostaria de saber para poder já comprar a passagem com antecedência
Ainda deve demorar mais umas semanas pra lançarmos a data oficial!
Muito Bom
Conteúdo TOP!!!!!
Alguém sabe o nome desse tema do vscode?
Diego você conhece o Framework QWIK
Continuação por favor 🙏🏽
daria para colocar botoes dentro dos edges ??
Sim, é um componente como qualquer outro, a diferença é que estamos usando SVG ali
Eu não te julgo, curto demais o tailwind, e conheci através de você Diego.
Alguém poderia me informar, por gentileza, se o Diego usa algum tipo de extensão para completar os comandos no terminal? Se sim, qual seria? 😁
Sim, chama-se fig, eu uso ele, mas acho que é só pra MAC
@@toskito123 Beleza, Igor, brigadão mesmo!
Qual tema do vscode e do icons que ele usa?
Tema do VSCode: Rosé Pine
Tema dos ícones: Symbols
continuaaaaaa
Parte 2 por favorrrrrrr
Alguém sabe que tema é esse que ele está utilizando?
Top d+
Fala sobre supabase ou pocketbase pliss
qual o tema do vs code e dos ícones dele?
boa pergunta hehe
é só "Symbols"
Tema do VSCode: Rosé Pine
Tema dos ícones: Symbols
🤩
TOPZERAAAAAAAAAAAA