Folder structure for ReactJS/React Native | Code/Drops #02
ฝัง
- เผยแพร่เมื่อ 28 ส.ค. 2024
- Throughout my study years I realized something, there is no such thing as a perfect structure for all kinds of application, and there's no structure that is totally scalability proof.
In this video I show you the structure that I use in most of my projects, just reminding you that the more important than strictly following a structure is having a pattern on your team, so everyone can understand the structure that's being used.
-----
Follow Rocketseat on our social mediad:
Site: www.rocketseat...
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
VÍDEO DE LOTTIE? SIM, PRACARAI!
Fiquei bem curioso sobre isso
sim
Lottie por acaso seria uma biblioteca para animação?
Saiu recentemente no canal deles, bom demais
Vcs leram minha mente . Estava justamente pesquisando sobre patterns no React
tbm
Eu também! Já tava usando mais ou menos desse jeito pq assisto muitos vídeos do canal, mas ajudou bastante esse vídeo! :D
Diego, consegui passar minha carreira p/ o próximo nível !!! Graças a RocketSeat minha vida mudou =D Muito obrigado!
Diegão faz um vídeo com lottie pra gente ae 👊
Parece que os kras advinham a dúvida do cara e vai lá e fazem um vídeo.
Show de bola. Parabéns pelo trabalho.
Queria agradecer o pessoal da Rocketseat por esse vídeo, eu coloquei esse tema de estruturação de projetos como sugestão de uma das inscrições que fiz (e acredito que muitas outras pessoas devem ter pedido algo semelhante em algum momento), não me lembro se era pra semana oministack ou algum outro evento. A questão é que os caras olharam para as sugestões e realmente levaram em consideração nosso pedido. Valeu Diego e Rocketseat!
A Missão da Rocketseat é significativa e o Diego é show de bola
Quero video de Lottie
Venho procurando algumas estruturas escalável e que me agradasse (não a melhor, mas a que eu sentisse que resolvesse melhor os problemas do meu time) e esse vídeo me deu um norte maravilhoso
its priceless. the slickness and the passion of the devs. priceless. what is cheaper and better than soft? Piracy is NOT the answer if you
Mais um vídeo direto ao ponto, prático e rápido! Parabéns ao Diego e toda RocketSeat sempre compartilhando boas práticas e conhecimento com a comunidade Javascript!
Muito foda. Rocketseat é meu abrigo !
Sempre com bons vídeos!!!
Sugestão: ensina como criar isso de vários temas pfv. Gostava de implementar isso porque agora os próprios devices têm dois temas e, se isso estiver ligado com a App, seria ideal 👌🏼
Amo de mais esse canal
Eu continuo não gostando do Javascript, mesmo estudando ele, tem muito problema com tipagem tá doido, o que me fez continuar foi o Typescript, os problemas de tipagem simplesmente vão embora com ele, as vezes até incomoda de tanta tipagem que tem, rs, mas isso ajuda muito
Uma boa prática que costumo usar também é usar deixar as pastas em PascalCase ou pelo menos a primeira letra maiúscula, embora eu não acho muito bonito. Mas com o jsconfig.json mapeando o root do projeto e permitindo imports absolutos no root, removendo aqueles ../../ malditos, as subpastas iniciando com letra maiúscula se diferenciam dos módulos no node-module e até mesmo evitam colisões. Muito bom conteúdo. Abraço!
boa
Tudo que é bom se copia haha
Realmente, estrutura é adaptável, depende das necessidades de cada projeto, mas usando o modelo da Rocketseat é só adaptar caso haja alguma variação, show demais
Quero ver os videos de Lottie!
Com certeza gostaria de um vídeo de Lottie! Vou ficar no aguardo 😁
Gostei muito da estrutura, estou começando agora e vou usar! Top
Com certeza vou experimentar essa estrutura! Gostei demais assim como de costume das tuas aulas Diego!! Muito obrigado por compartilhar tua experiência co ma gente
Faltou falar dos testes. Acho que num segundo vídeo, pode falar especificamente com TypeScript - models etc. (talvez Next)... Muito bom, Diegão.
Top de mais Diego, sempre com conteúdos de altíssima qualidade.
Queria um vídeo explicando a fundo Context API, seria interessante. Não um vídeo comparando do redux e sim ele em funcionamento.
Bem que podia ter série sobre técnicas de UI/UX (style, desing, etc...) ia ser top.
Aproveitei esse gancho das animações com Lottie (UX).
Penso nisso porque acredito que a identidade do app está também na parte visual/experiência!
Cara me ajudou muito, excelente! Estou começando a desenvolver com React e sempre me questiono de onde coloco os arquivos, me deu um belo norte.
Show cara. Estou no meu primeiro projeto real em react-native, gostei desse padrão de projeto apresentado, ajudou bastante principalmente por eu ser iniciante
Que bom Nathan!! Valeeu pelo feedback! 😍
É uma pena não ter visto esse vídeo antes!! Mas a partir de hoje minhas estruturas de pastas não serão mais as mesmas. Gratidão!!!
Se vc tiver um component Button q se resolveria somente com styled-components, e fosse ser usado no app todo. Vc colocaria em "/components/Buttons/index.js", ou vc colocaria no "/components/Button/styles.js" msm e criaria um index.js so pra renderizar esse styled-component?
Outra coisa, custom hooks, vc colocaria no "/hooks" ou no "/services/" ou em outro lugar? Hahaha
Faz o video do Lottie 😄
Parabéns pelo vídeo, excelente conteúdo. Já utilizava uma estrutura semelhante mas tinha dúvidas se podia melhorar, se estava certo e tudo mais. Estava pesquisando isso esses dias mesmo. Vou inclusive implementar algumas coisas que faço diferente e gostei do seu padrão que tem uma divisão melhor para a parte de configurações.
Esse Cara é muito FODA! TOP
Fala Diego! Você podia fazer um video de como organizar e estruturar testes. Gostei muito do video ótimo trabalho.
Show de bola, Diego!
Uma estrutura de componentes que sempre utilizei e acho muito válida é o Atomic Design. Você já utilizou? Se sim, o que pensa sobre?
Nossa que legal, eu tbm uso praticamente a mesma estrutura... Acho que a única diferença é que eu não chamo a pasta que você usa como "Pages", eu costumo chamar de "Screens".
Mas ao todo, uso a mesma estrutura!
Vídeo muito bom e esclarecedor, parabéns! Seria bacana um vídeo sobre lottie!
qual a extensão que utiliza para dar o comando 'RNFC' do início do vídeo?
Eu ainda gosto do padrão containers e components. Numa aplicação do mundo real você sempre tera uma aplicação em constante mudança e no geral, sempre é adicionando algo a mais. Pra mim, os containers, ainda mais em páginas com bastante informação como dashboards, servem para isolar toda a obtenção de dados de stores(redux ou mobx), criar comportamentos com os hooks e etc. Obviamente em alguns cenários, como alteração da cor de um botão após o clique, não existe a necessidade de se criar uma store e um container, apenas um estado interno e uma prop para ditar o estado inicial já bastam.
O importante é ter padrão, e no meu caso, toda as "páginas" da aplicação tem sim um container que visa isolar toda a parte de inicialização e lógica dos demais componentes de apresentação.
Fala Diego, na estrutura de pastas que você passou eu coloquei um arquivo TXT dentro comentando suas funcionalidades e também criei um clone dessa pasta SRC em backup para futuros projetos. Sou iniciante e quando estiver mais por dentro melhorarei isso. Lança um snippet já para cirar estruturas completas de projeto. Ganho de produtividade...kkkk Obrigado!
Excelente vídeo!
Agradeço muito por ter conhecido seu canal
Se puder fazer apenas uma sugestão, poderia ter um print final com sua estrutura de pastas
Muito bom Diego. Posso estar errado, mas acho que só faltou a pasta Model, onde podem ser colocadas as classes de modelo do aplicativo.
Show! Parabéns pelo conteúdo! Gostei do padrão.
Faaaala, Vitor! Valeeeu! 💜 😍
Quero vídeos do Lottie!
Esse tutorial vai me ajudar pra caramba... Eu estava mesmo precisando.
Excelente video! Acho que poderia ter tocado um pouco mais na gestão de dependencias e em como isso afeta a testabilidade. Especialmente quando toca ao modulos definidos na pasta services. Mas secalhar isso seria melhor abordado noutro video. Fica a sugestão. Cumprimentos
Vídeo de Lottie? Vamos lá!! Quanto mais conhecimento melhor.
Haha Diegão,seu processador ta rápido irmão, coda muito ! Inspirador!
Hahaha 😄. Valeeeu Vini! 💜
Mais uma vez me ajudou muito... Obrigado Diego
Diego, seria legal se pudesse fazer um vídeo explicando sobre monorepo com o lerna. Vi que vocês usam no projeto do skylab e procurando na internet, não vi boas explicações. Abs!
Top, também uso está estrutura, só faço pequenas alterações para cada app(adapto ao aplicativo), vi ela pela primeira vez em um exemplo no site de vocês.
Tô começando mas vou aderir ao padrão.
O que vocês acham de usar estilos dentro dos componentes? Quais vantagens e desvantagens que vocês enxergar nessa abordagem?
Para react.js é bem inprodutivo já que nós já estamos acostumados com o .css ou .scss ao invés da estrutura .js
Por exemplo: sou mais acostumado digitar 'margin-bottom' do css ao invés de 'marginBottom' do js.
Nos casos de React-native eu concordo com você, dá para colocar o componente e o estilo todo no mesmo arquivo...
Opaaa, isso é algo que me preocupa muito no React, já vi projetos muito zuados cara, sem organização nenhuma. Para dar manutenção é uma tristeza :/
Vídeo top! Acho ótima essa estrutura
Muito bom as dicas. parabéns..
Fica bem prático, né, Langela? Que massa que curtiu! 💜 😍
Kkkkk que engraçado eu já uso essa estrutura...
Muito top 👍✌️
Cara muito bacana, obrigado pelo video!
Diego se você fizer um vídeo sobre o Lottie, como criar, como exportar, como colocar no aplicativo, cara seria muito grato. Faz tempo que estou atrás.
Consistency is the Key...
Diego, eu me acostumei a usar sempre arrows functions, inclusive na criação dos componentes e percebi que você costuma usar functions mesmo.
Diferença em performance tem pois o ES6 VAI converter a arrow function em uma função tradicional. Entretanto, essa perca de performance só é vista com força em cenários de benchmark. No dia a dia é apenas syntactic sugar.
Impressão minha ou está cada vez mais parecido com meu amado Vuejs?
Diego, porque não usa .jsx ao invés de .js nos arquivos de componente?
Voce usa o TypeScript nos projetos ?
Cade aquele projeto q vc falo da CLI que vcis iao liberar que creava esses boilerplates com node, react, reacnative e typescript ? vai rolar?
E pra compartilhas codigo entre diferentes projetos vc usa o modulos do npm mesmo ? tanto pra funtions genericas como pra componentes do react?
No lugar de pages é legal utilizar views. como serão apenas os componentes de visualizações. pages é mais algo que algo para onde se tem a lógica de código dentro como php quem programava muito em php e não usava framework tinha esse hábito de usar pages.
E antes de se adotar PADRÔES, tem que ter uma arquitetura muito bem definida, Seguindo conceitos de engenharia de software, uma boa leitura e estudo são os livros de Robert Martin, um dos escritores do livro Manifesto Ágil, Arquitetura Hexagonal e recentemente: Arquitetura Limpa: O guia do artesão para estrutura e design de software. É o livro que deu origem a metodologias ágeis, scrum etc... Veja bem, eu tenho pouco mais de 10 anos de experiência, SÓ EM CARTEIRA hehe......... hj temos Docker, Git, Kubernetes, Node, CI/CD etc............... porém vejo acontecer OS MESMOS erros que ocorriam antigamente, NÂO com tanta frequencia, mas acontece e bastante. Antes de se pensar nas ferramentas que se vai utilizar deve-se pensar na arquitetura do projeto, nas dependências de cada componentes para que se isso todas as camadas de Regras de Negócio, Views, Serviços etc............. E não adianta ter um depois o outros, SOFTWARE E APLICAÇÔES WEB possui uma camada hierarquica de funcionalidades...e que cada uma faz o seu papel e complementa o outro. O que adianta vc testar apenas com JEST, ou PHPUnit seus dados, mas não configura testes na aplicação servidora? Tipo banco de dados etc? Vc se empenha em uma camada e esquece da outra. Por exemplo configurar um teste de DB com Liquibase etal, saca! Então, na verdade as empresas ainda estão um pouco imaturas porque desprezam esse conceito. Acham aplicação escalonável é sair contruindo APIS com Nodes ou jogando tudo para as NUVENS da vida heheh ;)
Parabéns pelo vídeo !!!
show ein. só faltou a pasta de tests
Qual teu teclado, Diego? Tá legal!
Gostei da sua estrutura, é parecida com a que eu venho usando, uso as pastas pages e components também, mas as outras ainda não porque comecei recentemente a estudar o React; vou dar uma olhada nesses styled components, parece ser muito da hora, por enquanto to usando Sass mesmo, mas fiquei meio decepcionado com a navegação pelo código no VS Code, pra Sass ele é bem fraco, já com Typescript é bem melhor (sinceramente não vejo motivo pra usar Javascript podendo usar o Typescript)
Sempre me perco nas estruturas que defino no início do projeto, quando ele chega no fim nunca fica a msm coisa que começou kkk, ótimo vídeo, parabéns!!
Podia dizer qual e o modelo desse teclado ai ne diego rs
Eu queria ver o Lottie em funcionamento, de preferencia em algum app
o app da dotz tem na hora que vc cadastra o tutorial é em lottie.
Muito bom
O Robsom chegando la atrás ehheehhe
conexões com banco
src/connectors
[-] mysql/índex.js
[-] mongodb/index.js
Pow que massa... não havia pensado nisso!
Parabéns pelo vídeo.
E Diego, como seria sua estrutura com um framework ou uma lib de UI. ?
Por exemplo Material UI, ou Ant Design
Pq eles já tem seus componentes. E o uso de css é mínimo ?
Quiser fazer um vídeo , não vou reclamar Kk. Vlwww
como que ficaria um crud se baseando nessa estrutura? em cada pasta dos pages criaria um componente pra cada rota do crud? tipo Pages > Todos > Create > index.js ?
Trás sobre notificação no React Native no expo
Fala Diego, tudo bom?
Então cara, sigo seu trabalho a algum tempo e me interesso bastante pelas tecnologias que você aborda. Estudo Sistemas de Informação pela UFPI e gostaria de começar aprender React Native. Fui nos minicursos que estão disponíveis no site da Rocket, porém vi que para chegar onde quero, preciso primeiro passar por JS, Javascript ES6+, NodeJS, ReactJS e por fim o React Native.
Quando abri o minicurso de JavaScript, percebi que você já leva em consideração que o aluno saiba de CSS, que outras tecnologias devo estudar antes de começar os cursos da Rocketseat? Abraços!
Chefe, e se o projeto tiver um dashboard e um "front"? Colocaria pastas "admin' e "front" dentro de cada pasta que mostrou?
LOTTIEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE :)
Fala Diego seu lindo, gostei da estrutura mais fiquei com uma duvida, E a semântica HTML como fica, estou começando agora com esse framework é tenho essa duvida. Não seria importante organizar a aplicação semântica, caso sim como faríamos jogaríamos tudo dentro do App Component mesmo?
Diego, lá no VueJS, o Flux é implementado no Vuex, que dá pra usar tanto global, como o Redux, mas tbm tem como fazer stores locais, a nível de página, do Vuex. Tem como usar o Redux de forma Local tbm?
Massa
Estou migrando para um Next e preciso salvar o endereço de todas as rotas do AWS, está pasta ROUTE é segura, ou seja, visível apenas no servidor? como a pasta PAGES/AP?
I
Muito bacana mesmo. Mas cara, não é mais fácil ainda você criar um arquivo bash que chama o comando para você criar essa estrutura e já criar também esses arquivos iniciais que você cria na mão? Poderia passar por parâmetro. Economizaria mais tempo ainda.
aguardando o lottie
É melhor criar os components com funções ou com classes?
Muito bom, faz video de lottie
Show. Como posso automatizar para criar essa estrutura principal e instalar as principais dependências?
n sei se vc ainda esta com essa duvida, mas vc poderia criar um projeto base no GitHub e fazer um clone dele
Muito bom essa dica.
Fala Diegão, que keyboard é esse que você ta usando?
keychron k2
o q vcs usam de framework de estilizacao pra web com react ? bootstrap? flexbox? o q ?
Importar um arquivo .css com variáveis de códigos de cores no index.js não seria mais fácil que importar os arquivos .js da pasta themes?
Valeu pelo vídeo.
Faz um vídeo sobre paginação e busca do Reactjs
vou utilizar no meu projeto
Booa, aí sim! 💜💜
Diego, e no caso de você utilizar o Redux Saga, como você estruturaria essa parte? Dentro do próprio diretório Store?
Ítalo, tudo bom? Sim, em outros vídeos ele coloca as sagas dentro da pasta store!
@@maykelmatheusdias3446 Ahh beleza, valeu pelo retorno 👍🏾
Perfeito!
Fala Diego, Blz. Eu sigo essa mesma estrutura de pastas, mas a diferença eh q soh coloco na pasta page os componentes que sao acessados pela rota, os outros deixo tudo na pasta componentes, o q vc acha disso?
Nice.
Nas ultimas semanas eu estive envolvido num projeto react, que utiliza redux e styled-components, eu como sou novato em react, logo no começo também me deparei com o dilema da estrutura da pastas, eu dei uma leve pesquisada e acabei decidindo adotar um abordagem de um unico arquivo por componente, porém nesse unico arquivo eu primeiro defino a classe do componente, depois defino um styled-component que "extende" esse priemeiro componente e por fim exporto o styled-component envolto da função connect do react-redux, os nomes (do componente de classe e do styled-component) seguem um padrão que agente definiu aqui, mas essa abordagem de deixar tudo num unico arquivo também me parece bem interassante, oque vcs acham ?
Pelo amor de Torvalds, faz um video sobre Lottie
Que teclado é esse que ele usa? Alguem sabe?
muito bom! que você acha de usar Atomic Design para estruturar suas views?
Save Diego qual teclado vc usa ?
Valeu!
Diego vc está usando o teclado mecânico K2 ?