├── .gitignore
├── README.md
├── index.html
├── package.json
├── public
└── vite.svg
├── src
├── App.tsx
├── assets
│ └── react.svg
├── index.css
├── main.tsx
├── pages
│ ├── Login
│ │ ├── Login.module.css
│ │ ├── Login.test.tsx
│ │ ├── Login.tsx
│ │ └── index.ts
│ └── ShowRoom
│ │ ├── ShowRoom.module.css
│ │ ├── ShowRoom.test.tsx
│ │ ├── ShowRoom.tsx
│ │ ├── hooks
│ │ └── useCars
│ │ │ ├── index.ts
│ │ │ ├── useCars.test.tsx
│ │ │ └── useCars.tsx
│ │ └── index.ts
├── services
│ └── Api.ts
├── test
│ └── setup.ts
└── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Projeto com Estrutura para ReactJS apps
2 |
3 | ## Estrutura de pastas
4 |
5 | `assets`: Serve para armazenar imagens (imagens leves, se forem pesadas sempre prefira hospedar em uma CDN), ícones, etc.
6 |
7 | `components`: Componentes reutilizáveis da aplicação. Componentes que são unidades para sua aplicação, um button, um dropdown, um modal, etc.
8 |
9 | `hooks`: Essa pasta é utilizada para armazenar hooks que são genéricos, têm interação com hooks do React (useState, useEffect) e normalmente reutilizáveis e qualquer projeto, exemplos: useScreenSize, useLocalStorage, useSessionStorage, useUserActive.
10 |
11 | `pages`: As pages são as páginas que usam vários componentes. É essa a página que o usuário vai ver.
12 |
13 | `services`: Aqui ficam as configurações de HTTP clientes, normalmente utilizando axios.
14 |
15 | `store`: Ficam as definições de state managers, context api, zustand, redux.
16 |
17 | `types`: Armazena as tipagens de typescript (types e interfaces) que são comuns em várias áreas do projeto.
18 |
19 | `utils`: Funções utilitárias como formatCurrency, formatPhone, convertTimezone, parsePhone (javascript puro).
20 |
21 | ## A aplicação simula uma loja de carros
22 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-js-project-structure",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "preview": "vite preview",
10 | "test": "vitest"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0"
15 | },
16 | "devDependencies": {
17 | "@testing-library/jest-dom": "^5.16.4",
18 | "@testing-library/react": "^12.1.5",
19 | "@testing-library/react-hooks": "^8.0.0",
20 | "@testing-library/user-event": "^13.5.0",
21 | "@types/react": "^18.0.17",
22 | "@types/react-dom": "^18.0.6",
23 | "@vitejs/plugin-react": "^2.1.0",
24 | "jsdom": "^20.0.1",
25 | "typescript": "^4.6.4",
26 | "vite": "^3.1.0",
27 | "vitest": "^0.24.3"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import Login from "./pages/Login";
3 |
4 | function App() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
12 | export default App;
13 |
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | /* Uso esse arquivo para fazer reset de CSS */
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
7 |
8 |
9 |
10 | )
11 |
--------------------------------------------------------------------------------
/src/pages/Login/Login.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 24px
3 | }
--------------------------------------------------------------------------------
/src/pages/Login/Login.test.tsx:
--------------------------------------------------------------------------------
1 | import { screen, render } from "@testing-library/react";
2 | import Login from "./Login";
3 | import { describe, it } from "vitest";
4 |
5 | describe("", () => {
6 | it("renders the title", () => {
7 | render();
8 |
9 | expect(screen.getByText("Login")).toBeInTheDocument();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/pages/Login/Login.tsx:
--------------------------------------------------------------------------------
1 | import styles from "./Login.module.css";
2 |
3 | interface ILogin {
4 | email: string;
5 | password: string;
6 | }
7 |
8 | const Login = () => {
9 | return (
10 |
11 |
Login
12 |
13 |
14 |
15 | );
16 | };
17 |
18 | export default Login;
19 |
--------------------------------------------------------------------------------
/src/pages/Login/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./Login";
2 |
3 | // eu reexporto o componente para facilitar a importação em outros arquivos
4 |
--------------------------------------------------------------------------------
/src/pages/ShowRoom/ShowRoom.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 24px
3 | }
--------------------------------------------------------------------------------
/src/pages/ShowRoom/ShowRoom.test.tsx:
--------------------------------------------------------------------------------
1 | import { screen, render } from "@testing-library/react";
2 | import ShowRoom from "./ShowRoom";
3 | import { describe, it } from "vitest";
4 |
5 | describe("", () => {
6 | it("renders the title", () => {
7 | render();
8 |
9 | expect(screen.getByText("ShowRoom")).toBeInTheDocument();
10 | });
11 |
12 | it("renders the cars", () => {});
13 | });
14 |
--------------------------------------------------------------------------------
/src/pages/ShowRoom/ShowRoom.tsx:
--------------------------------------------------------------------------------
1 | import styles from "./ShowRoom.module.css";
2 | import useCars from "./hooks/useCars";
3 |
4 | const ShowRoom = () => {
5 | const cars = useCars();
6 |
7 | return (
8 |
9 |
ShowRoom
10 |
11 | {cars.map((car) => (
12 |
{car.name}
13 | ))}
14 |