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

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

<NOME_DO_SEU_APP>

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

<NOME_DO_SEU_APP>

Ambos os comandos usam o npx, que permite executar pacotes sem instalá-los globalmente. Substitua

<NOME_DO_SEU_APP>

Lembre-se de navegar até o novo diretório com

cd <NOME_DO_SEU_APP>

npm run dev

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

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

routes.jsx

Uso do Componente Stack

O componente

Stack

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

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:

.
╠══ package.json
╠══ vite.config.js
╠══ .gitignore
╠══ public/
║    ╚══ vite.svg
╠══ README.md
╠══ src/
║    ╠══ main.jsx
║    ╠══ shared/
║    ║    ╠══ components/
║    ║    ║    ╠══ Search/
║    ║    ║    ║    ╠══ SearchBar.module.scss
║    ║    ║    ║    ╚══ index.jsx
║    ║    ║    ╠══ Stack/
║    ║    ║    ║    ╚══ index.jsx
║    ║    ║    ╠══ Text/
║    ║    ║    ║    ╚══ index.jsx
║    ║    ║    ╠══ Footer/
║    ║    ║    ║    ╠══ Footer.module.scss
║    ║    ║    ║    ╚══ index.jsx
║    ║    ║    ╠══ ButtonLink/
║    ║    ║    ║    ╠══ index.jsx
║    ║    ║    ║    ╚══ ButtonLink.module.scss
║    ║    ║    ╠══ Navbar/
║    ║    ║    ║    ╠══ index.jsx
║    ║    ║    ║    ╚══ Navbar.module.scss
║    ║    ║    ╚══ index.js
║    ║    ╠══ layout/
║    ║    ║    ╚══ index.jsx
║    ║    ╚══ screens
║    ║    ║    ╠══ Home/
║    ║    ║    ║    ╠══ index.jsx
║    ║    ║    ║    ╚══ Home.module.scss
║    ║    ║    ╠══ About/
║    ║    ║    ║    ╠══ index.jsx
║    ║    ║    ║    ╚══ About.module.scss
║    ║    ║    ╠══ index.js
║    ║    ║    ╚══ NotFound
║    ║    ║    ║    ╠══ NotFound.module.scss
║    ║    ║    ║    ╚══ index.jsx
║    ╠══ App.jsx
║    ╠══ routes/
║    ║    ╚══ routes.jsx
║    ╚══ assets
║    ║    ╠══ img/
║    ║    ║    ╠══ youtube.png
║    ║    ║    ╠══ linkedin.png
║    ║    ║    ╠══ facebook.png
║    ║    ║    ╠══ logo.png
║    ║    ║    ╠══ instagram.png
║    ║    ║    ╚══ twitter.png
║    ║    ╠══ styles/
║    ║    ║    ╚══ main.scss
║    ║    ╚══ icons
║    ║    ║    ╠══ icon.svg
║    ║    ║    ╚══ search.jsx
╠══ eslint.config.js
╠══ pnpm-lock.yaml
╠══ LICENSE
╚══ index.html

Exportações de Componentes e Telas

Para facilitar as importações, cada pasta contém um arquivo

index.js

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!