🎯 Objetivos da Lição

Ao final desta aula, o aluno será capaz de:

Entender o conceito de SPA (Single Page Application)
Compreender por que frameworks modernos utilizam SPA
Criar um projeto React utilizando Vite
Entender a estrutura básica de um projeto React
Criar componentes reutilizáveis
Importar e utilizar componentes
Renderizar um menu inicial funcional
Entender como React constrói interfaces modernas

📖 Parte 1 – O que é SPA

🔹 SPA = Single Page Application

Uma SPA (Single Page Application) é um tipo de aplicação web que funciona utilizando apenas um único arquivo HTML principal.

Todo o restante da interface é atualizado dinamicamente usando JavaScript.

Isso significa que:

✔ A página não é recarregada completamente
✔ Apenas partes da interface são atualizadas
✔ A navegação é mais rápida e fluida

🔹 Como funcionavam os sites tradicionais

Antes das SPAs, os sites funcionavam assim:

Usuário acessa:

site.com/home

O servidor retorna um HTML completo.

Quando o usuário clica em outro link:

site.com/produtos

O navegador:

faz nova requisição ao servidor
baixa outro HTML completo
recarrega toda a página

Esse processo causa:

recarregamentos constantes
perda de estado
navegação menos fluida

🔹 Como funciona uma SPA

Em uma SPA:

1️⃣ O navegador carrega um único HTML inicial

index.html

2️⃣ O JavaScript assume o controle da interface

3️⃣ Apenas partes da página são atualizadas dinamicamente.

Exemplo:

[Menu]  permanece na tela
[Conteúdo] muda dinamicamente

🔹 Benefícios das SPAs

✔ Navegação mais rápida
✔ Melhor experiência do usuário
✔ Aplicações mais complexas possíveis
✔ Atualização parcial da interface
✔ Melhor integração com APIs

🔹 React e SPA

O React é uma biblioteca criada por Meta Platforms.

Ele foi projetado para:

construir interfaces complexas
organizar código em componentes
atualizar apenas partes necessárias da tela

React usa um conceito chamado Virtual DOM para tornar atualizações muito eficientes.

⚙ Parte 2 – Criando Projeto com Vite

🔹 O que é Vite

Vite é uma ferramenta moderna para criação de projetos frontend.

Ele substitui ferramentas antigas como:

Webpack
Parcel
Create React App

🔹 Vantagens do Vite

✔ Inicialização extremamente rápida
✔ Atualização instantânea no navegador
✔ Configuração mínima
✔ Melhor experiência de desenvolvimento

📌 Criando um projeto React com Vite

Abra o terminal e execute:

npm create vite@latest nome-do-projeto

Exemplo:

npm create vite@latest meu-jogo

Escolhas durante criação

O terminal perguntará:

Framework:

React

Variante:

JavaScript

Entrar na pasta do projeto

cd nome-do-projeto

Instalar dependências

npm install

Isso instala todos os pacotes necessários.

Iniciar servidor de desenvolvimento

npm run dev

O terminal mostrará algo como:

Local: http://localhost:5173

Abra esse endereço no navegador.

📁 Parte 3 – Estrutura de Projeto

Estrutura típica:

/nome-do-projeto
│
├ public/
│
├ src/
│   ├ assets/
│   ├ App.jsx
│   ├ main.jsx
│   └ index.css
│
├ package.json
└ vite.config.js

📌 Arquivos importantes

main.jsx

É o ponto inicial da aplicação.

Responsável por montar o React dentro do HTML.

Exemplo simplificado:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";ReactDOM.createRoot(document.getElementById("root")).render(
  <App />
);

Aqui o React diz:

Renderize o componente App dentro da div root.

App.jsx

É o componente principal da aplicação.

Ele funciona como a base da interface.

index.css

Contém estilos globais aplicados ao projeto.

public/

Contém arquivos públicos como:

imagens
ícones
favicon

🧩 Parte 4 – Componentes

O conceito mais importante do React é o componente.

Um componente é:

Um bloco reutilizável de interface.

Exemplo simples

function Titulo() {
  return <h1>Meu Jogo</h1>;
}

Esse componente pode ser reutilizado várias vezes.

Forma moderna usando Arrow Function

const Titulo = () => {
  return <h1>Meu Jogo</h1>;
};

Essa é a forma mais comum em projetos React modernos.

Regras importantes de componentes

✔ nome deve começar com letra maiúscula
✔ sempre retorna JSX
✔ pode receber props
✔ pode ter estado

📦 JSX – HTML dentro do JavaScript

React usa uma sintaxe chamada JSX.

JSX permite escrever algo parecido com HTML dentro do JavaScript.

Exemplo:

const titulo = <h1>Meu Jogo</h1>;

Mas na verdade isso é convertido para JavaScript.

🎯 Atividade Prática

Vamos criar um Menu Inicial de Jogo.

📌 Passo 1 – Criar Projeto React

✔ criar projeto com Vite
✔ rodar servidor
✔ abrir no navegador

📌 Passo 2 – Criar pasta de componentes

Dentro de src criar:

src/components

Organizar componentes em pastas é boa prática.

📌 Passo 3 – Criar componente MenuInicial

Criar arquivo:

src/components/MenuInicial.jsx

🧠 Código do Componente

const MenuInicial = () => {
  return (
    <div style={containerStyle}>
      <h1>Meu Jogo Phaser + React</h1>      <div style={buttonContainer}>
        <button>Iniciar</button>
        <button>Opções</button>
        <button>Créditos</button>
      </div>
    </div>
  );
};

Estilos do componente

const containerStyle = {
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  alignItems: "center",
  height: "100vh",
  backgroundColor: "#111",
  color: "white",
  textAlign: "center"
};const buttonContainer = {
  display: "flex",
  flexDirection: "column",
  gap: "15px",
  marginTop: "20px"
};

Exportando componente

export default MenuInicial;

Isso permite usar o componente em outros arquivos.

📌 Passo 4 – Usar no App.jsx

Editar:

src/App.jsx

import MenuInicial from "./components/MenuInicial";function App() {
  return <MenuInicial />;
}export default App;

🧪 Resultado esperado

A aplicação deverá mostrar:

Meu Jogo Phaser + React[ Iniciar ]
[ Opções ]
[ Créditos ]

✔ interface centralizada
✔ layout ocupando toda tela
✔ sem recarregar página
✔ funcionamento como SPA

🧠 Conceitos fixados

Após essa atividade o aluno terá aprendido:

conceito de SPA
criação de projeto React
uso do Vite
estrutura de projeto React
criação de componentes
exportação de componentes
importação de componentes
JSX
renderização da interface

📝 Critérios de Avaliação

Critério	Peso
Projeto criado corretamente	2
Estrutura organizada	2
Componente funcional	2
Renderização correta	2
Organização e boas práticas	2

Total: 10 pontos

🚀 Desafio Extra

Melhorias para o projeto.

1️⃣ Criar componente Botao

components/Botao.jsx

2️⃣ Usar CSS ao invés de style inline

Criar:

MenuInicial.css

3️⃣ Adicionar efeito hover

button:hover {
  background: #444;
}

4️⃣ Adicionar evento onClick

<button onClick={() => alert("Iniciar jogo")}>
  Iniciar
</button>

🎓 Conclusão

Neste ponto o aluno deixa de trabalhar com:

JavaScript manipulando o DOM diretamente

e passa a trabalhar com um modelo moderno:

Interfaces declarativas baseadas em componentes

Em vez de dizer:

“Altere este elemento do DOM”

O desenvolvedor descreve:

“Esta é a interface que quero”

E o React se encarrega de atualizar a tela.

📌 Na próxima lição é recomendado ensinar:

1️⃣ useState (estado em React)
2️⃣ Eventos e interatividade
3️⃣ Props (comunicação entre componentes)
4️⃣ Renderização condicional