Instalar o React: crie um app React com Vite

Para instalar o React, crie um novo projeto com Vite: rode npm create vite@latest my-app -- --template react, depois cd my-app, npm install e npm run dev. Você precisa ter o Node.js instalado antes. O Vite configura o React, a compilação do JSX e um servidor de desenvolvimento que recarrega a página quando você salva.

Você não precisa de nada disso para começar a aprender. O editor abaixo roda o React nesta página; ele é uma versão simplificada do arquivo App.jsx que o Vite gera para você.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <div style={{ textAlign: 'center' }}>
            <h1>Get started</h1>
            <p>
                Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
            </p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
                Count is {count}
            </button>
        </div>
    );
}

Clique no botão e depois mude o texto do título: a prévia atualiza enquanto você digita, do mesmo jeito que o servidor de desenvolvimento do Vite aplica suas mudanças sem recarregar a página (é isso que significa "HMR", hot module replacement).

Pré-requisitos: Node.js

As ferramentas que fazem o build de um app React rodam no Node.js, e o npm (o gerenciador de pacotes dele) vem junto. Instale a versão LTS atual pelo site do Node.js ou com um gerenciador de versões como o nvm, e depois confira em um terminal:

node -v
npm -v

Os dois comandos devem imprimir um número de versão. Se node -v mostrar uma versão antiga, atualize: o Vite 8 precisa do Node.js 20.19 ou mais recente (22.12 ou mais recente na linha 22) e mostra um aviso em versões mais antigas.

Criar um app React com Vite

Rode estes quatro comandos na pasta onde você guarda seus projetos:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

• npm create vite@latest baixa o gerador de projetos mais recente. my-app é o nome da pasta, e --template react escolhe React puro com JavaScript. O -- extra repassa a opção de template pelo npm até o gerador.
• npm install baixa React, React DOM, Vite e as outras dependências listadas no package.json para dentro de node_modules.
• npm run dev inicia o servidor de desenvolvimento e mostra um endereço local, normalmente http://localhost:5173. Abra-o em um navegador.

Em seguida o gerador faz duas perguntas: qual linter configurar (Oxlint ou ESLint) e se deve instalar e iniciar o app agora. Se você responder sim à segunda, ele roda npm install e npm run dev por você, e você pode pular os dois últimos comandos. Para TypeScript, use --template react-ts; veja React com TypeScript.

Os arquivos que o Vite cria

my-app/
├── index.html
├── package.json
├── vite.config.js
├── README.md
├── public/
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    └── assets/

Três deles são os mais importantes:

index.html é a página que o navegador carrega. O body tem um único elemento vazio, <div id="root"></div>, e uma tag script que carrega src/main.jsx. O React desenha o app inteiro dentro dessa div.

src/main.jsx é o ponto de entrada. Ele conecta o React à página:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

createRoot pega o elemento #root e deixa o React responsável por tudo dentro dele. render(<App />) desenha ali o seu componente principal. StrictMode é um auxiliar de desenvolvimento que roda algumas verificações extras; ele não tem efeito no build de produção (veja Strict Mode). Raramente você precisa editar esse arquivo.

src/App.jsx é o seu primeiro componente e o arquivo que você edita. A versão do Vite importa três imagens (uma imagem de destaque e os logos do Vite e do React) e o App.css, e termina com export default App. Isso é o mesmo que escrever export default function App() no topo, que é a forma usada nos exemplos destas páginas.

Faça sua primeira edição

Abra src/App.jsx, apague o que estiver lá e substitua pelo seu próprio componente. Salve, e o navegador atualiza. Aqui está um pequeno primeiro app para digitar; teste aqui antes:

import { useState } from 'react';

function Greeting({ name }) {
    return <h2>Hello, {name}!</h2>;
}

export default function App() {
    const [name, setName] = useState('React');

    return (
        <div>
            <Greeting name={name} />
            <label>
                Your name:{' '}
                <input value={name} onChange={(e) => setName(e.target.value)} />
            </label>
        </div>
    );
}

Digite na caixa e o título acompanha. Depois adicione um segundo <Greeting name="Vite" /> abaixo do primeiro: componentes são reutilizáveis, e cada cópia recebe o próprio name.

Quando o App.jsx crescer, mova os componentes para arquivos próprios, como src/Greeting.jsx, exporte-os e importe-os onde forem usados. A página de componentes mostra como.

Build para produção

O servidor de desenvolvimento serve para trabalhar no seu código. Quando estiver pronto para publicar, faça o build do app:

npm run build
npm run preview

npm run build compila o JSX, empacota e minifica o seu código e grava arquivos estáticos em uma pasta dist/. npm run preview serve essa pasta localmente para você conferir o build real. Envie dist/ para qualquer hospedagem estática. No build o React também passa para o modo de produção, que é mais rápido e pula os avisos de desenvolvimento.

O Create React App foi descontinuado

Durante anos o jeito padrão de começar foi npx create-react-app my-app. Em fevereiro de 2025 a equipe do React descontinuou o Create React App, e ele não recebe mais manutenção. Muitos tutoriais antigos ainda o usam, então você vai ver neles react-scripts start e um arquivo de entrada src/index.js; os componentes em si funcionam igual em um projeto Vite.

O que usar no lugar:

• Vite para um app client-side, um projeto de estudo ou um widget: a configuração acima.
• Um framework quando você precisa de roteamento, renderização no servidor ou carregamento de dados embutidos. Next.js e o modo framework do React Router são as escolhas comuns:

npx create-next-app@latest my-app
npx create-react-router@latest my-app

Para migrar um projeto Create React App existente para o Vite, os passos principais são: instalar vite e @vitejs/plugin-react e remover react-scripts; adicionar um vite.config.js que carregue o plugin do React; mover o index.html de public/ para a raiz do projeto, tirar os placeholders %PUBLIC_URL% e adicionar uma tag <script type="module" src="/src/index.jsx"> para o seu arquivo de entrada; renomear para .jsx os arquivos que contêm JSX; renomear as variáveis de ambiente REACT_APP_ para VITE_ e lê-las de import.meta.env; e substituir os comandos react-scripts do package.json por vite, vite build e vite preview.

Adicionar o React a uma página existente

O React não precisa controlar a página inteira. Você pode renderizá-lo em um único elemento de um site existente, como um widget de carrinho em uma loja renderizada no servidor. Você ainda precisa de um bundler como o Vite para compilar o JSX. Instale os dois pacotes:

npm install react react-dom

Depois crie uma raiz no elemento que você quer que o React controle:

import { createRoot } from 'react-dom/client';
import Cart from './Cart.jsx';

const container = document.getElementById('cart');
createRoot(container).render(<Cart />);

Tudo fora de #cart continua como estava. Você pode criar várias raízes em uma página, uma por elemento, e cada uma roda de forma independente.