Organização de pastas no React: estruture seu projeto de forma escalável

Por que a estrutura de pastas é importante no React?

Passo 1: o básico do básico

src/
└── App.js

Passo 2: evoluindo para múltiplos arquivos

src/
├── App.js
├── List.js
└── ListItem.js

Exemplo prático

// ListItem.js
const ListItem = ({ item }) => (
  <li>{item.name}</li>
);

export default ListItem;

// List.js
import ListItem from './ListItem';

const List = ({ items }) => (
  <ul>
    {items.map((item) => (
      <ListItem key={item.id} item={item} />
    ))}
  </ul>
);

export default List;

// App.js
import List from './List';

const items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];

function App() {
  return (
    <div>
      <h1>Minha Lista</h1>
      <List items={items} />
    </div>
  );
}

export default App;

Passo 3: separando componentes em pastas próprias

src/
├── components/
│   ├── App/
│   │   ├── App.js
│   │   ├── App.test.js
│   │   └── App.css
│   └── List/
│       ├── List.js
│       ├── ListItem.js
│       └── List.css

Passo 4: componentes genéricos e específicos

src/
├── components/
│   ├── Button/
│   └── Input/
├── features/
│   ├── Auth/
│   │   ├── Login.js
│   │   └── Register.js
└── services/
    └── api.js

Exemplo: componente de botão e formulário de login

// Button.js
const Button = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

export default Button;

// Login.js
import Button from '../../components/Button';

const Login = () => {
  return (
    <form>
      <input type="text" placeholder="Usuário" />
      <input type="password" placeholder="Senha" />
      <Button>Entrar</Button>
    </form>
  );
};

export default Login;

Passo 5: estrutura para contextos, hooks e serviços

src/
├── components/
│   └── Button/
├── context/
│   └── AuthContext.js
├── features/
│   └── Auth/
│       ├── Login.js
│       └── Register.js
├── hooks/
│   ├── useAuth.js
│   └── useFetch.js
└── services/
    └── api.js

• context/ mantém os contextos para estados globais, como AuthContext.js.

• hooks/ mantém a lógica customizada reutilizável.

• services/ centraliza as chamadas API.

• Contextos globais: armazene contextos que gerenciam estados compartilhados em toda a aplicação na pasta src/context/. Isso facilita o acesso e a manutenção desses estados.

• Contextos específicos: se um contexto for muito específico de uma funcionalidade e não for usado em outras partes da aplicação, você pode optar por mantê-lo dentro da pasta da feature correspondente. No entanto, para fins de clareza e padronização, recomendamos centralizar os contextos em src/context/.

Passo 6: usando arquivos index.js para facilitar importações

// src/components/Button/index.js
export { default as Button } from './Button';

// src/components/index.js
export { Button } from './Button';
// Exporte outros componentes conforme necessário

import { Button } from './components';

Passo 7: simplificando importações com caminhos absolutos

Configurando o jsconfig.json (para JavaScript) ou tsconfig.json (para TypeScript)

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src",
    // outras configurações
  },
  // outras configurações
}

Exemplo prático de importação com caminho absoluto

// src/features/Auth/Login.js
import Button from '../../components/Button';

// src/features/Auth/Login.js
import Button from 'components/Button';

Observações importantes

• Certifique-se de que seu bundler ou ferramenta de construção (como Webpack, Vite ou Create React App) suporta a configuração de baseUrl. No Create React App, a configuração do jsconfig.json ou tsconfig.json já é suportada nativamente.

• Após configurar o baseUrl, reinicie seu servidor de desenvolvimento para que as mudanças entrem em vigor.

Benefícios de usar caminhos absolutos

• Legibilidade: importações mais curtas e claras.

• Manutenção: facilita a refatoração e a movimentação de arquivos sem quebrar importações.

• Produtividade: reduz erros causados por caminhos relativos complexos.

Passo 8: gerenciando estilos com CSS Modules ou Styled Components

CSS Modules

src/
├── components/
│   ├── Button/
│   │   ├── Button.js
│   │   └── Button.module.css

// Button.js
import styles from './Button.module.css';

const Button = ({ children, onClick }) => (
  <button className={styles.button} onClick={onClick}>
    {children}
  </button>
);

export default Button;

.button {
  background-color: #6200ee;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}

Styled Components

npm install styled-components

src/
├── components/
│   └── Button.js

// Button.js
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #6200ee;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;

  &:hover {
    background-color: #3700b3;
  }
`;

const Button = ({ children, onClick }) => (
  <StyledButton onClick={onClick}>{children}</StyledButton>
);

export default Button;

Impacto na organização das pastas e arquivos

• Com CSS Modules:
• Os arquivos de estilo (.module.css) ficam próximos aos componentes, mantendo a coesão.
• Evita conflitos de nomes de classes, já que os estilos são escopados localmente.

• Com Styled Components:
• Os estilos são escritos no mesmo arquivo do componente, reduzindo a quantidade de arquivos.
• Facilita a reutilização de componentes estilizados e a aplicação de temas.

Vantagens dessas abordagens

• Escopo local de estilos: previne que estilos vazem para outros componentes.

• Melhor manutenção: estilos e componentes juntos facilitam a leitura e atualização do código.

• Reutilização e composição: fácil criação de componentes estilizados reutilizáveis.

Escolhendo a abordagem certa

Estrutura de um projeto React (exemplo)

my-rocketseat-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/                  # Imagens e arquivos estáticos
│   ├── components/              # Componentes reutilizáveis
│   │   ├── Button/
│   │   │   ├── Button.js
│   │   │   ├── Button.test.js
│   │   │   └── Button.css
│   │   └── Modal/
│   │       ├── Modal.js
│   │       ├── Modal.test.js
│   │       └── Modal.css
│   ├── context/                 # Contextos para estado global
│   │   └── AuthContext.js
│   ├── features/                # Funcionalidades específicas da aplicação
│   │   ├── Auth/
│   │   │   ├── Login.js
│   │   │   ├── Register.js
│   │   │   └── authSlice.js
│   │   └── Dashboard/
│   │       ├── Dashboard.js
│   │       ├── Dashboard.css
│   │       └── Dashboard.test.js
│   ├── hooks/                   # Hooks personalizados
│   │   ├── useAuth.js
│   │   └── useFetch.js
│   ├── pages/                   # Páginas principais da aplicação
│   │   ├── Home.js
│   │   └── Profile.js
│   ├── services/                # Serviços de API e outras integrações externas
│   │   ├── api.js
│   │   └── authService.js
│   ├── styles/                  # Estilos globais
│   │   ├── variables.css
│   │   └── main.css
│   ├── utils/                   # Utilitários e funções auxiliares
│   │   ├── formatDate.js
│   │   └── slugify.js
│   ├── App.js
│   ├── index.js
│   └── setupTests.js            # Configurações globais para testes
├── .env                         # Variáveis de ambiente
├── package.json
└── README.md

Explicação de cada pasta

1. assets/: Armazena imagens, ícones e outros arquivos estáticos. Ideal para manter esses arquivos organizados fora do código principal.