Estrutura de pastas e arquivos no ReactJs

React Native Dez 13, 2019

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

Josias Pereira

Sou Bacharel em Sistemas de Informação. No meu tempo livre, gosto de escrever sobre tecnologias, linguagens de programação, ferramentas e minhas experiências sobre o desenvolvimento web.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.