Estrutura de pastas e arquivos com React

Como neste artigo vamos falar sobre estrutura de pastas e arquivos com React, não estamos falando de arquitetura de software, estamos falando em organização de projetos.

React é uma biblioteca incrível que transformou o cenário do desenvolvimento front-end e gerou um incrível ecossistema de ferramentas, bibliotecas e padrões. Ao longo desse tempo, o React mudou bastante e à medida que o React evolui nossos aplicativos, ferramentas e abordagens também evoluíram.

Com essa percepção, muitas abordagens, de arquitetura de software, já foram testadas como MVC (Model-View-Controller.), a arquitetura Flux e muitos outros. Porém, nem sempre é simples organizar nosso projeto utilizando uma boa organização de pastas e arquivos e, simultaneamente, se preocupar se estamos seguindo regras da arquitetura de software desejada. Durante muitos testes, definir um padrão de projeto que coube muito bem para quem está começando no mundo React e que certamente pode ser muito útil para o seu negócio ou aprendizado.

Então, durante todo esse artigo, nós iremos conhecer uma estrutura de pastas e arquivos, simples de entender, para qualquer nível de desenvolvedores e escalável para a maioria dos projetos.

Curso React - Fundamentos

Conhecer o curso

Objetivos

O principal objetivo dessa estrutura é que ela seja fácil de aprender e que mantenha um certo nível de escalabilidade de um projeto.

Por que utilizar?

Quando estamos desenvolvendo uma aplicação com React certamente nos deparamos com a necessidade de estruturar de forma organizada o projeto, porém, para desenvolvedores iniciantes, pode ser difícil de entender arquitetura de software como, por exemplo, a arquitetura Flux e MVC. Então esse padrão é para quem ainda está aprendendo React e quer ter uma boa organização de projeto antes de partir para arquiteturas mais “robustas”.

O interessante a se observar é que a estrutura de pastas e arquivos com React, pode-se dizer que, é a porta de entrada para um entendimento do porquê se preocupar com uma arquitetura de software e até um facilitador para entender como organizar o padrão de determinadas arquiteturas.

Modelo da estrutura

Os exemplos abaixo vão lhe oferecer um claro exemplo de como estruturar as pastas e arquivos do seu projeto.

No projeto React é muito comum termos páginas HTML que serão apresentadas para o usuário. Todas as páginas serão agrupadas em um diretório chamado pages.

Teremos outro diretório chamado ui. Aqui iremos agrupar tudo que será relacionado ao design da aplicação como, por exemplo, componentes, estilos CSS, temas e partes de uma tela.

E, por fim, teremos o diretório data, onde vamos agrupar tudo relacionado a regra de negócio, lógica, dados etc.

Então nossa aplicação vai seguir a seguinte estrutura:

src
├───data
│   ├───@types
│   ├───contexts
│   ├───hooks
│   ├───reduces
│   └───services
├───pages
│   └───home
└───ui
    ├───components
    ├───partials
    ├───styles
    └───theme

Vamos agora ver a seguir o que tem dentro de cada um dos diretórios de forma mais específica.

Curso React Native - Autenticação com Firebase Authentication

Conhecer o curso

Diretório data

Aqui não teremos muito o que discutir, é apenas um diretório onde você irá abstrair tudo relacionado aos seus dados e lógica. Então teremos os diretórios @types, onde ficam as interfaces e tipos, caso esteja utilizando TypeScript, hooks, context, reducers e services que é o local onde você pode colocar funções que vão ser reutilizadas em toda aplicação.

Vamos detalhar um pouco mais o que deve ter cada um desses diretórios.

data
├───@types
├───contexts
├───hooks
├───reduces
└───services

Diretório services

No diretório service, você pode criar funções que vão ser utilizadas em toda a aplicação como, por exemplo, funções para converter dados, objetos, funções contendo configuração de APIs, para fazer requisições HTTP, validação de formulários, etc.

Diretório hooks

Neste diretório você pode colocar a lógica das telas e componentes. É importante notar que aqui você vai criar diretórios dentro de diretórios para poder identificar de onde é aquele hook, se é referente a uma página ou componente.

hooks
├───components
│   └───inputs
│       └───UserForm
│           └───forms
└───pages
    ├───cadastro
    └───diarias

Note que separamos bem a origem de cada hook, se ele está em pages ou faz parte de um componente.

Diretório @types

O diretório @types, de uma aplicação React, só é utilizado quando estamos trabalhando com TypeScript, visto que lá iremos criar os tipos de cada objeto e, também, interfaces

@types
├───3rd
└───forms
└───user

Note que aqui, também, podemos organizar cada tipo em outros diretórios.

No diretório 3rd iremos colocar arquivos com a extensão, *.d.ts, caso haja a necessidade, que são arquivos de declaração de tipos.

Curso React - Despertando o Poder dos Hooks

Conhecer o curso

Diretório ui

Aqui vamos agrupar tudo relacionado a nossa interface do usuário.

Também temos uma proposta de como você deve agrupar esses elementos internamente. Uma das maiores vantagens do React é o modo de como é fácil componentizar sua UI, portanto neste diretório você deve criar um diretório para cada página ou pages. Podemos adicionar outro diretório de partes de uma página, dessa forma sua página principal pode ser lida facilmente, pois é montada com vários pedaços de uma página.

E, se você já adivinhou, pode fazer isso, também, no nível da UI, criando um diretório components que vão ser utilizados em mais de uma página da aplicação.

Então dentro de UI teremos o diretório components, partials que são partes de uma página, styles e até themes que é algo relacionado a configuração de temas.

ui
├───components
├───partials
├───styles
└───themes

Diretório components

Neste diretório nós, também, teremos outros diretórios para melhor organizar os componentes, aqui iremos organizar por categorias, por exemplo, um componente de botão e texto faz parte da categoria de inputs, outro componente de avatar ou status faz parte da categoria de data-display.

components
├───data-display
│   ├───DataList
│   ├───JobInformation
│   ├───Status
├───feedback
│   ├───Dialog
├───inputs
│   ├───RoundedButton
│   ├───TextField
│   └───UserForm
│       └───forms
├───navigation
│   ├───Link
└───surfaces
    ├───Footer
    └───Header

Eu costumo utilizar essas categorias seguindo o padrão do Material UI, mas você pode seguir qualquer outro modelo de categorias que mais lhe agrada.

Partials

Diferente dos componentes, aqui nós teremos partes de uma tela, por exemplo, uma tela com uma estrutura muito grande, com algumas dezenas de sessões, podemos dividir essas partes em componentes que, na verdade, são partes de uma tela.

partials
├───diarias
├───encontrar-diarista
└───index
    ├───advantages
    ├───frequent-question
    └───presentation

Conclusão

A estrutura de pastas e arquivos com React apresentada é uma estrutura que pode ser utilizada por qualquer um. Vai te ajudar a entender a importância de se ter uma arquitetura e, também, ajudar a começar a entender como funcionam outras arquiteturas mais complexas.

Hospedei uma aplicação de referência que você pode encontrar neste repositório no GitHub.

Caso queira aprender mais sobre o React, saiba que aqui na TreinaWeb nós temos a formação Desenvolvedor React - Funcional que possui 12h40 de vídeo e um total de 55 exercícios.

Veja quais são os cursos que fazem parte desta formação:

• React - Fundamentos
• React - Dominando Componentes Funcionais
• React - Despertando o Poder dos Hooks
• React - Conhecendo o React Router
• React - Estilização com Emotion (Styled Components)