Aula 02 – Fundamentos: JSX, Componentes e Props 🧱

Nesta aula, vamos mergulhar no coração do React. Vamos entender como criar peças reutilizáveis de interface e como passar dados entre elas.

---

🏗️ O que são Componentes?

Componentes são os blocos de construção de qualquer aplicação React. Pense neles como funções JavaScript que retornam elementos de interface.

Regra de Ouro

Todo componente React deve começar com letra maiúscula (ex: MeuBotao em vez de meubotao). Isso ajuda o React a diferenciar componentes de tags HTML padrão.

---

⚛️ JSX: JavaScript + XML

O JSX nos permite escrever algo muito parecido com HTML dentro do nosso código JavaScript.

Exemplos de Transpilação

// O que escrevemos (JSX)
const elemento = <h1 className="titulo">Olá!</h1>;

// O que o React entende
const elemento = React.createElement('h1', {className: 'titulo'}, 'Olá!');

Regras do JSX:

1. Tag Pai Única: Um componente deve retornar apenas um elemento raiz (ou use <> ... </>).
2. Fechamento de Tags: Todas as tags devem ser fechadas (ex: <img />, <br />).
3. CamelCase: Atributos HTML viram CamelCase (ex: class vira className, onclick vira onClick).

---

🎁 Props: Passando Informação

Props (abreviação de properties) são como argumentos que passamos para os componentes para torná-os dinâmicos e reutilizáveis.

// Definindo o componente
function Saudacao(props) {
  return <h1>Olá, {props.nome}!</h1>;
}

// Usando o componente
<Saudacao nome="Maria" />
<Saudacao nome="João" />

Imutabilidade

As Props são somente leitura. Um componente nunca deve tentar modificar as props que recebe.

---

🧩 Composição de Componentes

Podemos colocar componentes dentro de outros componentes, criando uma hierarquia.

graph TD
    App[App.jsx] --> Header[Header.jsx]
    App --> Main[Main.jsx]
    App --> Footer[Footer.jsx]
    Main --> Card1[Card.jsx]
    Main --> Card2[Card.jsx]

---

🚀 Prática da Aula

Vamos criar uma lista de "Cards" de produtos.

1. Crie um novo arquivo src/components/Card.jsx.
2. Defina o componente Card que recebe titulo, preco e imagem via props.
3. No seu App.jsx, importe o Card e use-o várias vezes com dados diferentes.

# Exemplo de estrutura de pastas recomendada
src/
  components/
    Card.jsx
    Header.jsx
  App.jsx
  main.jsx

Dica: Destructuring

Em vez de usar props.nome, você pode capturar o dado diretamente: function Saudacao({ nome }) { ... }