0Pricing
React Academy · Aula

Estrutura de pastas e convenções de nomenclatura

Organize um projeto React com pastas baseadas em funcionalidades e nomes de arquivos claros.

Estrutura de pastas e convenções de nomenclatura é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você explorará estruturas comuns de pastas para projetos React, aprenderá convenções de nomenclatura para arquivos e componentes e entenderá como organizar o código à medida que o projeto cresce.

A estrutura padrão

Um projeto mínimo com Vite + React tem `src/App.jsx` e `src/main.jsx`. Isso funciona bem para demonstrações pequenas, mas não é escalável. À medida que você adiciona funcionalidades, crie pastas específicas para manter o código relacionado reunido.
src/
  main.jsx
  App.jsx
  index.css

Estrutura baseada em funcionalidades

Agrupe os arquivos por funcionalidade, e não por tipo. Cada pasta de funcionalidade contém seu componente, estilos, testes e funções auxiliares. Isso facilita adicionar ou excluir uma funcionalidade inteira de uma só vez.
src/
  features/
    auth/
      LoginForm.jsx
      LoginForm.test.jsx
      useLogin.js
    dashboard/
      Dashboard.jsx
      useDashboardData.js
  components/     <- shared UI only
  hooks/          <- shared hooks
  lib/            <- utilities

Nomenclatura de arquivos de componentes

Nomeie os arquivos de componentes usando **PascalCase**, de acordo com o nome do componente: `UserCard.jsx`, `NavigationBar.jsx`. Um componente por arquivo é o padrão. Usar `.jsx` (ou `.tsx`) informa aos editores que o arquivo contém JSX.

Nomenclatura de arquivos que não são de componentes

Ganchos, utilitários e constantes usam **camelCase**: `useAuth.js`, `formatDate.js`, `apiClient.js`. Os arquivos de teste reproduzem o nome do código-fonte, com `.test` ou `.spec`: `useAuth.test.js`.

Arquivos index para importações organizadas

Adicionar um `index.js` a uma pasta permite importar usando o caminho da pasta, em vez do caminho completo do arquivo. Mantenha os arquivos index apenas como reexportações — sem lógica.
// src/features/auth/index.js
export { LoginForm } from './LoginForm';
export { useLogin } from './useLogin';

// Consumer
import { LoginForm } from '@/features/auth';

Importações absolutas com aliases de caminho

Configure um alias `@/` apontando para `src/` em `vite.config.js` e `tsconfig.json`. Isso evita caminhos relativos frágeis, como `../../../../components/Button`.
// vite.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

Componentes compartilhados versus componentes de funcionalidades

Coloque os componentes usados em apenas uma funcionalidade dentro da pasta dessa funcionalidade. Mova um componente para `src/components/` somente quando duas ou mais funcionalidades precisarem dele. Evite extraí-lo prematuramente.

Arquivos de constantes e configuração

Armazene strings mágicas, URLs base da API e encapsuladores de variáveis de ambiente em `src/lib/constants.js` ou `src/config.js`. Nunca espalhe strings `process.env.VITE_API_URL` por vários arquivos.
// src/config.js
export const API_BASE = import.meta.env.VITE_API_URL;

Tipos e interfaces (TypeScript)

Em projetos TypeScript, mantenha os tipos junto da funcionalidade ou do componente que os utiliza. Para tipos compartilhados usados em várias funcionalidades, crie `src/types/` com um arquivo para cada área do domínio.

Verificação rápida

Qual é a principal vantagem de uma estrutura de pastas baseada em funcionalidades em comparação com uma estrutura baseada em tipos?

Recapitulação

Use pastas baseadas em funcionalidades, PascalCase para arquivos de componentes, camelCase para ganchos e utilitários, reexportações com index.js para importações organizadas e um alias de caminho como @/ para eliminar caminhos relativos longos.

Curso concluído

Parabéns! Você concluiu **Modo estrito do React e melhores práticas**. Agora você entende o comportamento de StrictMode, como escrever funções de renderização puras, usar chaves e referências corretamente e criar uma estrutura de pastas escalável.

Perguntas Frequentes

A aula “Estrutura de pastas e convenções de nomenclatura” é grátis?

Sim — o texto completo de “Estrutura de pastas e convenções de nomenclatura” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Estrutura de pastas e convenções de nomenclatura”?

Organize um projeto React com pastas baseadas em funcionalidades e nomes de arquivos claros. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Estrutura de pastas e convenções de nomenclatura”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O que StrictMode faz
  2. Componentes puros e prevenção de efeitos colaterais na renderização
  3. Boas práticas para chaves e refs
  4. Estrutura de pastas e convenções de nomenclatura
← Voltar para React Academy