Pular para conteúdo

Aula 01 🚀

Introdução ao Frontend Moderno e React

O que vamos aprender hoje? 📚

  1. Evolução do Desenvolvimento Web
  2. O que é uma SPA?
  3. O Ecossistema JavaScript
  4. Introdução ao React
  5. Criando seu primeiro projeto

1. Evolução da Web 🌍

Web Estática (Anos 90) 🕸️

  • Apenas HTML
  • Sem interação dinâmica
  • Cada página era um arquivo .html físico

Web Dinâmica / MPA (Anos 2000) ⚙️

  • Multi-Page Applications
  • Servidor gera o HTML (PHP, Java, ASP)
  • Recarregamento total da página a cada clique

A "Piscada" da Web 😖

  • Ao clicar em um link, a tela fica branca por um instante
  • O navegador refaz o download de tudo
  • Sensação de interrupção

2. O conceito de SPA 🔄

Single Page Application (SPA)

  • Aplicação de Página Única
  • O HTML é carregado uma única vez
  • Apenas os dados mudam

Por que SPA? 🤔

  • Experiência de Aplicativo Nativo
  • Fluidez na navegação
  • Menos carga no servidor (envia apenas JSON)

SPA vs MPA 📊

graph LR
    A[MPA] --> B[Recarrega Tudo]
    C[SPA] --> D[Atualiza Peças]

3. Ecossistema JavaScript 📦

Node.js 🟢

  • Motor JavaScript V8 fora do navegador
  • Essencial para ferramentas de desenvolvimento

Gerenciadores de Pacote 📦

  • NPM: O padrão
  • Yarn: Alternativa rápida
  • Servem para instalar bibliotecas (como o React!)

Vite ⚡

  • A ferramenta de build da nova geração
  • Ultra rápido
  • Substituiu o antigo Create React App

4. Introdução ao React ⚛️

O que é React?

  • Biblioteca JavaScript criada pelo Facebook
  • Focada em Interfaces de Usuário (UI)
  • Declarativa e Baseada em Componentes

Pensando em Componentes 🧱

  • Imagine a interface como peças de LEGO
  • Cabeçalho, Botão, Card, Rodapé...
  • Cada um é um componente independente

O Virtual DOM 🧠

  • O segredo da performance
  • O React cria uma cópia da interface na memória
  • Atualiza apenas o que mudou no DOM Real

5. Mão na Massa! 💻

Criando com Vite 🛠️

npm create vite@latest

Scripts Principais 📜

  • npm install: Instala as peças
  • npm run dev: Inicia o laboratório
  • npm run build: Prepara para o mundo

Estrutura de Pastas 📂

  • node_modules: Onde as peças moram
  • src: Seu código fonte
  • App.jsx: O coração da aplicação

Dica de Ouro! 💡

  • Abra sempre a pasta RAIZ do projeto no VS Code
  • Use o terminal integrado (Ctrl + `)

Fim da Aula 01 🎓

Próximo passo: Projeto Prático!