Se puderem, tragam mais conteúdos (ou até tutoriais xD) sobre Recursividade, esse é um tema que eu infelizmente quase não acho conteúdo na internet e queria entender mais, sei que com a qualidade de vocês vai ser ótimo assistir
Excelente vídeo, tem muita gente que já chegou no React e nunca nem viu esse tipo de manipulação da DOM, muito boa a ideia de trabalhar com Menu em Árvore, parabéns!
Boa dica Maykão, principalmente a parte do stopPropagartion no JavaScript. Eu não conhecia, confesso que preciso me aprofundar mais no JS. Valeu RS e Maykão por mais essa dica!🚀💺💜
Uns tempos atrás eu estava prestes a fazer o mesmo num menu com material-ui no react, mas aí na hora que eu fui estilizar, bateu uma tristeza de não poder usar css diretamente. Até dava pra obter o mesmo resultado, mas não era tão intuitivo quanto o apresentado no vídeo. Isso vai ser bem útil agora que uso styled-components, dá pra estilizar uma estrutura enxuta como essa tranquilamente. Sem falar que fica bem melhor pra acessibilidade (não fica cheio de "bloat" no meio dos ul/li do nav).
Isso me ajudou, porém quero separar a função click do nome e do botão, para que quando somente clicar no botão (>) este expanda e revele a continuação da arvóre e o nome seja selecionável, como é no mercado livre mesmo; mas este exemplo e mas de meio caminho andado, obrigado
Muito legal Maykão! Não tinha pensado na lógica por trás de menus assim, mas depois desse exemplo ficou bem claro pra mim. A minha dúvida seria quanto a performance da aplicação utilizando recursividade: isso seria um problema? Como sugestão, acho que seria legal um vídeo demonstrando esse exemplo dentro do React também. Abraço!
Opa, Rodrigo, tudo bem? Quanto a performance do código recursivo está totalmente ligado a forma que você implementa, não existe um ganho ou perda de performance em comparação com a iteração, apenas são caminhos diferentes na execução do algoritmo. Acredito que esse post te ajude a entender um pouco mais sobre: medium.com/@mariaclarasantana/javascript-itera%C3%A7%C3%A3o-vs-recurs%C3%A3o-cbfc419b863 Abraço!
Estou com esse erro, alguém pode me ajudar? Access to script at 'file:///home/user/Documentos/codedrops-menu-tree/components/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
A duas maneiras para você conseguir rodar o script. 1 - Se você tiver no VsCode instala um plugin chamado Live Server depois de instalar de comando Ctrl+Shift+P e pesquise por Live Server, De uma pesquisada que no youtube é plugin muito útil; 2 - Em vez de usar um como type="module" remove tag e usa como javascript comum, mude o export default function(data) para function Tree(data)... Dentro do arquivo main.js em vez de import use o codigo abaixo; var imported = document.createElement('script'); imported.src = 'components/tree.js'; document.head.appendChild(imported); e no final em vez de Tree(menu); window.onload = function() { Tree(menu); }; Eu acho melhor usar a primeira opção, ela é uma mão na roda quando estamos fazendo exemplos como o do vídeo (Evita de ficar dando [F5]). Espero ter ajudado.
Muito show! Sabe o que seria bacana? Uma aplicação com colunas dinâmicas, na pegada do notion, sabe? Você poder colocar seus blocos de textos de linha para coluna apenas arrastando 🧐
Pesquisa sobre programacao dinâmica, memoizacao... Um exemplo simples e muito didático para vc enteder esse conceito é a implementacao da sequencia de fibonacci ou do fatorial.
no caso você se refere a IDE? Android studio tem muitas opções boas, mas a menos que seja um programador muito experiente, não vai usar nada daquilo, então você pode facilmente substituir pelo visual studio code, e usar o react native para desenvolver aplicativos, ou o ionic, flutter...
Difícil responder isso, pq o emulador é um simulador de Android (claro), e por isso, ele vai ter as mesmas necessidades físicas do celular (memória, processamento, RAM,...) talvez valha a pena ir testando os emuladores, para ver qual que vai consumir menos essas coisas, eu uso o Android Studio, e o que mais tenho dificuldades mesmo é que demora um pouquinho pra abrir, e quando eu vou fechar, ele quase para meu computador (video no youtube congela), só tem que tomar cuidado também, porque se você for usar pra Expo React Native, vai precisar do Expo instalado no emulador. Pra não ficar sem nenhuma resposta, eu já usei bastante o BlueStacks. Espero ter ajudado
E se, por algum motivo, a lista de vocês ter mais de 15714 níveis de parentesco, o JS vai dar um erro de Range pois essa é a quantidade máxima de recursividade de funções. Seria interessante colocar esse ponto no video kkkk
Fala pessoal da rocket, Baum demais ? Eu gostaria de fazer uma solicitação de conteúdo, gostaria de um CRUD com sequelize e typescript, com tabelas relacionais e consultas complexas com condições. Agradeço desde já. Forte abraço!!!
fiz de um outro jeito, criei um json assim: [ { name: 'bla bla bla', items: [ { name: 'nested bla bla bla', items: [ ...] } ] } ] e a partir disso, tem uma condição que verifica se o objeto tem a propriedade items, se tiver ele insere um novo ul/li e por ai vai...
Fala pessoal da rocket, Baum demais ? Eu gostaria de fazer uma solicitação de conteúdo, gostaria de um CRUD com sequelize e typescript, com tabelas relacionais e consultas complexas com condições. Agradeço desde já. Forte abraço!!!
Se puderem, tragam mais conteúdos (ou até tutoriais xD) sobre Recursividade, esse é um tema que eu infelizmente quase não acho conteúdo na internet e queria entender mais, sei que com a qualidade de vocês vai ser ótimo assistir
Meu favorito, didática mais top que já vi.
Perfeita explicação! Parabéns!!
O seu conteudo é muito fenomenal, simples e expande a mente
Valeeu pelo feedback, Iuri! 💜
Há!!! Olha o Maikão aí dinovo!!!
😁👍
Qual plugin é esse de live reload Picture-in-picture do VsCode?
Mike ensina muito bem! Muito bom
Muito bom o conteúdo, Parabéns..
Top como sempre
Awesome Maykão! Conglatulations! Thank you bro!
Thanks Luis
poderia utilizar reduce pra criar algo semelhante ?
video do maykao eh sempre uma alegria, vlw irmao
Esse maykao eh um MITO!!
Show Mike, parabéns!!!
Mayk é fera né? 💜💜
Rocketseat só tem fera nessa empresa!! Orgulho de ser aluno da Rocket!!!
Muito massa Mayk!
Quando vai liberar o novo curso?
Excelente vídeo, tem muita gente que já chegou no React e nunca nem viu esse tipo de manipulação da DOM, muito boa a ideia de trabalhar com Menu em Árvore, parabéns!
Obrigado por compartilhar esse conteúdo. Além de interessante foi passado com ótima qualidade. Valeu.
Boa dica Maykão, principalmente a parte do stopPropagartion no JavaScript. Eu não conhecia, confesso que preciso me aprofundar mais no JS. Valeu RS e Maykão por mais essa dica!🚀💺💜
Kayyooo... Vlw meu querido!! ⚡️
Show de bola como sempre Maikão! Valeu D+
Muito bom cara! Continua fazendo vídeos assim por favor haha me ajudou muito!!!
Boa mike, muito bom!!!
Valeeu, João! 💜💜💜
Ótimo conteúdo, muito bem explicado. Parabéns.
Muito bom, Sr Mike.
Como posso fazer tudo isso no react js com hooks?
Parabéns o vídeo muito bom, eu assisti do começo ao fim agora vou rever e ir fazendo junto.
Boooa, isso aí, William! 💜 Valeeeu! 💜
Video show parabéns, vou ter que rever o vídeo algumas vezes para entende alguns pontos hah, mas é assim, sempre tem que ta persistindo !!!
Muito bom. Legal seria fazer em React tbem !!
Show de bola!
Uns tempos atrás eu estava prestes a fazer o mesmo num menu com material-ui no react, mas aí na hora que eu fui estilizar, bateu uma tristeza de não poder usar css diretamente. Até dava pra obter o mesmo resultado, mas não era tão intuitivo quanto o apresentado no vídeo. Isso vai ser bem útil agora que uso styled-components, dá pra estilizar uma estrutura enxuta como essa tranquilamente. Sem falar que fica bem melhor pra acessibilidade (não fica cheio de "bloat" no meio dos ul/li do nav).
Faaala, Jobson! Valeeeu por compartilhar sua experiência e seu feedback com a gente! 💜
ond tu conseguiu esse navegador??
Sensacional 👏👏👏
Isso me ajudou, porém quero separar a função click do nome e do botão, para que quando somente clicar no botão (>) este expanda e revele a continuação da arvóre e o nome seja selecionável, como é no mercado livre mesmo; mas este exemplo e mas de meio caminho andado, obrigado
Você está usando algum framework javascript?
que tipo de extensao vc usa pra aparecer essa preview? Aula mto top!
github.com/maykbrito/simple-webview
Muito legal Maykão! Não tinha pensado na lógica por trás de menus assim, mas depois desse exemplo ficou bem claro pra mim. A minha dúvida seria quanto a performance da aplicação utilizando recursividade: isso seria um problema? Como sugestão, acho que seria legal um vídeo demonstrando esse exemplo dentro do React também. Abraço!
Opa, Rodrigo, tudo bem?
Quanto a performance do código recursivo está totalmente ligado a forma que você implementa, não existe um ganho ou perda de performance em comparação com a iteração, apenas são caminhos diferentes na execução do algoritmo.
Acredito que esse post te ajude a entender um pouco mais sobre:
medium.com/@mariaclarasantana/javascript-itera%C3%A7%C3%A3o-vs-recurs%C3%A3o-cbfc419b863
Abraço!
@@renanluiz7461 li aqui, massa hein! Não sabia que existem casos em que a recursão seria melhor de se utilizar. Valeu!
Conhece demais maicao
Estou com esse erro, alguém pode me ajudar?
Access to script at 'file:///home/user/Documentos/codedrops-menu-tree/components/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
A duas maneiras para você conseguir rodar o script.
1 - Se você tiver no VsCode instala um plugin chamado Live Server depois de instalar de comando Ctrl+Shift+P e pesquise por Live Server, De uma pesquisada que no youtube é plugin muito útil;
2 - Em vez de usar um como type="module" remove tag e usa como javascript comum, mude o export default function(data) para function Tree(data)... Dentro do arquivo main.js em vez de import use o codigo abaixo;
var imported = document.createElement('script');
imported.src = 'components/tree.js';
document.head.appendChild(imported);
e no final em vez de Tree(menu);
window.onload = function() {
Tree(menu);
};
Eu acho melhor usar a primeira opção, ela é uma mão na roda quando estamos fazendo exemplos como o do vídeo (Evita de ficar dando [F5]).
Espero ter ajudado.
Mike mito
Que tema é esse Maykão?
Excelente vídeo!
esse lugarzinho que apareceu o preview do projeto é alguma extensão?
maykão manda muito bem💜💜
github.com/maykbrito/simple-webview
obg 💜
Muito show! Sabe o que seria bacana? Uma aplicação com colunas dinâmicas, na pegada do notion, sabe? Você poder colocar seus blocos de textos de linha para coluna apenas arrastando 🧐
Vaaaleu pela sugestão! 💜💜💜💜
Parabéns Mike, já tentei trabalhar muitas vezes com recursividade mas sempre caia muito em relacao a perfomance, como voce lida com isso?
Não deixa de ser um loop como qualquer outro. É importante ter o ponto de saída bem definido apenas!!
Pesquisa sobre programacao dinâmica, memoizacao... Um exemplo simples e muito didático para vc enteder esse conceito é a implementacao da sequencia de fibonacci ou do fatorial.
Alguns algoritmos de ordenacao tbm usam a mesma tecnica, vale a pena dar uma conferida!
Alguém sabe que theme é esse que o Mayk tá usando? Ajuda aí @rocketseat
Eu fico testando muitos temas kkk.. acho que esse era o B&Y :)
@@maykbrito valeeu
existe algum framework android leve? meu computador trava de mais com o android studio.
no caso você se refere a IDE?
Android studio tem muitas opções boas, mas a menos que seja um programador muito experiente, não vai usar nada daquilo, então você pode facilmente substituir pelo visual studio code, e usar o react native para desenvolver aplicativos, ou o ionic, flutter...
Difícil responder isso, pq o emulador é um simulador de Android (claro), e por isso, ele vai ter as mesmas necessidades físicas do celular (memória, processamento, RAM,...) talvez valha a pena ir testando os emuladores, para ver qual que vai consumir menos essas coisas, eu uso o Android Studio, e o que mais tenho dificuldades mesmo é que demora um pouquinho pra abrir, e quando eu vou fechar, ele quase para meu computador (video no youtube congela), só tem que tomar cuidado também, porque se você for usar pra Expo React Native, vai precisar do Expo instalado no emulador.
Pra não ficar sem nenhuma resposta, eu já usei bastante o BlueStacks.
Espero ter ajudado
Faz esse modelo de subcategorias e recursividade com o react router. Seria maneiro.
Quero adiciona-lo ao lee
Vídeo top de mais mike.
Mayk arrasa né?? 💜💜 Valeeu Hadden! 💜
Alguém sabe como ele exibiu esse navegador mostrando o código?
Ctrl+Shift+I
Fala brother. Esse navegador eu construi um projetinho em Electron.
@@maykbrito Nossa ficou muito bom, há uma maneira de você disponibilizar ele?
@@maykbrito eu acabei de acordar e sonhei que você estava ensinando como fazer esse navegador haha
Faça basntande comentários no seu código?
Isso. Lembra que é um assunto para iniciantes, então, essa atitude ajuda na revisão do conteúdo 🥰👍
Show, já vou trocar o meu kkkk
E se, por algum motivo, a lista de vocês ter mais de 15714 níveis de parentesco, o JS vai dar um erro de Range pois essa é a quantidade máxima de recursividade de funções. Seria interessante colocar esse ponto no video kkkk
Pra ter esse tanto de nível vc provavelmente vai tá trabalhando na Amazon, então eles dão um jeito kkk
a profundidade da recursao tambem varia de navegador pra navegador por ex: o chrome tem 21,837 e o firefox tem 3000
Boa Mykao
Ele é top né? 💜
fodaaaaaaaa
I'm here!
Mais videos com as parada massa que da pra fazer com JS PFVV
Valeeeu pela sugestão, João! 💜
@@rocketseat Voces sao foda demais.
Fala pessoal da rocket, Baum demais ?
Eu gostaria de fazer uma solicitação de conteúdo, gostaria de um CRUD com sequelize e typescript, com tabelas relacionais e consultas complexas com condições.
Agradeço desde já.
Forte abraço!!!
fiz de um outro jeito, criei um json assim: [ { name: 'bla bla bla', items: [ { name: 'nested bla bla bla', items: [ ...] } ] } ] e a partir disso, tem uma condição que verifica se o objeto tem a propriedade items, se tiver ele insere um novo ul/li e por ai vai...
Faaala, dev! 💜 Valeeu pela sua dica! 💜
Galera mais alguem teve erro de CORS apontando para o main.js quando abre o html no Chrome?
Valeu Abraço
Faala, Bruno! Você pode enviar essa dúvida lá na nossa comunidade aberta 💜 Segue o link: www.rocketseat.com.br/comunidade
Top
💜💜🔝
O cara manja hackear a nasa mas não sabe digitar Eletronisc 😂
Fodase??
hahahh
Fala pessoal da rocket, Baum demais ?
Eu gostaria de fazer uma solicitação de conteúdo, gostaria de um CRUD com sequelize e typescript, com tabelas relacionais e consultas complexas com condições.
Agradeço desde já.
Forte abraço!!!