Organize seus projetos React de forma profissional e clara
Sobre a aplicação | Pastas | Estruturas | Extensão VSCODE | Clonar Projeto | Por que? |
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.
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.
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`
- Clonar repositório:
git clone https://github.com/DIGOARTHUR/filePattern-React
.git
2.1 Ver qual o repositorio atual
git remote -v
2.2 Mudar a URL do repositorio remoto
git remote set-url origin <LinkDoNovoRepositorio>
2.3 Verifique se a mudança foi realizada
git remote -v
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 ♥