🚀 Capítulo 01: O Despertar do React
🎯 Objetivo da Aula
Ao final desta aula, você entenderá o que é o React, por que ele é tão utilizado, e terá criado o seu primeiro projeto usando a ferramenta moderna Vite.
🏢 O Cenário Prático (Seu Desafio)
Você acaba de ser recrutado pela Aliança Rebelde! O antigo sistema de comunicação do império é lento e pesado. Seu desafio é usar o React para criar uma interface ultra-rápida que ajude os rebeldes a se comunicarem pela galáxia.
🧠 Fundamentos: A Teoria Traduzida
O React é uma biblioteca JavaScript para criar interfaces de usuário (UIs). Ele foi criado pelo Facebook e hoje é a ferramenta mais popular do mundo para isso.
Por que usar o React?
- Componentes: Você divide a tela em pedacinhos (como peças de Lego) e foca em construir uma de cada vez.
- Virtual DOM: O React é muito rápido porque ele não atualiza a tela inteira quando algo muda. Ele calcula a diferença e atualiza só o que precisa.
- Declarativo: Você diz como a tela deve parecer baseado nos dados, e o React se vira para desenhar.
📖 Exemplo Guiado: Criando o Projeto com Vite
O Vite é a ferramenta moderna mais rápida para criar projetos React.
🛠️ Passo a Passo
- Abra o terminal na pasta onde quer guardar o projeto.
- Digite o comando:
npx create-vite@latest alianca-rebelde --template react - O Vite criará uma pasta chamada
alianca-rebelde. - Entre na pasta e instale as dependências (pode demorar um pouco):
cd alianca-rebelde npm install - Rode o projeto:
npm run dev - Abra o link que aparecer no terminal (geralmente
http://localhost:5173).
🛠️ Prática Obrigatória 1
Abra o arquivo src/App.jsx do seu novo projeto, apague o conteúdo e coloque um título <h1> escrito: “Base Rebelde de Coruscant”.
🛠️ Prática Obrigatória 2
Adicione um parágrafo abaixo do título dizendo: “Que a Força esteja com você!“.
🔑 Gabarito de Código/Fórmulas
Prática 1 e 2:
No arquivo src/App.jsx:
function App() {
return (
<div>
<h1>Base Rebelde de Coruscant</h1>
<p>Que a Força esteja com você!</p>
</div>
)
}
export default App