Projeto React com Vite, Sass e React Router

Este é um projeto de boilerplate em React utilizando Vite para desenvolvimento rápido, Sass para o gerenciamento de estilos e React Router para navegação. Todas as rotas da aplicação são centralizadas no arquivo src/routes/routes.jsx, facilitando a manutenção e adição de novas rotas.

Instalação

Pré-requisitos

• Node.js
• Yarn, pnpm ou npm (preferência pessoal)

Passos para instalação

1. Clone o repositório

   1. Usando HTTPS

   git clone https://github.com/samuelrms/react-project-start.git

   2. Usando SSH

   git clone git@github.com:samuelrms/react-project-start.git

   3. Usando GitHub CLI

   gh repo clone samuelrms/react-project-start

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

   cd react-project-start

3. Instale as dependências:

   1. Se estiver usando npm, execute:

   npm i

   2. Se estiver usando yarn, execute:

   yarn

   3. Se estiver usando pnpm, execute:

   pnpm i

Use este template

Este template pode ser utilizado com os seguintes comandos:

npx degit samuelrms/react-project-start <NOME_DO_SEU_APP>

Esse comando usa o degit para clonar diretamente o projeto do repositório GitHub react-project-start para um novo diretório nomeado <NOME_DO_SEU_APP>. O degit é uma ferramenta de scaffolding para criar novos projetos a partir de um repositório git.

ou

npx create-next-app --example https://github.com/samuelrms/react-project-start <NOME_DO_SEU_APP>

Esse comando usa create-next-app para criar uma nova aplicação Next.js usando o projeto react-project-start como template. O novo projeto será criado em um diretório nomeado <NOME_DO_SEU_APP>.

Ambos os comandos usam o npx, que permite executar pacotes sem instalá-los globalmente. Substitua <NOME_DO_SEU_APP> pelo nome desejado para o projeto.

Lembre-se de navegar até o novo diretório com cd <NOME_DO_SEU_APP> antes de iniciar o servidor de desenvolvimento com npm run dev, yarn dev ou pnpm dev. Boa codificação! 😊

Scripts disponíveis

No diretório do projeto, você pode executar:

Start Project

1. npm

npm run dev

2. yarn

yarn dev

3. pnpm

pnpm dev

Executa o app no modo de desenvolvimento. Abra http://localhost:5173/ para visualizá-lo no navegador.

Build Project

1. npm

npm run build

2. yarn

yarn build

3. pnpm

pnpm build

Compila o app para produção.

Configuração de Rotas

Todas as rotas estão centralizadas no arquivo src/routes/routes.jsx. Para adicionar ou alterar uma rota, basta editar esse arquivo:

import { createBrowserRouter } from "react-router-dom";
import App from "../App";
import { Home, About, NotFound } from "../shared/screens";

export const routes = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      { path: "/", element: <Home /> },
      { path: "/about", element: <About /> },
      { path: "*", element: <NotFound /> },
    ],
  },
]);

No componente principal (App.jsx), o arquivo routes.jsx é importado e utilizado para mapear as rotas dinamicamente.

Uso do Componente Stack

O componente Stack é um contêiner reutilizável para layouts flexíveis. Ele permite definir o tipo de elemento HTML e aplicar classes CSS adicionais.

Exemplo de Uso

import { Stack } from "./shared/components";

export const ExampleComponent = () => {
  return (
    <Stack elementType="section" className="custom-class">
      <p>Exemplo de uso do Stack</p>
    </Stack>
  );
};

Props do Componente

• elementType: Define o tipo de elemento HTML (div por padrão).
• className: Adiciona classes CSS extras ao contêiner Stack.
• children: Elementos filhos renderizados dentro do contêiner.

Uso do Componente ButtonLink

O componente ButtonLink é um botão personalizável que pode ser renderizado como botão ou link, com classes CSS extras opcionais.

Exemplo de Uso

import { Stack, ButtonLink } from "./shared/components";

export const ExampleComponent = () => {
  return (
    <Stack elementType="section" className="custom-class">
      <ButtonLink className="custom-class">Botão Padrão</ButtonLink>
      <ButtonLink to="/about" className="custom-class">
        Link para About
      </ButtonLink>
    </Stack>
  );
};

Props do Componente

• to: O destino do link (opcional se for tipo botão).
• type: Define o tipo do elemento (padrão é "button").
• className: Classes CSS extras para personalização.
• children: Conteúdo do botão/link.
• props: Outras propriedades adicionais para o botão/link.

Estrutura Modular de Estilos

Este projeto utiliza CSS Modules com Sass. Para adicionar estilos:

1. Crie um arquivo .module.scss na pasta do componente.
2. Importe o .module.scss diretamente no componente.

Exemplo:

import styles from "./Home.module.scss";

export const Home = () => {
  return (
    <div className={styles.homeContainer}>
      <h1 className={styles.homeTitle}>Página Inicial</h1>
    </div>
  );
};

• src/assets/styles/main.scss: Contém o reset CSS e estilos globais.
• src/shared/screens/[Page]/[Page].module.scss: Estilos específicos para cada página.

Estrutura de Arquivos

Abaixo está a estrutura do projeto:

.
╠══ pnpm-lock.yaml
╠══ LICENSE
╠══ vite.config.js
╠══ .gitignore
╠══ eslint.config.js
╠══ package.json
╠══ src/
║    ╠══ index.css
║    ╠══ routes/
║    ║    ╚══ routes.jsx
║    ╠══ main.jsx
║    ╠══ App.css
║    ╠══ assets/
║    ║    ╠══ react.svg
║    ║    ╚══ styles
║    ║         ╚══ main.scss
║    ╠══ App.jsx
║    ╚══ shared
║         ╠══ screens/
║         ║    ╠══ NotFound/
║         ║    ║    ╠══ index.jsx
║         ║    ║    ╚══ NotFound.module.scss
║         ║    ╠══ About/
║         ║    ║    ╠══ About.module.scss
║         ║    ║    ╚══ index.jsx
║         ║    ╠══ index.js
║         ║    ╚══ Home
║         ║         ╠══ Home.module.scss
║         ║         ╚══ index.jsx
║         ╚══ components
║              ╠══ ButtonLink/
║              ║    ╠══ ButtonLink.module.scss
║              ║    ╚══ index.jsx
║              ╠══ index.js
║              ╚══ Stack
║                   ╚══ index.jsx
╠══ README.md
╠══ public/
║    ╚══ vite.svg
╚══ index.html

Exportações de Componentes e Telas

Para facilitar as importações, cada pasta contém um arquivo index.js que exporta todos os componentes e telas.

Exemplo src/shared/components/index.js

// TODO: Export all components from this file
export * from "./ButtonLink";
export * from "./Stack";

Exemplo src/shared/screens/index.js

// TODO: Export all screens
export * from "./About";
export * from "./Home";
export * from "./NotFound";

Licença

Este projeto está sob a licença MIT.

Dê uma Estrela ⭐

Se você chegou até o final, considere dar uma estrela no repositório para apoiar o projeto!