React - Estruturas de pastas do source #726
Replies: 8 comments
-
|
Uma prática que tenho usado muito nos meus projetos (tanto React como React Redux) é sempre nomear as pastas relacionadas aos componentes em PascalCase. Outro ponto, é não nomear containers (ou uma variação qualquer do nome do teu componente) usando ".". Pra mim fica mais simples como HomeContainer, RootContainer, etc. Mas fora isso, a estrutura no exemplo é bem similar a que eu uso. PS: não consegui encontrar de onde tirei a estrutura que adotei na maioria dos projetos, mas é parecida com isso: https://daveceddia.com/react-project-structure/ (Edit) |
Beta Was this translation helpful? Give feedback.
-
|
@phsantiago Componentes
Sim, também mantenho todos componentes reutilizáveis em qualquer escopo na pasta components Layouts/Views - estrutura de páginas padrõesPara aplicações que possuam múltiplos ambientes (como um portal de acesso + dashboard + xpto), defino layouts (views) separados, onde posso definir components e estruturas de páginas específicos de cada ambiente. RoutesMantenho a declaração de rotas em um arquivo centralizador ou, dependendo das regras e complexidade, separo os arquivos por entidades. StoreUtilizo o modelo duck para melhor organização da estrutura redux. Posso definir middlewares, utils e demais necessidades do projeto na pasta state. Dentro da pasta ducks, escopo as actions, reducers, selectors etc. de acordo com as entidades do negócio e não atrelado aos componentes. ConfigPor fim, a pasta config centraliza as definições padrões para comunicação com API, oAuth, URLs, branding colors ( para Styled-Component ou themes components, por exemplo) e todas as demais constantes do projeto. As demais práticas que você citou (extensão de arquivo, centralizador para imports, arquivos de teste), também utilizo no workflow. Ao meu ver o grande ganho que tive com ducks, foi conseguir refletir a modelagem das entidades do negócio desacoplado dos componentes e separar o que é componente de interface e o que é apenas containers, views ou abastrações para camadas de comunicação. |
Beta Was this translation helpful? Give feedback.
-
|
@phsantiago pra dar uma contribuida: Tenho utilizado atomic components baseado no atomic design do Brad Frost. Estou usando também o styled-components para meus estilos. Pra resolver o problema do No geral fica tudo organizado assim, mas dependendo do projeto que tenha sagas e que decidamos usar ducks a gente dá uma adaptada na estrutura. Espero que possa ter te ajudado. |
Beta Was this translation helpful? Give feedback.
-
|
Sempre vejo essas definição de estrutura, forma de separar uma aplicação, não necessariamente com React, mas eu sempre fico curioso para ver uma real utilização. Alguém tem um repo que tenha uma aplicação feita em React usando uma estrutura assim? |
Beta Was this translation helpful? Give feedback.
-
|
@lucasmahle Essa estrutura que mandei uso num projeto médio, só não compartilho tudo com você por ser closed source. Se o código não pertencesse a minha empresa eu compartilharia. |
Beta Was this translation helpful? Give feedback.
-
|
Estrutura que estou utilizando em um projeto com redux, basicamente tenho separado o que é HOC e componentes que são utilizados pela aplicação toda, e o resto fica em "módulos": |
Beta Was this translation helpful? Give feedback.
-
|
@phsantiago os novos componentes você vai adicionado na mesma hierarquia do home, exemplo: Dentro do meu componente home vou utilizar o componentes feed de notícias, esse feed de notícias você cria no home ou cria uma nova estrutura, cria uma pasta feed e dentro dela os componentes do feed. Outra duvida são os componentes shared compartilhado pela aplicação, você criar alguma pasta ou vai apenas adicionado na estrutura de pasta componentes novas pastas. Obs. Sou novo com React e estou em busca de um estrutura que minha aplicação possa crescer sem problemas, essa sua achei bem bacana, porém surgiu essas duvidas. |
Beta Was this translation helpful? Give feedback.
-
|
Estou procurando bastante sobre isso para melhorar minha performance durante a criação. Vou deixar aqui o que me deixou mais produtivo pelo menos até agora. ├─── index.js ├─── rotas.js ├─── FIREBASE │ ├───fire1.js │ └───fire2.js ├─── COMPONENTS │ ├───componente1.js │ ├───componente2.js │ └───componente3.js ├─── SCREENS │ ├───PAGINA1 │ │ ├───COMPONENTS │ │ │ └───button.js │ │ └───screenPagina2.js │ ├───PAGINA2 │ │ ├───COMPONENTS │ │ │ └───button.js │ │ └───screenPagina3.js tenho uma pasta para os componentes que são comuns à toda aplicação, |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Como vocês tem estruturado seus projetos feitos em React? E com React + Redux?
Tenho usado esta estrutura em meus projetos:
. ├── components │ ├── app │ │ ├── App.js │ │ └── index.js │ ├── button │ │ ├── Button.js │ │ └── index.js │ ├── footer │ │ ├── Footer.js │ │ └── index.js │ ├── header │ │ ├── Header.js │ │ ├── Header.test.js │ │ └── index.js │ ├── home │ │ ├── Home.container.js │ │ ├── Home.js │ │ └── home.test.js │ ├── loading │ │ ├── index.js │ │ └── Loading.js │ └── media │ ├── index.js │ └── Media.js ├── fonts │ └── orkney-font │ ├── orkney-regular-webfont.woff │ ├── orkney-regular-webfont.woff2 │ └──orkney-regular-webfont.woff2 ├── images │ ├── footer-logo.png │ └── logo.png ├── index.js └── store ├── actions │ ├── lorem.js │ ├── lorem.test.js │ └── ui.js └── reducers ├── lorem.js ├── ipsum.js ├── ipsum.test.js └── ui.jsJustificativas e regras para esta estrutura:
Todos componentes em uma única pasta.
Tudo no react é componente, deixando eles ao mesmo nível podemos acessar facilmente precisando de no máximo um
../para sair do nível dele e termos acesso a qualquer outro componente do nosso App.Todos no mesmo diretório força não existirem componentes com nomes iguais, assim podemos escalar muito sem rolar aquilo de ter dois componentes com mesmo nome e não saber exatamente o que cada um faz. Óbvio que com o tempo vai começar a ficar verboso, mas mesmo assim continua sendo bom.
Dan Abramov, co-autor do Redux uma vez falou que o Facebook mantém 30.000 componentes em React baseado nisso rolou uma discussão no Reddit sobre como era organizado e Dan respondeu novamente, dizendo que cada filename era único e que poderia ser importado de qualquer lugar do projeto. Baseado nisso tive esta ideia de organização da pasta de componentes.
Não utilizar a extensão
.jsxA extensão jsx era útil antes do Babel, quando precisávamos especificar que o jsx seria transpilado. Hoje em dia não temos essa necessidade, e isso pode gerar até problemas, quando temos por exemplo um arquivo que usa flow e é um jsx, precisamos criar algo do tipo
arquivo.flow.jsx.Dan Abramov escreveu sobre isso numa issue
Separar arquivos de testes e de componentes conectados ao Redux junto com seu componente de apresentação
Economizamos tempo em não precisar de sair, entrar ou criar pastas quando estamos focados em desenvolver o nosso componente, assim que estamos no diretório dele podemos de forma rápida criar seu container e teste.
Esse approach também facilita quando vamos importar os componentes nos testes, pois já estão no mesmo diretório.
Criar um index importando o componente e exportando como default. (opcional)
Este é bem copia e cola, faço isso para quando importar o componente não precisar digitar o nome do seu arquivo, por exemplo
import Footer from "../footer/footer".Com o index apenas preciso usar
import Footer from "../footer"Separar actions creators, actions e reducers na pasta Store
Com isso podemos focar onde cuidamos do state do nosso App, importando facilmente as actions para ajudar nos nossos cases dos reducers.
CSS in JS
Para o CSS tenho deixado junto com o componente, criando um Styled-Component para cada lugar onde adiciono estilo, tive um problema com isso por ficar um "linguição de código", como uso Vim nem vi que estava ruim de navegar nos outros editores. Precisava de um mega scroll.
A parte boa do StyledComponents é que se não usamos mais nosso css, por ele ser um component a lint avisa que temos uma variável definida não utilizada, e isso é SENSACIONAL em evitar código não utilizado, não tive isso em nenhuma outra forma com css/sass e outros 😢 mas depois vou abrir uma issue sobre isso rs, não é o tema principal dessa.
Gostaria que vocês compartilhassem como vocês estruturam e porquê.
Também estou de coração aberto para receber críticas, pitacos ou elogios haha.
Beta Was this translation helpful? Give feedback.
All reactions