Estrutura de pastas e arquivos no ReactJs

Neste breve post irie mostrar para você a minha estrutura de pastas e arquivos que utilizo no reactjs. Durante muito tempo trabalhando com reactjs eu tive problemas com a estrutura do projeto, tentei várias formas mas nenhuma delas parecia boa, e no fim nem eu mais conseguia entender onde estava cada coisa. Pesquisando um pouco e adicionando um pouco das experiências que tive, então cheguei nessa estrutura que vou lhe mostrar. Ressalto que é apenas a forma como gosto de fazer, não significa que seja a melhor forma.

Veja essa estrutura de pastas de um projeto real

+---public
+---src
    +---components
    ¦   +---App
    ¦   +---Button
    ¦   +---Input
    ¦   +---Layout
    ¦   +---Loading
    ¦   +---Modal
    ¦   +---Navbar
    ¦   +---Todo
    +---Firebase
    +---images
    +---pages
    ¦   +---Home
    ¦   +---Login
    ¦   +---LogOut
    ¦   +---Profile
    ¦   +---SignUp
    ¦   +---Todo
    ¦       +---Create
    ¦       +---Delete
    ¦       +---Edit
    ¦       +---List
    +---store
        +---actions
        +---reducers

Primeiro eu gosto de separar componentes de páginas, então dentro da pasta components sempre coloco todos os componentes separados por pastas também.

Na pasta de p´áginas, seguindo a mesma premissa de separar por sub-pastas a estrutura fica parecida com a pasta de componentes. Repare em pages/Todo como todo requer mais de uma pagina, eu subdivido novamente, colocando o nome da pasta referente ao que ela contem. Se estou dentro da pasta Todo, logo se entende que a subpasta Delete se refere a página de deletar todos.

Repare que as pastas ficam fáceis de serem lidas e também facilita muito na hora de fazer importação dos arquivos.

Agora com arquivos

+---public
¦       favicon.ico
¦       index.html   
¦       manifest.json
¦       robots.txt
+---src
    ¦   index.css
    ¦   index.js
    ¦
    +---components
    ¦   +---App
    ¦   ¦       App.js
    ¦   ¦       index.js 
    ¦   +---Todo
    ¦           index.js
    ¦           styles.css
    ¦           Todo.js 
    +---Firebase
    ¦       Firebase.js
    ¦       index.js   
    +---images
    ¦       logo.png
    +---pages
    ¦   +---Login
    ¦   ¦       index.js
    ¦   ¦       Login.js
    ¦   ¦       styles.css
    ¦   +---Todo
    ¦       +---Create
    ¦       ¦       CreateToto.js
    ¦       ¦       index.js
    ¦       ¦       styles.css
    ¦       +---Delete
    ¦               DeleteTodo.js
    ¦               index.js
    ¦               styles.css
    +---store
        ¦   index.js        
        +---actions
        ¦       actionsType.js
        ¦       authActions.js
        ¦       index.js
        ¦       todoActions.js        
        +---reducers
                authReducer.js
                index.js
                todoReducer.js

Aqui ocultei algumas pastas e arquivos para não ficar enorme a lista, mas já dá para perceber que cada pasta possui basicamente três arquivos: styles.css, component.js e index.js. O segredo está no arquivo index.js, este arquivo é basicamente assim:

export {default} from './Button';

Ele exporta para fora da pasta tudo que é exportado do arquivo principal, neste exemplo é a pasta Button. Veja como fica fácil. Imagine que estou no diretório ../components/Todo e quero importar o componente de Button, basta fazer assim:

//file Todo.js
import Button from '../Button';

Se não fosse a utilização do arquivo index.js em cada pasta, essa mesma importação ficaria mais verbosa, como isso aqui:

//file Todo.js
import Button from '../Button/Button';

Neste caso ruim, você teria que acessar a pasta Button e em seguida especificar de qual arquivo você quer importar o Button.

Concluindo

Bom, o objetivo deste artigo foi compartilhar com você como que eu faço em meus projetos. Como eu disse, essa é a minha forma de fazer, mas podem existir outras que sejam muito melhores. Minha dica é, olhe como outras pessoas fazem, consulte algumas formas diferentes e veja qual você se adapta melhor.

Há, se você quiser conferir este projeto de onde tirei essa estrutura, ele está aqui no meu GitHub Toto-List.

Ficou alguma dúvida? deixe nos comentários, terei uma grande satisfação em lhe responder. Abraços!!!