Seja bem-vindo ao ponto de partida da sua jornada como desenvolvedor Frontend moderno. Nesta aula do Geek Codes, você não vai apenas “copiar código”. Você vai entender como configurar o seu ambiente profissional e rodar o seu primeiro projeto utilizando as ferramentas que as grandes empresas (Big Techs) exigem.

1. O que você precisa antes de começar?

Antes de digitar qualquer comando, seu computador precisa do “motor” que executa o JavaScript fora do navegador: o Node.js.

1. Acesse o site oficial: nodejs.org.
2. Baixe a versão LTS (Long Term Support) — é a mais estável.
3. Após instalar, abra seu terminal (PowerShell, CMD ou Terminal do Mac) e digite:node -v e depois npm -v.Se aparecerem os números das versões, você está pronto!

---

2. Iniciando o Projeto pelo Terminal

Não crie pastas manualmente. Vamos deixar o Vite (o novo padrão de mercado) estruturar tudo para nós.

Passo a passo no Terminal:

1. Navegue até a pasta onde deseja salvar seus projetos (ex: cd Documents/Projetos).
2. Digite o comando de criação: npm create vite@latest meu-primeiro-app -- --template react
3. O terminal vai perguntar algumas coisas. Use as setas do teclado:
   • Select a framework: React
   • Select a variant: JavaScript (ou TypeScript, se quiser o desafio do Rust de memória segura que vimos antes!)
4. Entre na pasta criada: cd meu-primeiro-app
5. Instale as dependências (as bibliotecas que o React precisa): npm install
6. Abra o VS Code diretamente por lá: code .

---

3. Estrutura de Código (O seu Teste)

Agora que o VS Code abriu, vá até a pasta src e abra o arquivo App.jsx. Vamos apagar o que está lá e criar um sistema de Contador Inteligente para testar se tudo está funcionando.

Copie e cole este código no seu App.jsx:

JavaScript

import { useState } from 'react'
import './App.css'

function App() {
  // O useState é um "Gancho" (Hook) do React para gerenciar memória/estado
  const [contador, setContador] = useState(0);

  return (
    <div className="container-aula">
      <header>
        <h1>Geek Codes: React Masterclass 🦀</h1>
        <p>Bem-vindo à nova era do desenvolvimento web.</p>
      </header>

      <main className="card">
        <h2>Contador de Cliques</h2>
        <p className="numero">{contador}</p>
        
        <div className="botoes">
          <button onClick={() => setContador(contador + 1)}>
            Incrementar +
          </button>
          
          <button onClick={() => setContador(contador - 1)}>
            Decrementar -
          </button>

          <button className="reset" onClick={() => setContador(0)}>
            Resetar
          </button>
        </div>
      </main>

      <footer>
        <p>Pratique este código e suba o nível no fórum do Geek Codes!</p>
      </footer>
    </div>
  )
}

export default App

---

4. Estilização (CSS) para ficar Profissional

Abra o arquivo App.css e substitua o conteúdo para deixar o visual com a cara do portal:

CSS

.container-aula {
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #0d1117;
  color: #ffffff;
}

.card {
  background: #161b22;
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid #30363d;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.numero {
  font-size: 4rem;
  font-weight: bold;
  color: #58a6ff;
  margin: 1rem 0;
}

button {
  padding: 0.8rem 1.5rem;
  margin: 5px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

button:hover {
  filter: brightness(1.2);
}

.reset {
  background-color: #f85149;
}

---

5. Rodando o Projeto

Volte ao terminal do VS Code (Ctrl + ') e digite:

npm run dev

O Vite vai te dar um link (ex: http://localhost:5173). Clique com o Ctrl apertado e veja a mágica acontecer no navegador!

---

Resumo dos Comandos Essenciais

Comando	O que ele faz?
npm create vite@latest	Cria o esqueleto do projeto.
npm install	Baixa as ferramentas necessárias (node_modules).
npm run dev	Inicia o servidor local para você ver o site.
npm run build	Prepara o site para ser publicado na internet.

---

🎯 Desafio Geek Codes

Tente mudar a lógica para que o contador não possa ser menor que zero. Consegue? Poste sua solução no nosso fórum e ganhe o emblema Mestre do Código!