Learn ReactConfigurando um projeto React
Um app React precisa de um pouco de ferramental ao redor dele antes que qualquer código seja executado. Algo precisa transformar JSX em JavaScript que um navegador consiga executar, e algo precisa servir o resultado enquanto você trabalha nele. O Vite faz as duas coisas e cria um projeto funcional em cerca de trinta segundos. Este capítulo vai de uma pasta vazia até um app rodando, e depois rastreia o caminho que mais importa: como um componente acaba aparecendo na tela.
Criando um projeto
Vite é uma ferramenta de build com um gerador de projetos embutido. Execute-o com npm create, responda dois prompts e você terá 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 vem o próprio React. npm run dev inicia o servidor de desenvolvimento e imprime um endereço local, geralmente http://localhost:5173. Abra isso em um navegador e o app inicial está rodando.
A pasta gerada tem alguns arquivos que importam no início:
index.html: a página HTML única que o navegador carrega.src/main.jsx: o ponto de entrada, onde React se liga a essa página.src/App.jsx: seu componente de nível superior, 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 tempo.
Como as peças se conectam
Três arquivos se entregam um ao outro em linha reta. Comece por index.html, que é propositalmente quase vazio:
<body>
<div id="root"></div>
<!-- followed by a <script type="module" src="/src/main.jsx"> tag -->
</body>Aquele <div id="root"> vazio é o lugar na página onde React é autorizado a preencher. Tudo que seu app renderiza vai dentro dele. A tag <script> do módulo abaixo carrega main.jsx, que é onde React assume:
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 da direita para a esquerda. document.getElementById('root') encontra a div vazia. createRoot a envolve em uma raiz React, ou seja, React agora é dono do conteúdo desse elemento e vai mantê-lo sincronizado com seus componentes. .render(...) diz a ele o que colocar lá: o componente App.
<StrictMode> é um wrapper apenas para desenvolvimento que executa verificações extras em tudo dentro dele e avisa sobre padrões que costumam causar bugs. Não adiciona nada à página e se desativa em um build de produção. Seu efeito mais visível aparece em Effects, onde deliberadamente monta cada componente duas vezes durante o desenvolvimento.
App.jsx é um componente comum que se exporta:
export default function App() {
return <h1>Hello from React</h1>
}Essa é toda a cadeia. 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 chega à página através desse mesmo caminho. main.jsx geralmente é escrito uma vez e raramente é tocado de novo; quase todo seu trabalho acontece em App.jsx e nos componentes que ele 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 a renderização concorrente, e deixou a chamada antiga funcionando com um aviso de descontinuaçã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 continua rodando no terminal enquanto você trabalha. Seu trabalho é servir seu 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 substitui no lugar, deixando o resto do app rodando. Um contador que você tinha clicado até sete geralmente ainda marca sete após a edição, então você mantém qualquer estado que tenha configurado enquanto ajusta o markup ao redor. Algumas mudanças ainda forçam um reload completo, e Vite decide isso por 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 enviar. Durante o desenvolvimento, npm run dev é o único que você precisa.
Importando ativos estáticos
Imagens ficam em 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 com a URL final daquela imagem, que você então passa a src entre chaves. Escrever src="./assets/logo.png" como uma string simples tende a quebrar, porque os caminhos na sua pasta de origem 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 qualquer URL em que aquele arquivo acabe. Mova seu componente para uma pasta diferente e o import relativo continua resolvendo. Digite errado o nome do arquivo e você fica sabendo 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 lidar.
O que vale a pena guardar é a cadeia: index.html tem uma div vazia com o id root, main.jsx pega aquela div com createRoot e renderiza <App /> nela, 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ê vai preencher aquele App.jsx com.