Como Criar um Projeto React com Vite e Utilizar Rotas Baseadas no Diretório

O Vite é uma ferramenta moderna para construção de projetos web que oferece um ambiente de desenvolvimento extremamente rápido e eficiente. Neste artigo, vamos aprender a criar um projeto com Vite e configurar rotas baseadas em um diretório pages, similar ao que frameworks como Next.js utilizam. Também exploraremos algumas utilidades e dicas para otimizar o desenvolvimento.

🛠️ Passo 1: Criando o Projeto com Vite

Para começar, precisamos criar o projeto. Certifique-se de ter o Node.js instalado na sua máquina.

1. Abra o terminal e execute o comando:

npm create vite@latest my-vite-project --template react

1. Navegue até o diretório do projeto:

cd my-vite-project

1. Instale as dependências:

npm install

1. Inicie o servidor de desenvolvimento:

npm run dev

Após esses passos, você terá um ambiente React pronto para começar.

📂 Passo 2: Estruturando o Diretório pages

O conceito de rotas baseadas no diretório pages é simples: cada arquivo no diretório representa uma rota. Para isso, precisamos configurar um sistema de rotas no Vite. Vamos usar o React Router.

1. Instale o React Router:

npm install react-router-dom

1. Crie uma estrutura de pastas semelhante a esta:

src/
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   └── NotFound.jsx
├── App.jsx
├── main.jsx

1. Configure as rotas no arquivo App.jsx:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

1. Crie um exemplo de página em Home.jsx:

function Home() {
  return <h1>Bem-vindo à Home!</h1>;
}

export default Home;

1. Para testar, inicie o servidor com:

npm run dev

Agora você pode navegar entre as rotas "/" e "/about".

⚙️ Passo 3: Automatizando a Importação de Rotas

Para evitar a necessidade de importar manualmente cada página, podemos automatizar esse processo. Aqui está um exemplo básico:

1. Instale o plugin vite-plugin-pages:

npm install vite-plugin-pages

1. Configure o plugin no arquivo vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import Pages from 'vite-plugin-pages';

export default defineConfig({
    plugins: [
    react(),
    Pages({
      dirs: "src/app",
      extensions: ["tsx", "jsx"],
    }),
  ],
});

1. Atualize o arquivo App.jsx:

import { BrowserRouter as Router } from 'react-router-dom';
import { useRoutes } from 'react-router-dom';
import routes from "~react-pages";

function App() {
  <Suspense fallback={<p>Loading...</p>}>
    <Router>{useRoutes(routes)}</Router>
  </Suspense>
}

export default App;

💡 Dicas e Utilidades

1. Componentes Layout: Adicione um layout padrão para sua aplicação criando um componente Layout.jsx e envolvendo suas rotas principais nele.
2. Rotas Dinâmicas: Use colchetes para criar rotas dinâmicas. Por exemplo:

pages/
└── [id].jsx

Isso cria uma rota dinâmica acessível em "/123", onde "123" é o valor do "id".

1. Navegação de Links: Use o componente Link do React Router para criar navegações sem recarregar a página:

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

export default Navigation;

📌 Conclusão

Utilizar Vite com rotas baseadas em um diretório pages é uma abordagem moderna e eficiente para criar aplicações React. Isso simplifica a estrutura do projeto e melhora a produtividade, especialmente em projetos maiores.

Agora que você aprendeu o básico, experimente personalizar e expandir sua aplicação. 🚀