Instalando rotas, Tailwind CSS e organizando dependências
Instale React Router e Tailwind CSS em um projeto React com TypeScript, organize pastas e entenda dependências.
- #Curso de Frontend
- #Framework
- #React Router
- #Tailwind CSS
- #React
- #Vite
- #Dependências
O objetivo desta aula
Agora que o projeto React com TypeScript já existe, vamos preparar a estrutura para trabalhar melhor.
Vamos instalar React Router para rotas, Tailwind CSS para estilização e o plugin do Tailwind para Vite. Também vamos organizar pastas, remover arquivos que não precisamos e deixar o projeto mais limpo.
Instalando React Router e Tailwind CSS
React Router será adicionado em dependencies, porque a aplicação usa rotas durante a execução. Tailwind CSS e o plugin para Vite entram na configuração do projeto.
Execute os comandos dentro da pasta do projeto React. React Router será usado para navegação entre telas e Tailwind CSS será usado para estilização com classes utilitárias.
npm install react-router
npm install tailwindcss @tailwindcss/vite
npm run devConfigurando Vite e CSS
No vite.config.ts, adicione o plugin do Tailwind junto com o plugin React. No CSS principal, normalmente src/index.css, importe Tailwind.
Leia essa etapa como ligação entre ferramenta e estilo. O Vite precisa saber que o Tailwind participa do build, e o CSS principal precisa importar as regras usadas pelo Tailwind.
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [react(), tailwindcss()],
});
// src/index.css
// @import "tailwindcss";Organizando as rotas
Crie a pasta src/routes e dentro dela o arquivo appRoutes.tsx. Esse arquivo centraliza as rotas da aplicação.
Uma rota liga um caminho do navegador a uma tela. Por exemplo, / pode abrir a página inicial e /busca pode abrir a tela de busca.
import { Route, Routes } from "react-router";
import { HomeView } from "../views/HomeView";
import { AboutView } from "../views/AboutView";
export function AppRoutes() {
return (
<Routes>
<Route path="/" element={<HomeView />} />
<Route path="/sobre" element={<AboutView />} />
</Routes>
);
}BrowserRouter, views e limpeza
No main.tsx, envolva App com BrowserRouter. Depois crie views como HomeView.tsx e AboutView.tsx.
Projetos criados pelo Vite podem vir com arquivos de exemplo. Remova apenas o que você entende que é exemplo, como App.css, assets/react.svg e public/vite.svg, ajustando imports quando necessário.
BrowserRouter deve envolver a parte da aplicação que usa rotas. Sem ele, componentes de rota do React Router não têm o contexto necessário para funcionar.
src
components
data
models
routes
appRoutes.tsx
views
HomeView.tsx
AboutView.tsx
App.tsx
index.css
main.tsx
