Menu de subcategorias com recursividade no JavaScript - Code/Drops #28

[@notspidle]

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

[@camilabreda-io9jt]

Perfeita explicação! Parabéns!!

[@queirozm.santana9908]

Meu favorito, didática mais top que já vi.

[@iuridev8432]

O seu conteudo é muito fenomenal, simples e expande a mente

[@rocketseat]

Valeeu pelo feedback, Iuri! 💜

[@wagnaomoreira3961]

Há!!! Olha o Maikão aí dinovo!!! 😁👍

[@jailsonsantos555]

Muito bom o conteúdo, Parabéns..

[@maykon-oliveira]

Mike ensina muito bem! Muito bom

[@iltonkarly1773]

Top como sempre

[@jeandeswesleymartins3044]

Esse maykao eh um MITO!!

[@paulo_alchemist9766]

Muito massa Mayk!

[@renanjamal]

Obrigado por compartilhar esse conteúdo. Além de interessante foi passado com ótima qualidade. Valeu.

[@alexsandrotrindade9259]

Show Mike, parabéns!!!

[@rocketseat]

Mayk é fera né? 💜💜

[@alexsandrotrindade9259]

Rocketseat só tem fera nessa empresa!! Orgulho de ser aluno da Rocket!!!

[@tiagociceri]

Ótimo conteúdo, muito bem explicado. Parabéns.

[@alexandrepellegrino2699]

video do maykao eh sempre uma alegria, vlw irmao

[@guilhermecastelo9238]

Muito bom cara! Continua fazendo vídeos assim por favor haha me ajudou muito!!!

[@leandrodasilvaalves844]

Show de bola como sempre Maikão! Valeu D+

[@rodrigoaraujo1608]

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 !!!

[@luislucass]

Awesome Maykão! Conglatulations! Thank you bro!

[@maykbrito]

Thanks Luis

[@wmoreschi]

Parabéns o vídeo muito bom, eu assisti do começo ao fim agora vou rever e ir fazendo junto.

[@rocketseat]

Boooa, isso aí, William! 💜 Valeeeu! 💜

[@zilondequadrosmaciel1006]

Muito bom, Sr Mike.

[@matheuspaice4089]

Muito bom. Legal seria fazer em React tbem !!

[@VinniiMiranda]

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!

[@kayorenato]

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!🚀💺💜

[@maykbrito]

Kayyooo... Vlw meu querido!! ⚡️

[@Math-cz]

Qual plugin é esse de live reload Picture-in-picture do VsCode?

[@robsonlocatelli8126]

Show de bola!

[@jobsongilbertobarrosamorim2516]

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).

[@rocketseat]

Faaala, Jobson! Valeeeu por compartilhar sua experiência e seu feedback com a gente! 💜

[@joaovictorvieira2228]

Boa mike, muito bom!!!

[@rocketseat]

Valeeu, João! 💜💜💜

[@renanmonteiro2229]

Conhece demais maicao

[@wandersonalwes2428]

Sensacional 👏👏👏

[@paulopaiva3596]

Quando vai liberar o novo curso?

[@tenclar]

poderia utilizar reduce pra criar algo semelhante ?

[@programandocomcafeecerveja3013]

Você está usando algum framework javascript?

[@AndrelinoSilvas]

Excelente vídeo!

[@bernardoborgesgamer7877]

Show, já vou trocar o meu kkkk

[@tiagopaees]

Mike mito

[@benitocamelas7784]

que tipo de extensao vc usa pra aparecer essa preview? Aula mto top!

[@maykbrito]

github.com/maykbrito/simple-webview

[@Gabriel116216]

Como posso fazer tudo isso no react js com hooks?

[@RodrigoMirandaSantana]

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!

[@renanluiz7461]

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!

[@RodrigoMirandaSantana]

@@renanluiz7461 li aqui, massa hein! Não sabia que existem casos em que a recursão seria melhor de se utilizar. Valeu!

[@randomprofile9523]

Que tema é esse Maykão?

[@Maycon_]

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

[@GamersRoomful]

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 🧐

[@rocketseat]

Vaaaleu pela sugestão! 💜💜💜💜

[@HaddenBest]

Vídeo top de mais mike.

[@rocketseat]

Mayk arrasa né?? 💜💜 Valeeu Hadden! 💜

[@luancampos5186]

ond tu conseguiu esse navegador??

[@FernandoramiresFilho]

Alguém sabe que theme é esse que o Mayk tá usando? Ajuda aí @rocketseat

[@maykbrito]

Eu fico testando muitos temas kkk.. acho que esse era o B&Y :)

[@FernandoramiresFilho]

@@maykbrito valeeu

[@deyvisonborges]

Faz esse modelo de subcategorias e recursividade com o react router. Seria maneiro.

[@geradordenomespesquisar3873]

existe algum framework android leve? meu computador trava de mais com o android studio.

[@fala_re]

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...

[@mateus_andriola]

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

[@viniciustavarespimenta105]

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.

[@wmoreschi]

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.

[@juansvrr]

esse lugarzinho que apareceu o preview do projeto é alguma extensão? maykão manda muito bem💜💜

[@maykbrito]

github.com/maykbrito/simple-webview obg 💜

[@paulorg2011]

Parabéns Mike, já tentei trabalhar muitas vezes com recursividade mas sempre caia muito em relacao a perfomance, como voce lida com isso?

[@matheuspaice4089]

Não deixa de ser um loop como qualquer outro. É importante ter o ponto de saída bem definido apenas!!

[@ocabrapreto5346]

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.

[@ocabrapreto5346]

Alguns algoritmos de ordenacao tbm usam a mesma tecnica, vale a pena dar uma conferida!

[@joaogustavoferreira7136]

Faça basntande comentários no seu código?

[@maykbrito]

Isso. Lembra que é um assunto para iniciantes, então, essa atitude ajuda na revisão do conteúdo 🥰👍

[@pablomelo5230]

Boa Mykao

[@rocketseat]

Ele é top né? 💜

[@programandodfato]

Quero adiciona-lo ao lee

[@paulovinicius938]

I'm here!

[@jos3ss]

Alguém sabe como ele exibiu esse navegador mostrando o código?

[@MateusHenrique-ne5el]

Ctrl+Shift+I

[@maykbrito]

Fala brother. Esse navegador eu construi um projetinho em Electron.

[@jos3ss]

@@maykbrito Nossa ficou muito bom, há uma maneira de você disponibilizar ele?

[@MateusHenrique-ne5el]

@@maykbrito eu acabei de acordar e sonhei que você estava ensinando como fazer esse navegador haha

[@Mannoeu]

fodaaaaaaaa

[@BrunoSouza-yc4do]

Galera mais alguem teve erro de CORS apontando para o main.js quando abre o html no Chrome? Valeu Abraço

[@rocketseat]

Faala, Bruno! Você pode enviar essa dúvida lá na nossa comunidade aberta 💜 Segue o link: www.rocketseat.com.br/comunidade

[@juaooliveiralp]

Mais videos com as parada massa que da pra fazer com JS PFVV

[@rocketseat]

Valeeeu pela sugestão, João! 💜

[@juaooliveiralp]

@@rocketseat Voces sao foda demais.

[@Diego-Garcia]

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

[@ricardochvs23]

Pra ter esse tanto de nível vc provavelmente vai tá trabalhando na Amazon, então eles dão um jeito kkk

[@benitocamelas7784]

a profundidade da recursao tambem varia de navegador pra navegador por ex: o chrome tem 21,837 e o firefox tem 3000

[@channel-xp7iq]

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!!!

[@NoRageRX]

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...

[@rocketseat]

Faaala, dev! 💜 Valeeu pela sua dica! 💜

[@mateushenrique6421]

Top

[@rocketseat]

💜💜🔝

[@luca0898]

O cara manja hackear a nasa mas não sabe digitar Eletronisc 😂

[@MateusHenrique-ne5el]

Fodase??

[@maykbrito]

hahahh

[@channel-xp7iq]

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!!!