📦 React Boilerplate com Vite, Sass e React Router

Um template moderno para iniciar projetos React com configurações otimizadas e estrutura organizada. Ideal para desenvolvimento ágil com as melhores práticas!

📚 Índice

• 📦 React Boilerplate com Vite, Sass e React Router
  • 📚 Índice
  • ✨ Recursos Principais
  • 🚀 Começando
    • Pré-requisitos
    • Instalação
    • Usando como Template
  • 🛠 Comandos
  • � Configuração de Rotas
  • ⚡ Componentes Reutilizáveis
    • Stack
    • ButtonLink
  • � Estrutura de Estilos
  • 📂 Estrutura de Arquivos
  • 📄 Exportações Organizadas
  • 📝 Licença
  • ⭐ Apoie o Projeto

✨ Recursos Principais

• ⚡ Vite para build ultrarrápido
• 🎨 Sass/SCSS com CSS Modules
• 🧭 React Router v6 com rotas centralizadas
• 📦 Componentes pré-configurados (

  Stack
  ,

  ButtonLink
  )
• 🗂 Estrutura de pastas modular
• 🔍 ESLint configurado para qualidade de código
• 🛠 Scripts de desenvolvimento e produção otimizados

🚀 Começando

Pré-requisitos

• Node.js ≥18.x
• Gerenciador de pacotes (npm/yarn/pnpm)

Instalação

1. Clone o repositório

   # HTTPS
   git clone https://github.com/samuelrms/react-project-start.git
   
   # SSH
   git clone git@github.com:samuelrms/react-project-start.git
   
   # GitHub CLI
   gh repo clone samuelrms/react-project-start
   

2. Acesse a pasta do projeto

   cd react-project-start
   

3. Instale as dependências

   npm install   # usando npm
   yarn          # usando Yarn
   pnpm install  # usando pnpm
   

Usando como Template

Crie um novo projeto a partir deste template:

# Com degit
npx degit samuelrms/react-project-start meu-novo-projeto

# Com create-next-app
npx create-next-app --example https://github.com/samuelrms/react-project-start meu-novo-projeto

🛠 Comandos

| Comando | Descrição | |------------------|-------------------------------------| |

npm run dev

npm run build

npm run preview

Substitua

npm

yarn

pnpm

� Configuração de Rotas

Todas as rotas são definidas centralmente em

src/routes/routes.jsx

// Exemplo de configuração de rotas
export const routes = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      { path: "/", element: <Home /> },
      { path: "/sobre", element: <Sobre /> },
      { path: "*", element: <Pagina404 /> },
    ],
  },
]);

⚡ Componentes Reutilizáveis

Stack

Componente flexível para layouts:

<Stack elementType="main" className="meu-layout">
  <h1>Conteúdo Principal</h1>
</Stack>

Propriedades:

• elementType
  : Tag HTML (padrão:

  div
  )

• className
  : Classes CSS adicionais

ButtonLink

Botão inteligente que pode se comportar como link:

<ButtonLink to="/contato" className="botao-especial">
  Entre em Contato
</ButtonLink>

Propriedades:

• to
  : Caminho para navegação (opcional)

• type
  : Tipo do elemento (

  button
  ou

  link
  )

• className
  : Estilos personalizados

� Estrutura de Estilos

// Exemplo de módulo SCSS
.homeContainer {
  padding: 2rem;
  
  .homeTitle {
    color: var(--cor-primaria);
  }
}

• Global:

  src/assets/styles/main.scss
• Módulos:

  [Componente].module.scss
  em cada pasta

📂 Estrutura de Arquivos

desafio-final-full-stack/
├── public/
│   └─ vite.svg
├── src/
│   ├─ assets/
│   │  ├─ icons/
│   │  │  └─ search.jsx
│   │  ├─ images/
│   │  │  ├─ social/
│   │  │  │  ├─ facebook.png
│   │  │  │  ├─ instagram.png
│   │  │  │  ├─ linkedin.png
│   │  │  │  ├─ twitter.png
│   │  │  │  └─ youtube.png
│   │  │  └─ logo.png
│   │  └─ styles/
│   │     └─ main.scss
│   ├─ components/
│   │  ├─ ButtonLink/
│   │  │  ├─ ButtonLink.module.scss
│   │  │  └─ index.jsx
│   │  ├─ Footer/
│   │  │  ├─ Footer.module.scss
│   │  │  └─ index.jsx
│   │  ├─ Navbar/
│   │  │  ├─ index.jsx
│   │  │  └─ Navbar.module.scss
│   │  └─ Search/
│   │     ├─ index.jsx
│   │     └─ SearchBar.module.scss
│   ├─ pages/
│   │  ├─ About/
│   │  │  ├─ About.module.scss
│   │  │  └─ index.jsx
│   │  ├─ Home/
│   │  │  ├─ Home.module.scss
│   │  │  └─ index.jsx
│   │  └─ NotFound/
│   │     ├─ index.jsx
│   │     └─ NotFound.module.scss
│   ├─ routes/
│   │  └─ routes.jsx
│   ├─ App.jsx
│   └─ main.jsx
├── scripts/
│  └─ update-license-year.mjs
├── .gitignore
├─ LICENSE
├─ package.json
├─ README.md
└─ vite.config.js

📄 Exportações Organizadas

Cada pasta possui

index.js

// src/shared/components/index.js
export * from './ButtonLink';
export * from './Stack';

📝 Licença

Este projeto está licenciado sob a Licença MIT.

⭐ Apoie o Projeto

Se este template te ajudou, deixe uma estrela no repositório!

Feito com ❤️ por Samuel Ramos
📧 Contato | 💼 LinkedIn