Programação B

Criando o Projeto com Vite

Para usar React com JSX, precisamos de uma ferramenta de build — algo que compile o JSX em JavaScript que o navegador entende. Vamos usar o Vite, um bundler rápido com suporte nativo a TypeScript e React.

Dentro do diretório web/ do monorepo, crie o projeto:

$ cd web
$ npm create vite@latest . -- --template react-ts

O comando cria os arquivos do projeto no diretório atual (.). O template react-ts já vem configurado com TypeScript e React. Instale as dependências:

$ npm install

E inicie o servidor de desenvolvimento:

$ npx vite
  VITE v6.3.5  ready in 312 ms

  ➜  Local:   http://localhost:5173/

Abra http://localhost:5173/ no navegador. Você verá a página padrão do Vite com o logo do React girando. Funciona — mas é o template padrão, não o TamoJunto.

Conectando na API do backend

O Vite roda na porta 5173, e o backend roda na porta 3000. São origens diferentes — o navegador bloquearia um fetch("/api/events") feito a partir da página do Vite pela mesma razão de CORS que vimos no capítulo anterior.

A solução é configurar o Vite como proxy: requisições que começam com /api são redirecionadas automaticamente para http://localhost:3000. O navegador vê a requisição como sendo da mesma origem, e o CORS não se aplica.

Abra o arquivo vite.config.ts e adicione a configuração do proxy:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": "http://localhost:3000",
    },
  },
});

Com isso, fetch("/api/events") no código React funciona exatamente como funcionava quando a página era servida pelo Express — a URL relativa é a mesma, o código de fetch não muda.

Limpando o template

O Vite gera vários arquivos de demonstração que não precisamos. Substitua o conteúdo de src/App.tsx por um componente mínimo:

function App() {
  return <h1>TamoJunto</h1>;
}

export default App;

Apague os arquivos de estilo padrão (src/App.css, src/index.css) e remova os imports correspondentes de src/main.tsx. Abra o navegador: a página agora mostra apenas “TamoJunto”.