#2 - Configurando um projeto React com Vite

Para começar a desenvolver com React, você precisa configurar um projeto. E já que estamos nisso: a própria documentação do React recomenda o uso de frameworks como Next.js, Remix ou Gatsby. Mas calma — isso não significa que você precisa de um framework para usar React.

Nesse momento vamos usar o Vite que é uma ferramenta de build e ambiente de desenvolvimentor para aplicações web. Mas vamos entender por que estamos escolhendo o Vite.

Vite não é um framework

A documentação oficial do React recomenda frameworks para projetos de produção. Mas quando o objetivo é aprender React, praticar componentes e entender como a biblioteca funciona, um framework adiciona camadas que você ainda não precisa.

O Vite é um bundler moderno, rápido e sem frescura. Ele cria um ambiente de desenvolvimento pronto, sem exigir configurações complexas. Para estudar e criar projetos do zero, é a escolha certa. E apesar de brilhar no desenvolvimento, o Vite também é capaz de gerar builds otimizados para produção — usando o Rollup internamente, ele entrega bundles enxutos e performáticos quando você estiver pronto para publicar sua aplicação.

💡 Se alguém te perguntar “preciso do Next.js para usar React?”, a resposta é não. Next.js é uma camada a mais em cima do React. Vite te dá React puro, o que é ótimo para aprender e para projetos simples.

Criando o projeto

Abra o terminal e rode um dos comandos abaixo:

Com npm:

npm create vite@latest nome-do-projeto -- --template react

Com yarn:

yarn create vite nome-do-projeto --template react

Substitua nome-do-projeto pelo nome que quiser. O Vite vai criar a pasta com tudo configurado.

Depois de criar, entre na pasta e instale as dependências:

cd nome-do-projeto
npm install
npm run dev

Pronto. Seu projeto React está rodando no navegador em http://localhost:5173. 🎉

O que foi criado? Entendendo as pastas

Quando você abre o projeto no editor, vai ver algo assim:

nome-do-projeto/
├── public/
├── src/
│   ├── assets/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
└── vite.config.js

O que cada parte faz:

• public/ — arquivos estáticos que vão direto para o servidor sem passar pelo Vite (favicons, imagens que não mudam)

• src/ — é aqui que você vai trabalhar. Todo o código React fica nessa pasta

• src/main.jsx — o ponto de entrada do app: onde o React é “ligado” e montado na página

• src/App.jsx — o componente principal, ponto de partida da sua interface

• index.html — o HTML base da aplicação. Tem um <div id="root"> — é onde o React injeta tudo

• package.json — lista as dependências e scripts do projeto

• vite.config.js — configuração do Vite (raramente precisa mexer no início)

O main.jsx de perto

Vale dar uma olhada no main.jsx porque ele mostra na prática como o React funciona:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

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

Traduzindo em português: o React pega o elemento com id root que está lá no index.html e renderiza o componente <App /> dentro dele. Tudo que aparecer na tela vai partir desse App.

Como organizar as pastas conforme o projeto cresce

O Vite entrega uma estrutura mínima. À medida que o projeto cresce, vale organizar melhor o src/. Uma divisão simples e comum no mercado:

src/
├── components/   → componentes reutilizáveis (botão, card, header...)
├── pages/        → telas e páginas da aplicação
├── assets/       → imagens, ícones, fontes
├── styles/       → arquivos CSS globais
└── App.jsx

💡 Não existe uma estrutura “certa” obrigatória — mas essa divisão já funciona bem para a maioria dos projetos iniciantes e é o que você vai ver bastante no mercado.