0Pricing
React Academy · Aula

Convenções para a pasta de hooks e testes junto ao código

Crie uma convenção simples para hooks (prefixo use*, mantenha a lógica pura), coloque os hooks nas pastas das funcionalidades e mantenha os testes junto às unidades que verificam.

Convenções para a pasta de hooks e testes junto ao código é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 3. 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 3 aulas no total.

Por que adotar convenções para ganchos?

Objetivo: manter os ganchos organizados e testáveis.

  • Prefixos: use*
  • Lógica pura dentro dos ganchos; interface fora deles
  • Coloque os testes junto das unidades

Ideia de organização de pastas

  • features/counter/useCounter.js
  • features/counter/CounterPanel.jsx
  • features/counter/useCounter.test.jsx
  • ui/Button.jsx

Padrão de gancho: useCounter

Os ganchos retornam estado + ações; mantenha a API pequena e previsível.

<div id="root"></div>

Padrão de gancho: reutilização de useToggle

Ganchos pequenos são fáceis de reutilizar. Dois componentes compartilham o mesmo comportamento de useToggle.

<div id="root"></div>

Teste simulado: useCounter

Mantenha um arquivo de teste pequeno junto do gancho (por exemplo, useCounter.test.jsx). Aqui, simulamos asserções.

<div id="root"></div>

Dicas e lista de verificação

  • Nomeie os ganchos com use*
  • Mantenha os ganchos puros (sem DOM) e retorne uma API mínima
  • Mantenha os testes junto dos ganchos/componentes

Verificação dos fundamentos da co-localização

Por que manter os testes junto do componente ou gancho que está sendo testado?

Recapitulação

Recapitulação: coloque ganchos pequenos e puros nas pastas das funcionalidades, retorne APIs simples e armazene os testes ao lado das unidades para que sejam mantidos juntos durante as refatorações.

Perguntas Frequentes

A aula “Convenções para a pasta de hooks e testes junto ao código” é grátis?

Sim — o texto completo de “Convenções para a pasta de hooks e testes junto ao código” é 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 3 aulas no total.

O que vou aprender em “Convenções para a pasta de hooks e testes junto ao código”?

Crie uma convenção simples para hooks (prefixo use*, mantenha a lógica pura), coloque os hooks nas pastas das funcionalidades e mantenha os testes junto às unidades que verificam. 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 2 de 3.

Quanto tempo leva a aula “Convenções para a pasta de hooks e testes junto ao código”?

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. Pastas por funcionalidade e componentes de interface vs compostos
  2. Convenções para a pasta de hooks e testes junto ao código
  3. Diretrizes de refatoração
← Voltar para React Academy