af aprenda frontend
módulo 06 componentes

Configurando o projeto React com Vite.

Vite com template React + TS, estrutura de pastas, npm run dev. A primeira página renderizada.

Projetos React modernos usam Vite como ferramenta de build. Vite usa esbuild para transpilação — o servidor de desenvolvimento inicia em milissegundos e o HMR (hot module replacement) aplica mudanças no browser sem recarregar a página. O template react-ts configura React, TypeScript e Vite juntos com um único comando.

Criando o projeto com Vite

bash 
# criar o projeto com template React + TypeScript
npm create vite@latest blog-react -- --template react-ts

# entrar na pasta, instalar dependências e rodar
cd blog-react
npm install
npm run dev
# servidor em http://localhost:5173
Criar o projeto — um comando, tudo configurado.

O Vite gera a estrutura inicial e o browser mostra um contador de cliques — a aplicação React funcionando. O HMR está ativo: salvar qualquer arquivo atualiza o browser em tempo real, sem recarregar.

A estrutura de arquivos

O template react-ts gera:

bash 
blog-react/
├── public/               # arquivos estáticos — servidos diretamente
│   └── vite.svg
├── src/
│   ├── assets/           # imagens e fontes importadas pelo bundler
│   ├── App.tsx           # componente raiz
│   ├── App.css           # estilos do App
│   ├── main.tsx          # ponto de entrada — monta a aplicação
│   ├── index.css         # estilos globais
│   └── vite-env.d.ts     # declarações de tipo do Vite
├── index.html            # template HTML com <div id="root">
├── tsconfig.json         # configuração do TypeScript
├── tsconfig.node.json    # tsconfig para o vite.config.ts
└── vite.config.ts        # configuração do Vite
Estrutura inicial gerada pelo Vite.

Para o blog, a estrutura proposta é um pouco mais organizada:

bash 
src/
├── components/           # componentes reutilizáveis
│   ├── ArticleCard.tsx
│   ├── ArticleList.tsx
│   ├── Header.tsx
│   ├── Footer.tsx
│   ├── LikeButton.tsx
│   └── ThemeToggle.tsx
├── context/              # providers de contexto
│   └── TemaContext.tsx
├── hooks/                # custom hooks
│   ├── useArtigos.ts
│   └── useCurtidas.ts
├── types/                # interfaces TypeScript
│   └── index.ts
├── App.tsx
├── main.tsx
└── index.css
Estrutura do blog — organização por responsabilidade.
bash 
public/
└── artigos.json          # dados do blog — acessados via fetch('/artigos.json')
public/ — arquivos servidos diretamente.

artigos.json vai em public/ (não em src/) porque o fetch("/artigos.json") acessa o arquivo via URL HTTP — e arquivos em public/ são servidos diretamente pelo servidor Vite em desenvolvimento e pelo servidor de produção depois.

index.html e o ponto de montagem

O Vite usa index.html como ponto de entrada, não como template gerado — é o HTML real que o browser recebe:

html 
<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blog React</title>
  </head>
  <body>
    <!-- React monta a aplicação aqui -->
    <div id="root"></div>
    <!-- Vite injeta o script correto na compilação -->
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
index.html — o único arquivo HTML da aplicação.

main.tsx — montando a aplicação

main.tsx é o ponto de entrada do JavaScript. Ele pega o elemento #root do HTML e monta o componente App dentro dele:

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

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);
main.tsx — createRoot monta o componente raiz.

createRoot cria o raiz do React no elemento DOM especificado. render monta o componente App dentro dele. A partir daqui, React gerencia tudo dentro de #root — o HTML estático fora do #root não é tocado pelo React.

O ! (non-null assertion operator) diz ao TypeScript que você garante que document.getElementById("root") não retorna null. O TypeScript sabe que getElementById pode retornar HTMLElement | null — o ! suprime o erro de compilação. Se o elemento não existir em runtime, o erro aparece como exceção JavaScript.

StrictMode é um wrapper que ativa verificações extras em desenvolvimento — detecta efeitos colaterais inesperados e APIs depreciadas. Em produção, StrictMode não tem impacto. Uma consequência visível: em desenvolvimento, StrictMode deliberadamente monta e desmonta componentes duas vezes para detectar problemas nos efeitos — pode parecer estranho mas é o comportamento correto.

O primeiro componente: App.tsx

O App.tsx gerado pelo template tem código de demonstração. Para o blog, limpe e comece do zero:

tsx 
import "./App.css";

function App() {
  return (
    <div className="app">
      <h1>Blog React</h1>
      <p>Em construção…</p>
    </div>
  );
}

export default App;
App.tsx — ponto de partida limpo para o blog.

Salve e o browser atualiza automaticamente — HMR em ação. Nos próximos arquivos, App vai crescer para incluir Header, ArticleList e o sistema de tema.

Resumo

  • npm create vite@latest nome -- --template react-ts cria o projeto com React, TypeScript e Vite configurados.
  • public/ serve arquivos estáticos via URL (fetch('/artigos.json')). src/ contém código processado pelo bundler.
  • main.tsx monta o componente App no elemento #root com createRoot().render().
  • O ! (non-null assertion) diz ao TypeScript que o valor não é null — use quando você tem certeza.
  • StrictMode ativa verificações extras em desenvolvimento — componentes são montados duas vezes intencionalmente.
  • A estrutura proposta para o blog: src/components/, src/context/, src/hooks/, src/types/.
/ checkpoint verifique seu entendimento
questão 1 de 4

Por que Vite é preferível ao Create React App para projetos novos?