📦 React Boilerplate com Vite, Sass e React Router

GitHub license

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

✨ 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

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

Acesse a pasta do projeto
```
cd react-project-start
```

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`	Inicia servidor de desenvolvimento
`npm run build`	Compila para produção
`npm run preview`	Pré-visualiza build localmente

Substitua npm por yarn ou pnpm conforme seu gerenciador

� 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 para exportações simplificadas:

// 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

desafio final vnw full stack front

JavaScript