https://github.com/digoarthur/filepattern-react
Organize seus projetos React de forma profissional e limpa. Repositório com os conceitos de pastas e modelo de estrutura para aplicações React.
https://github.com/digoarthur/filepattern-react
Last synced: 6 months ago
JSON representation
Organize seus projetos React de forma profissional e limpa. Repositório com os conceitos de pastas e modelo de estrutura para aplicações React.
- Host: GitHub
- URL: https://github.com/digoarthur/filepattern-react
- Owner: DIGOARTHUR
- Created: 2023-09-22T22:00:32.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-10T23:27:33.000Z (almost 2 years ago)
- Last Synced: 2025-02-05T11:16:25.009Z (8 months ago)
- Language: TypeScript
- Homepage:
- Size: 25.9 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Projeto modelo com estruturas de pastas - REACT
Organize seus projetos React de forma profissional e clara
----
Sobre a aplicação |
Pastas |
Estruturas |
Extensão VSCODE |
Clonar Projeto |
Por que? |
# 
Sobre a aplicação
---
> Aqui está sendo apresentado os tipos de pastas que são usadas no React e um exemplo de estrutura.
> ATENÇÃO: a melhor estrutura é aquela que você e sua equipe conseguem trabalhar em harmonia. Então não há uma regra, a regra é feita internamente e seguida por todos para que haja o desenvolvimento.
---
# Pastas
- `api`: diretório que contém todos os serviços que cuidam da comunicação entre o React (frontend) e a API (backend)
- `services`: Aqui ficam as configurações de HTTP clientes, normalmente utilizando axios.
- `auth`: aqui é feita todo o processo de autenticação. Caso a sua aplicação tenha um sistema de Login, terá que ser construído todo um contexto, todo um estado Global para que tenha, cuidadosamente, controle como por exemplo: autorização de acesso a recursos da aplicação.
`assets`: serve para armazenar imagens, ícones, audios, videos.
`componentes`: componentes reutilizáveis da aplicação. Componentes que são unidades para sua aplicação, um button, um dropdown, um modal, um input etc.
- `pages`: as pages são as páginas que usam vários componentes. É essa a página que o usuário vai ver.
- `test`: aqui fica toda a estrutura para testes. É conveniente colocar junto aos arquivos de cada página para que corresponda aos mesmos.
- `storybook`: pasta onde fica o arquivo da ferramenta storybook que é usada como playground para componentes de UI. Ele permite que nós, desenvolvedores, criemos e testemos componentes isoladamente. Ele também é executado fora do aplicativo, portanto, as dependências do projeto não afetarão o comportamento dos componentes.
`store`: este diretório inclui todos os estados globais do React que podem ser acessados a partir de qualquer componente do aplicativo. Podem ser usados state managers, context api, zustand, redux.
`types`: armazena as tipagens de typescript (types e interfaces) que são comuns em várias áreas do projeto.
- `util`: funções utilitárias como formatCurrency, formatPhone, convertTimezone, parsePhone (javascript puro).
- `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.
- `providers`: essa pasta é utilizada para os arquivos ligado ao recurso Provider do React. Estabelecendo uma hierarquia global de compartilhamento de informações na aplicação.
`validations`: são feitas as validações de formulários. Podem ser criado Schemas para a análise de regras. Pode-se utilizar a biblioteca Formic, por exemplo.
# Estrutura
react-project
├── src
└── `api`
│ ├── `auth`
│ ├── `services`
│
└── `assets`
│ ├── `audios`
│ ├── `imagens`
│ └── `videos`
└── `components`
│ ├── Card.js
│ ├── Create.js
│ └── List.js
└── `pages`
│ └── AboutUs
│ ├── `storybook`
│ ├── `teste`
│ ├── About-Us.css
│ └── About-Us.tsx
└── `store`
│ ├── language.js
│ ├── user.js
│
└── `types`
├── user.ts
│
└── `utils`
│ ├── `hooks`
│ │ ├── useChat.js
│ │ ├── useOutsideAlerter.js
│ │ ├── useToast.js
│ ├── `providers`
│ ├── HomeContextProvider.js
│ ├── ToastContextProvider.js
│
└── `validations`
├── `forms.js`
# Extensão VSCODE para visual das pastas
1. [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
2. [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
3. [Monokai Pro](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode)
4. [Material Theme Icons](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons)
5. [City Lights](https://marketplace.visualstudio.com/publishers/Yummygum)
[More...](https://javascript.plainenglish.io/10-icon-packs-for-vs-code-87d2ff700d0c)
# 
Clonar Projeto
1. Clonar repositório:
```
git clone https://github.com/DIGOARTHUR/filePattern-React
.git
```
:warning: 2. Trocar URL do repositorio remoto (caso necessário)
2.1 Ver qual o repositorio atual
```
git remote -v
```
2.2 Mudar a URL do repositorio remoto
```
git remote set-url origin
```
2.3 Verifique se a mudança foi realizada
```
git remote -v
```
# 
Por que?
Quando estamos desenvolvento um projeto às vezes ficamos perdidos em relação onde inserir cada arquivo. Este projeto demonstra um exemplo, demonstra uma ideia em como se organiza e o que cada pasta significa.
---
Obrigadíssimo pela a sua atenção. Abraçoo ♥