🚀 Capítulo 19: Boas Práticas

🎯 Objetivo da Aula

Ao final desta aula, você conhecerá as melhores práticas do mercado para organizar seus projetos React, criar componentes limpos e manter o código fácil de entender por outros desenvolvedores.

---

🏢 O Cenário Prático (Seu Desafio)

O código dos sistemas da Millenium Falcon foi escrito às pressas por vários contrabandistas e agora está uma bagunça! Seu desafio é aplicar as Diretrizes da Aliança Rebelde (Boas Práticas) para organizar os arquivos e garantir que qualquer piloto consiga entender o sistema!

---

🧠 Fundamentos: A Teoria Traduzida

Um bom desenvolvedor não apenas faz o código funcionar, ele faz o código ser fácil de ler! Aqui estão as regras de ouro do React:

1. Componentes Pequenos e Focados

Um componente deve fazer apenas uma coisa bem feita. Se o seu arquivo de componente tiver mais de 200 linhas, provavelmente ele está fazendo coisas demais e deve ser dividido em componentes menores.

2. Organização de Pastas Padrão

Não jogue todos os arquivos dentro da pasta src. Organize assim:

• src/components/: Para componentes reutilizáveis (Botões, Cards, Menus).
• src/hooks/: Para os seus Custom Hooks.
• src/context/: Para os arquivos da Context API.
• src/pages/ ou src/views/: Para os componentes que representam páginas inteiras das rotas.

3. Convenção de Nomes

• PascalCase para arquivos de componentes: PainelControle.jsx, BotaoDisparar.jsx.
• camelCase para funções e variáveis: const [meuEstado, setMeuEstado] = useState().

---

📖 Exemplo Guiado: Refatorando um Componente

Imagine este componente bagunçado:

// Bagunçado: Tudo no mesmo lugar
function Painel() {
  return (
    <div>
      <h1>Painel</h1>
      {/* Lista complexa aqui dentro */}
      <ul><li>Nave 1</li><li>Nave 2</li></ul>
      {/* Rodapé aqui dentro */}
      <footer>Status: Ok</footer>
    </div>
  )
}

O Jeito Certo (Refatorado):

import ListaNaves from './components/ListaNaves';
import Rodape from './components/Rodape';
 
function Painel() {
  return (
    <div>
      <h1>Painel</h1>
      <ListaNaves />
      <Rodape status="Ok" />
    </div>
  )
}

---

🛠️ Prática Obrigatória 1

Onde você guardaria o arquivo useContador.js que criamos no Capítulo 8, seguindo a estrutura de pastas recomendada?

---

🛠️ Prática Obrigatória 2

O que está errado (segundo as convenções) no nome do arquivo de componente listadeclones.jsx? Como ele deveria se chamar?

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

Deveria ficar na pasta src/hooks/useContador.js.

Prática 2:

O nome está todo em minúsculo. Como é um componente, deveria usar PascalCase com as primeiras letras maiúsculas: ListaDeClones.jsx.

---

← Capitulo Anterior | Proximo Capitulo →