Pular para conteúdo

Aula 02 🧱

Fundamentos: JSX, Componentes e Props

O que vamos construir hoje? 🛠️

  1. Entender o que são Componentes
  2. Dominar a sintaxe JSX
  3. O poder das Props
  4. Composição de interfaces

1. Componentes 🧩

O que é um Componente? 🤔

  • Uma função JavaScript...
  • Que retorna um pedaço de UI.
  • É reutilizável e independente.

Analogia: LEGO 🧱

  • Imagine cada peça como um componente.
  • Juntos, formam uma estrutura complexa.
  • Se uma peça quebra, você só troca ela.

Regra Crucial! ⚠️

  • Componentes PRECISAM começar com letra Maiúscula.
  • Header ✅
  • header ❌ (o React acha que é HTML nativo)

2. Sintaxe JSX ⚛️

HTML dentro do JS? 🤯

  • JSX = JavaScript XML
  • Facilita a visualização da estrutura.
  • Mas cuidado: não é HTML puro!

Regras de Sobrevivência 🛡️

  1. Nó pai único (ou use Fragment)
  2. Atributos em camelCase (Ex: onClick)
  3. class vira className

Por que className? 🧐

  • class já é usado pelo JavaScript para classes de objetos.
  • Evita que o navegador se confunda.

3. O Segredo das Props 🎁

O que são Props?

  • Abreviação de Properties.
  • Forma de enviar dados do "Pai" para o "Filho".
  • Deixam seus componentes dinâmicos.

Exemplo Prático 💻

<Botao texto="Entrar" cor="azul" />
<Botao texto="Sair" cor="vermelho" />

Imutabilidade 🧊

  • As Props são somente leitura.
  • O componente filho nunca deve alterar o que recebeu.

4. Melhores Práticas ✨

Destructuring 📂

  • Em vez de props.nome...
  • Use { nome } diretamente nos argumentos.
  • Código mais limpo e elegante!

Fragmentos <> </> 👻

  • Agrupe elementos sem criar uma div extra no HTML final.
  • Mantém o DOM limpo e performático.

🚀 Desafio Prático!

  • Criar um componente de Card de Produto.
  • Passar nome, preço e imagem via props.
  • Renderizar em lista no App.jsx.

Fim da Aula 02 🎓

Próxima Aula: Hooks e Estado!