/vite-template

Primary LanguageJavaScript

Melhor forma de estruturar um projeto React utilizando Vite (minha opinião!)

Vite é um empacotador de aplicativos da web que substitui o webpack e o Parcel. Ele é projetado para fornecer uma experiência de desenvolvimento mais rápida e mais leve para os desenvolvedores.

Quando você inicia um novo projeto com Vite, ele cria para você um diretório com uma boa estrutura inicial para um sistema em React. Mas, eu acho que essa estrutura inicial não é a ideal para um projeto.

Então, eu vou mostrar a vocês como eu estruturo meus projetos React utilizando Vite.

Caso você queira, pode ir acompanhando o repositório do projeto que eu criei para esse tutorial: vite-template

🚩 Início do desenvolvimento

Para iniciar um projeto novo, você deve ir para sua pasta raiz, onde será armazenado o projeto (normalmente sua pasta documentos/), e executar o comando:

npm create vite@latest

Após isso, você deverá seguir no terminal e escolher o nome do projeto, e o template que deseja utilizar:

Project Name: » nome-projeto
Select Framework: » react
Select Variant: » js
💡 Dica:  Se você já possui uma pasta para seu projeto, e não quer criar uma pasta dentro da pasta, basta colocar "." no "Project Name":

Project Name: » .

Após isso, o projeto será criado, e aqui entra a parte mais importante, as dependências primordiais (que eu acho que são necessárias para um projeto React):

  • React Router Dom para o roteamento
  • Iconify para os ícones
  • Stitches para a estilização
cd nome-projeto
npm install react-router-dom @iconify/react @stitches/react

Com isso, o projeto estará pronto para ser desenvolvido.

npm run dev

📁 Estrutura de arquivos padrão

Agora, vamos ver como eu estruturo meus projetos React utilizando Vite.

.
├── 📁 public
│    └── // Favicon, logo, etc.
│
├── 📁 src
│    ├── 📁 assets
│    │    └── // Arquivos de imagem, ícones, etc.
│    │
│    ├── 📁 components
│    │    ├── 📁 Header
│    │    │    ├── index.jsx
│    │    │    └── styles.js
│    │    │
│    │    ├── 📁 Componente1
│    │    │    ├── index.jsx
│    │    │    └── styles.js
│    │    │
│    │    └── 📁 Componente2
│    │         ├── index.jsx
│    │         └── styles.js
│    │
│    ├── 📁 pages
│    │    ├── 📁 Home
│    │    │    ├── index.jsx
│    │    │    └── styles.js
│    │    │
│    │    └── 📁 Login
│    │         ├── index.jsx
│    │         └── styles.js
│    │
│    ├── App.jsx
│    │
│    ├── index.css
│    │
│    ├── main.jsx
│    │
│    └── Routes.jsx
│
├── .gitignore
│
├── .prettierrc
│
├── index.html
│
├── package.json
│
└── vite.config.js

📦 Componentes

Existem diversas formas de organizar os componentes. A forma com a qual eu me adaptei melhor, e é mais organizada para futuras alterações é a seguinte:

📁 components
 └── 📁 NomeDoComponente
      ├── index.jsx
      └── style.js

Para criar um componente, basta criar uma pasta com o nome do componente (em PascalCase) e dentro dela criar um arquivo index.jsx que será o arquivo principal do componente, e um arquivo styles.js que será o arquivo de estilização do componente.

Para seguir um padrão de criação de um Styled Component (Stitches) da utilização do Stitches, o mesmo deverá seguir a seguinte formatação:

Styled + "NomeDoComponente"

Para exemplo, vamos criar um componente header:

// src/components/Header/index.jsx
import { StyledHeader } from "./styles"

export default function Header() {
	return (
		<StyledHeader>
			<h1>header</h1>
		</StyledHeader>
	)
}
// src/components/Header/styles.js
import { styled } from "@stitches/react"

export const StyledHeader = styled("header", {
	// Estilos do header
})

Fazendo isso, nós conseguimos agora apenas colocar uma classe interna no filho do componente e podemos acessar essa classe pelo stitches.

Veja o exemplo:

// src/components/Header/index.jsx
import { StyledHeader } from "./styles"

export default function Header() {
	return (
		<StyledHeader>
			<h1 className="title">header</h1>
		</StyledHeader>
	)
}
// src/components/Header/styles.js
import { styled } from "@stitches/react"

export const StyledHeader = styled("header", {
	// Estilos do header
	".title": {
		// Estilos da classe title
	}
})

📄 Páginas

As páginas seguem o mesmo padrão dos componentes, porém, elas ficam dentro da pasta pages.

A diferença entre um componente e uma página é que as páginas são utilizadas para renderizar conteúdo na tela, enquanto os componentes são utilizados para criar blocos de código que podem ser reutilizados em outros projetos.

📄 Exemplo

// src/pages/Home/index.jsx

import React from "react"

import Header from "../../components/Header"

import { StyledHome } from "./styles"

export default function Home() {
	return (
		<StyledHome>
			<Header />
			<h1>Home</h1>
		</StyledHome>
	)
}
// src/pages/Home/styles.js

import { styled } from "@stitches/react"

export const StyledHome = styled("div", {
	// Estilos da página
})

🚗 Rotas

As rotas são utilizadas para definir quais páginas serão renderizadas na tela, de acordo com a URL. Para criar rotas, basta criar um arquivo Routes.jsx na pasta src e dentro dele criar um componente que irá conter as rotas.

Utilizaremos o react-router-dom para criar as rotas.

🚗 Modelo

// src/Routes.jsx

import React from "react"

import { BrowserRouter, Routes, Route } from "react-router-dom"

import Home from "./pages/Home"
import Login from "./pages/Login"

export default function AppRoutes() {
	return (
		<BrowserRouter>
			<Routes>
				<Route path="/" element={<Home />} />
				<Route path="/login" element={<Login />} />
			</Routes>
		</BrowserRouter>
	)
}

❌ Arquivos não utilizados

O Vite já cria o projeto com menos arquivos do que o create-react-app, porém, ainda assim, existem alguns arquivos que não são utilizados (por mim) e podem ser removidos.

❌ Arquivos que podem ser removidos

  • public/vite.svg
  • src/App.css
  • src/assets/react.svg

📝 Arquivo index.html

Algumas alterações para fazer no arquivo index.html:

  • Trocar a linguagem do HTML para pt-BR
  • Colocar o título da página
  • Colocar o favicon da página

📝 Arquivo App.jsx

Agora o arquivo App.jsx ficará bem mais simples, contendo apenas:

// src/App.jsx
import React from "react"

import AppRoutes from "./Routes"

export default function App() {
	return <AppRoutes />
}

🏁 Conclusão

Agora você já sabe como criar um projeto React do zero utilizando o Vite, já sabe como configurar o Stitches para estilizar os componentes e também já sabe como criar rotas para as páginas.

Lembrando que esse é o meu jeito de criar um projeto React, você pode criar da forma que achar melhor.

📚 Referências

📞 Contato