A tua primeira app React com Vite

Vou mostrar-te: configurar o projeto

Vite (pronuncia-se «veet», francês para «rápido») é uma ferramenta que prepara um esqueleto de projeto React pronto para ti. Abre o terminal e vai para onde queres que o projeto viva (como o Ambiente de trabalho):

cd Desktop
npm create vite@latest my-react-web -- --template react

O Vite pode perguntar algo – confirma com Enter. Depois:

cd my-react-web
npm install
npm run dev -- --port 3901

npm install descarrega tudo o que o projeto precisa (demora um momento – React e ajudantes vão para a pasta node_modules).
npm run dev -- --port 3901 inicia o servidor de desenvolvimento. O terminal mostra o endereço http://localhost:3901. Abre-o no browser.

Vês um logótipo a girar e o título «Vite + React»? Parabéns – a tua primeira app React está a correr! 🎉

💡

O que é localhost? Um «servidor» que corre só no teu computador. Só tu o vês – é o teu campo de testes privado. E o melhor: quando mudas o código e guardas, a página atualiza-se sozinha de imediato. Chega de F5 sem fim!

Uma visita ao projeto

Abre a pasta my-react-web no VS Code (File → Open Folder). Parecem muitos ficheiros, mas só três importam agora:

Ficheiro	O que é
`index.html`	o único HTML de todo o site – quase vazio, só um `<div id="root">`
`src/main.jsx`	o arranque: pega na app e insere-a nesse div
`src/App.jsx`	o componente principal – é aqui que vais escrever código
`src/App.css`	estilos – CSS normal, como já conheces

Ignora o resto por agora (nunca abras nem apagues node_modules, package.json é a lista de pacotes do projeto).

A tua primeira alteração ao código

Abre src/App.jsx. Apaga tudo e escreve:

function App() {
  const name = "Jake";

  return (
    <div>
      <h1>Hi, this is {name}!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

Guarda – e a página no browser mudou sozinha. Eis o que estás a ver:

O componente App é uma função que devolve HTML (esta notação chama-se JSX).
{name} – chavetas inserem JavaScript no HTML. Qualquer coisa: uma variável, um cálculo {2 + 3}, até uma condição.
export default App – «ofereço este componente a outros ficheiros» (main.jsx é quem o recebe).

O JSX tem duas peculiaridades a que te habituas: em vez de class, escreves className (class é palavra reservada em JavaScript), e um componente tem de devolver um elemento envolvente (por isso há um <div> à volta de tudo).

Agora és tu 💪

Configura o projeto seguindo o guia e põe-o a correr.
Edita App.jsx: um título com o teu nome, um parágrafo sobre o que estás a construir e uma variável age que mostras na frase I am {age} years old.
Apaga de propósito uma etiqueta de fecho e vê como é o erro – o Vite mostra-o no browser, com número de linha. Depois corrige.
Para o servidor (Ctrl+C no terminal) e inicia outra vez (npm run dev -- --port 3901) – para teres o ciclo completo na ponta dos dedos.

✅

Verifica tu: O projeto corre em localhost, consegues parar e iniciar, e quando editas App.jsx e guardas, o browser redesenha-se. O ciclo do programador está a girar!

O que ficas a saber desta lição

npm create vite@latest configura um projeto, npm install descarrega pacotes, npm run dev inicia localhost.
Escreves código em src/App.jsx: um componente é uma função que devolve JSX, {} insere JavaScript no HTML.
Em JSX: className em vez de class, sempre um elemento envolvente.

Esta lição faz parte de um nível pago

Vou mostrar-te: configurar o projeto

Uma visita ao projeto

A tua primeira alteração ao código

Agora és tu 💪

O que ficas a saber desta lição