Configurando um projeto React
Uma aplicação React precisa de um pouco de ferramental antes de qualquer código executar. Algo precisa transformar JSX em JavaScript que o navegador consiga executar, e algo precisa servir o resultado enquanto você trabalha nele. Vite faz os dois, e monta um projeto funcional em cerca de trinta segundos. Este capítulo te leva de uma pasta vazia a uma aplicação rodando, e depois rastreia o caminho que mais importa: como um componente acaba na tela.
Criando um projeto
Vite é uma ferramenta de build com um gerador de projetos integrado. Execute com npm create, responda duas perguntas, e você tem um projeto:
npm create vite@latest my-react-app
cd my-react-app
npm install
npm run devO primeiro comando pergunta qual framework você quer (escolha React) e qual variante (escolha JavaScript, ou TypeScript se estiver usando). Ele cria uma pasta chamada my-react-app com tudo que um projeto React precisa. npm install baixa as dependências listadas em package.json, de onde o próprio React vem. npm run dev inicia o servidor de desenvolvimento e imprime um endereço local, geralmente http://localhost:5173. Abra isso em um navegador e a aplicação inicial está rodando.
A pasta gerada tem um punhado de arquivos que importam cedo:
index.html: a página HTML única que o navegador carrega.src/main.jsx: o ponto de entrada, onde React se prende a essa página.src/App.jsx: seu componente de topo, e o arquivo que você vai editar primeiro.src/assets/: imagens e outros arquivos estáticos que você importa em componentes.package.json: dependências e os scriptsdev,buildepreview.vite.config.js: configuração de build, que você pode deixar de lado por um bom tempo.
Como as peças se conectam
Três arquivos se passam um ao outro em linha reta. Comece em index.html, que é propositalmente quase vazio:
<body>
<div id="root"></div>
<!-- seguido por uma tag <script type="module" src="/src/main.jsx"> -->
</body>Aquela <div id="root"> vazia é o lugar na página que React tem permissão de preencher. Tudo que sua app renderiza cai dentro dela. A tag <script> de módulo abaixo dela carrega main.jsx, que é onde React assume o controle:
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
)Leia essa chamada de trás para frente. document.getElementById('root') encontra a div vazia. createRoot a envolve em uma raiz React, significando que React agora é dono do conteúdo daquele elemento e vai mantê-lo sincronizado com seus componentes. .render(...) diz a ela o que colocar lá: o componente App.
<StrictMode> é um envoltório apenas para desenvolvimento que executa verificações extras em tudo dentro dele e avisa sobre padrões que provavelmente causarão bugs. Não adiciona nada à página e desliga a si mesmo em um build de produção. Seu efeito mais visível aparece em Effects, onde propositalmente monta cada componente duas vezes durante o desenvolvimento.
App.jsx é um componente ordinário que se exporta:
export default function App() {
return <h1>Hello from React</h1>
}Essa é a cadeia toda. O navegador carrega index.html, o script carrega main.jsx, main.jsx chama createRoot na div root e renderiza <App />, e App retorna o JSX que vira o heading que você vê. Todo componente que você escrever daqui em diante fica em algum lugar dentro de App, então alcança a página através desse mesmo caminho. main.jsx é geralmente escrito uma vez e raramente tocado novamente; quase todo seu trabalho acontece em App.jsx e nos componentes que ela puxa.
Nota de versão
React 17 e anteriores usavam ReactDOM.render(<App />, document.getElementById('root')) como ponto de entrada. React 18 introduziu createRoot, que é o que liga rendering concorrente, e deixou a chamada antiga funcionando com um aviso de deprecação. React 19 removeu, então ReactDOM.render agora lança um erro. Em um tutorial que ainda usa, createRoot é a linha para escrever no seu lugar. Veja History and versions para o que mudou.
O servidor de desenvolvimento
npm run dev inicia o servidor de desenvolvimento do Vite, e ele fica rodando no terminal enquanto você trabalha. O trabalho dele é servir sua app e reagir às suas edições.
Salve uma mudança em App.jsx e o navegador atualiza quase imediatamente, sem um refresh manual. Isso é hot module replacement: Vite empurra o módulo alterado para a página e o troca no lugar, deixando o resto da app rodando. Um contador que você teria clicado até sete geralmente ainda lê sete depois da edição, então você mantém o estado que tinha configurado enquanto ajusta a marcação ao redor. Algumas mudanças ainda forçam um reload completo, e Vite decide isso para você.
Dois outros scripts vêm com o projeto. npm run build produz um bundle otimizado em uma pasta dist, que é o que você faz deploy. npm run preview serve esse output construído localmente para você verificar antes de lançar. Durante o desenvolvimento, npm run dev é o único que você precisa.
Importando ativos estáticos
Imagens vivem sob src/assets e entram em um componente através de um import:
import logo from './assets/logo.png'
export default function Header() {
return <img src={logo} alt="Company logo" />
}O import te dá uma variável segurando a URL final daquela imagem, que você então passa para src entre chaves. Escrever src="./assets/logo.png" como uma string simples tende a quebrar, porque os caminhos na sua pasta source raramente são os caminhos no output construído.
Importar o arquivo em vez disso coloca a ferramenta de build no loop. Ela vê que seu código depende de logo.png, copia para o output, e te devolve de volta qualquer URL que aquele arquivo acaba sendo. Mova seu componente para uma pasta diferente e o import relativo ainda resolve. Misepe o nome do arquivo e você descobre imediatamente, porque o import falha, em vez de descobrir uma imagem quebrada em produção. O mesmo padrão funciona para SVGs, fontes e qualquer outro arquivo que a ferramenta de build saiba como lidar.
index.html tem uma div vazia com o id root, main.jsx agarra aquela div com createRoot e renderiza <App /> dentro dela, e App.jsx é o componente que diz o que aparece. Uma vez que você consegue seguir aquele caminho, você sabe exatamente onde seu próprio código se encaixa. Próximo: Components, os blocos de construção que você preencherá aquele App.jsx com.