cra-template-bruna v0.5.0

CRA Template Bruna

Template create-react-app para agilizar a criação de projetos pessoais e de estudo.

⚙️ Setup

• Typescript
• Styled-components
• React-router-dom
• Axios

📂 Estrutura de pastas

📌 Components

Nesta pasta estarão os componentes da aplicação que não sejam de navegação. Geralmente são componentes utilizados em mais de uma página, por exemplo: barras de navegação, formulários, etc.

Pelo fato de o projeto estar utilizando styled-componentes, deve-se criar uma pasta com o próprio nome de cada componente, contendo o arquivo(.tsx) e o arquivo de estilo(.ts). Este padrão deve ser adotado para garantir a organização do diretório. Por exemplo:

src/
├─ components/
│  ├─ ProfileCard/
│  │  ├─ ProfileCard.tsx
│  │  ├─ style.ts
│  ├─ NavBar/
│  │  ├─ NavBar.tsx
│  │  ├─ style.ts

🟣 Contexts

Nesta pasta conterá os possíveis contextos que a aplicação poderá conter. Para saber mais sobre, leia a documentação aqui.

↪️ Hooks

Nesta pasta conterá os possíveis hooks customizados que a aplicação poderá conter. Para saber mais sobre como criá-los, leia a documentação aqui.

🟠 Pages

Esta pasta conterá todas as páginas da aplicação. Páginas são os componentes que realizam a navegação da aplicação.

É recomendado criar uma pasta para cada página com o nome do componente da página, contendo o arquivo(.tsx) e o arquivo de estilo(.ts). Isso é necessário para garantir a organização do diretório. Por exemplo:

src/
├─ pages/
│  ├─ Home/
│  │  ├─ Home.tsx
│  │  ├─ style.ts
│  ├─ Login/
│  │  ├─ Login.tsx
│  │  ├─ style.ts

🌍 Routes

Esta pasta conterá os arquivos de rotas da nossa aplicação. Dentro deles terá a biblioteca react-router-dom, responsável pelo roteamento dos componentes de páginas da aplicação. Para saber mais como funciona a biblioteca leia aqui.

💼 Services

Na pasta services temos dois arquivos:

• api.ts: este arquivo contém a configuração do Axios, com uma instância e definição da url base para as requisições HTTP feitas na aplicação;
• requests-service.ts: aqui temos uma abstração das nossas requisições, no template temos como exemplo duas requisições do tipo get(), optou-se por extrair o código de requisição para um arquivo externo aos componentes para manter a lógica das requisições em um contexto único, deixando assim a responsabilidade das requisições a cargo do arquivo em questão. Caso hajam muitas requisições pode-se criar um arquivo de services para cada domínio da aplicação, por exemplo, a aplicação possui os domínios de clientes, produtos e pedidos, poderá então ter a seguinte estrutura:

src/
├─ services/
│  ├─ customers-requests-service.ts
│  ├─ products-requests-service.ts
│  ├─ orders-requests-service.ts

Organizando assim as requisições por arquivo de domínio, o que evita de termos um único arquivo muito extenso.

💄 Estilização Global

Para garantir uma estilização global com um reset css, foi criado o arquivo globalStyle.ts ao qual foi importado no index.tsx, fazendo com que toda a aplicação tivesse resetado as suas margins, paddings etc. Qualquer outro estilo que seja global, deve ser adicionado nesse arquivo.

Autor

Bruna Barros 💗