Voltar para: Games com Phaser + Reactjs

Quando iniciamos com React, normalmente criamos projetos pequenos com poucos arquivos. Porém, conforme a aplicação cresce, surge um problema comum:

Onde colocar cada arquivo?

Sem organização, o projeto vira um “monólito de componentes”, difícil de manter.

Por isso, projetos profissionais seguem estruturas de pastas bem definidas.

Nesta aula vamos aprender uma estrutura escalável usada em projetos reais.

---

🎯 Objetivos da Lição

Ao final da aula, o aluno será capaz de:

• Entender por que organizar projetos React é importante
• Conhecer a estrutura profissional de pastas
• Separar componentes, páginas, estilos e lógica
• Criar projetos escaláveis
• Preparar código para equipes de desenvolvimento

---

📖 Parte 1 – Estrutura simples (inicial)

Quando criamos um projeto com Vite, normalmente temos algo assim:

src
 ├ App.jsx
 ├ main.jsx
 ├ index.css
 └ assets

Essa estrutura funciona para projetos pequenos.

Mas rapidamente surgem problemas:

• muitos componentes no mesmo lugar
• mistura de lógica e interface
• dificuldade de localizar arquivos

---

📖 Parte 2 – Estrutura usada em projetos profissionais

Uma estrutura comum é:

src
│
├ assets
│
├ components
│
├ pages
│
├ hooks
│
├ services
│
├ context
│
├ styles
│
├ utils
│
├ App.jsx
└ main.jsx

Agora vamos entender cada pasta.

---

📁 assets

Contém arquivos estáticos.

Exemplos:

assets
 ├ images
 ├ icons
 ├ fonts

Exemplo:

assets/images/logo.png

---

📁 components

Contém componentes reutilizáveis.

São pequenos blocos usados em várias partes da aplicação.

Exemplos:

components
 ├ Button
 │   ├ Button.jsx
 │   └ Button.css
 │
 ├ Card
 │   ├ Card.jsx
 │   └ Card.css

Esses componentes normalmente:

• não dependem de páginas específicas
• podem ser reutilizados

---

📁 pages

Representa telas completas da aplicação.

Exemplo:

pages
 ├ Home
 │   ├ Home.jsx
 │   └ Home.css
 │
 ├ Login
 │   ├ Login.jsx
 │   └ Login.css

Cada página pode utilizar vários componentes.

---

📁 hooks

Contém custom hooks.

Hooks são funções reutilizáveis que encapsulam lógica.

Exemplo:

hooks
 └ useAuth.js

Exemplo de hook:

import { useState } from "react";export const useToggle = () => {  const [value, setValue] = useState(false);  const toggle = () => setValue(!value);  return { value, toggle };};

---

📁 services

Responsável pela comunicação com APIs.

Exemplo:

services
 └ api.js

Exemplo:

import axios from "axios";export const api = axios.create({
  baseURL: "https://api.site.com"
});

---

📁 context

Usado para estado global da aplicação.

React possui a API chamada Context API.

Exemplo:

context
 └ AuthContext.jsx

Usado para coisas como:

• usuário logado
• tema da aplicação
• idioma

---

📁 styles

Contém estilos globais.

Exemplo:

styles
 ├ global.css
 ├ variables.css
 └ theme.css

---

📁 utils

Funções auxiliares.

Exemplo:

utils
 ├ formatCurrency.js
 └ formatDate.js

Exemplo de função:

export const formatCurrency = (value) => {
  return value.toLocaleString("pt-BR", {
    style: "currency",
    currency: "BRL"
  });
};

---

📖 Parte 3 – Estrutura completa recomendada

Projeto React profissional:

src
│
├ assets
│   ├ images
│   └ icons
│
├ components
│   ├ Button
│   ├ Card
│   └ Navbar
│
├ pages
│   ├ Home
│   ├ Login
│   └ Dashboard
│
├ hooks
│
├ services
│
├ context
│
├ styles
│
├ utils
│
├ App.jsx
└ main.jsx

---

📖 Parte 4 – Organização por componente

Cada componente pode ter sua própria pasta.

Exemplo:

components
 └ Button
     ├ Button.jsx
     ├ Button.css
     └ index.js

Isso ajuda a manter arquivos relacionados juntos.

---

📖 Parte 5 – Arquivo index.js em componentes

Muitos projetos utilizam:

index.js

Exemplo:

Button
 ├ Button.jsx
 └ index.js

index.js:

export { default } from "./Button";

Assim o import fica mais limpo:

import Button from "../components/Button";

---

📖 Parte 6 – Estrutura para projetos grandes

Projetos muito grandes usam arquitetura baseada em features.

Exemplo:

features
 ├ auth
 │   ├ components
 │   ├ hooks
 │   └ services
 │
 ├ products
 │   ├ components
 │   ├ pages
 │   └ services

Cada módulo da aplicação possui sua própria estrutura.

---

📖 Parte 7 – Boas práticas de organização

✔ componentes pequenos e reutilizáveis
✔ separar lógica da interface
✔ evitar arquivos gigantes
✔ usar nomes claros
✔ agrupar arquivos relacionados

---

🎯 Atividade Prática

Organizar o projeto criado anteriormente.

---

Criar estrutura

src
 ├ components
 │   └ MenuInicial
 │       ├ MenuInicial.jsx
 │       └ MenuInicial.css
 │
 ├ pages
 │   └ Home
 │       └ Home.jsx
 │
 ├ styles
 │   └ global.css
 │
 ├ App.jsx
 └ main.jsx

---

Home.jsx

import MenuInicial from "../../components/MenuInicial/MenuInicial";const Home = () => {
  return <MenuInicial />;
};export default Home;

---

App.jsx

import Home from "./pages/Home/Home";function App() {
  return <Home />;
}export default App;

---

🧠 Conceitos Fixados

Após essa aula o aluno aprende:

• organização profissional de projetos React
• separação entre componentes e páginas
• criação de estrutura escalável
• organização de código para equipes

---

📝 Critérios de Avaliação

Critério	Peso
Estrutura correta	2
Separação de responsabilidades	2
Componentes organizados	2
Código funcional	2
Boas práticas	2

Total: 10 pontos

---

🚀 Desafio Extra

Melhorias para o projeto.

1️⃣ Criar pasta hooks

Criar um hook useMenu.

---

2️⃣ Criar pasta services

Simular chamada de API.

---

3️⃣ Criar Navbar component

---

4️⃣ Criar pasta utils

Adicionar função:

formatScore()

---

🎓 Conclusão

Projetos React pequenos funcionam com poucas pastas.

Mas aplicações reais exigem:

• organização
• separação de responsabilidades
• escalabilidade

Uma boa estrutura torna o projeto:

✔ mais fácil de manter
✔ mais fácil de escalar
✔ mais fácil de trabalhar em equipe