🚀 Capítulo 02: JSX - O Sabre de Luz

🎯 Objetivo da Aula

Ao final desta aula, você entenderá o que é o JSX, como ele permite misturar HTML e JavaScript no mesmo arquivo e como usar variáveis para deixar seu HTML dinâmico no React.

---

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

Para pilotar a Millenium Falcon, você precisa de um painel que mostre o nome da nave e o ano atual da missão. Seu desafio é usar o JSX para exibir essas informações puxando-as de variáveis do JavaScript!

---

🧠 Fundamentos: A Teoria Traduzida

No React, nós não escrevemos HTML puro. Nós escrevemos JSX (JavaScript XML). Ele se parece muito com HTML, mas tem superpoderes!

Regras de Ouro do JSX:

1. Poder do JS: Para usar qualquer variável ou código JavaScript no meio do HTML, você usa chaves simples { } (diferente do Angular que usa duas {{ }}).
2. Tag Pai Única: O seu componente deve retornar sempre uma única tag que envelopa tudo (pode ser uma <div> ou um fragmento vazio <> </>).
3. className: Como a palavra class já é usada no JavaScript, no JSX nós usamos className para dar classes CSS aos elementos.

---

📖 Exemplo Guiado: Exibindo Dados da Nave

Vamos atualizar o arquivo App.jsx para usar JSX de verdade.

🛠️ Passo a Passo

Abra o arquivo src/App.jsx e altere o código para:

function App() {
  // Aqui fica o JavaScript
  const nomeNave = 'Millenium Falcon';
  const anoAtual = 2026;
 
  return (
    // Aqui fica o JSX (HTML + JS)
    <div>
      <h1>🚀 Painel da Nave</h1>
      <p>Identificacao: **{nomeNave}**</p>
      <p>Ano de Missão: **{anoAtual}**</p>
      
      {/* Podemos fazer operações dentro das chaves! */}
      <p>Próximo Ano: {anoAtual + 1}</p>
    </div>
  )
}
 
export default App;

🕹️ Como Executar e Testar no VS Code

1. Salve o arquivo.
2. Se o terminal com npm run dev estiver rodando, abra o navegador.
3. Você verá o nome da nave e os anos calculados aparecendo na tela!

---

🛠️ Prática Obrigatória 1

Crie uma variável chamada nomePiloto com o valor “Han Solo”. Exiba-a na tela dentro de um parágrafo.

---

🛠️ Prática Obrigatória 2

Crie uma variável chamada escudoAtivo do tipo booleano (true). Use o operador ternário dentro das chaves do JSX para exibir “🛡️ Escudos Ligados” se for verdadeiro, ou ”❌ Escudos Desligados” se for falso. Dica: {escudoAtivo ? '🛡️ Escudos Ligados' : '❌ Escudos Desligados'}

---

🔑 Gabarito de Código/Fórmulas

Prática 1 e 2:

No App.jsx:

function App() {
  const nomePiloto = 'Han Solo';
  const escudoAtivo = true;
 
  return (
    <div>
      <h1>Painel da Nave</h1>
      <p>Piloto: {nomePiloto}</p>
      <p>Status do Escudo: {escudoAtivo ? '🛡️ Escudos Ligados' : '❌ Escudos Desligados'}</p>
    </div>
  )
}

---

← Capitulo Anterior | Proximo Capitulo →