Pular para conteúdo

Aula 12 - Introdução ao React ⚛️

O Poder dos Componentes Modernos


Agenda 📅

  1. O que são SPAs?
  2. Por que React?
  3. Vite: A Ferramenta Rápida
  4. JSX: JS + HTML
  5. Componentes e LEGO
  6. Props: O Coração Dinâmico

1. Single Page Applications (SPA) 📄

  • O site que nunca recarrega.
  • Navegação fluida e instantânea.
  • Ex: Gmail, Facebook, Spotify Web.

2. Por que o React venceu? ⚔️

  • Componentização (Foco no Reuso).
  • Virtual DOM (Foco na Performance).
  • Gigantesco Ecossistema (Foco no Emprego).

3. Vite: O Novo Padrão ⚡

  • Inicia o projeto em segundos.
  • Feedback instantâneo durante o código.

4. JSX: A Mistura Perfeita 🧪

function Titulo() {
  const nome = "React";
  return <h1>Olá, {nome}!</h1>;
}
  • Parece HTML, mas tem o poder do Javascript.

5. Componentes = LEGO 🧩

  • Pequenas partes isoladas.
  • Facilita testes e trabalho em equipe.

6. Props: Passando o Bastão 🎁

  • Permite que componentes recebam dados do "pai".
  • Torna componentes genéricos e reutilizáveis.

Resumo ✅

  • SPA torna a Web parecida com Apps.
  • React organiza sua UI em componentes.
  • Vite é seu melhor amigo no desenvolvimento.

Próxima Aula: Dinâmica e Estado 🎣

O que acontece quando o usuário clica?

  • Hooks: useState.
  • Reatividade na prática.

Dúvidas? ⚛️