Quando falamos de pastas em react, o mais importante não é ter a melhor estrutura de pastas, mas sim ter padrão.

Assim como todo bom projeto, é preciso ter uma boa organização para o projeto escalar cada vez mais e da melhor forma, dessa forma ele está dividido nas seguintes camadas/pastas

Obs: Isso é um padrão de mercado então não foi algo meramente criado sem uma boa pesquisa antes

---

• assets - Todos os arquivos estáticos. Ex: Alguns arquivos .js, imagens, ícones e etc.
  
  

• components - Todos nossos componentes que podem ser reutilizaveis.

  • structured - Componentes que compõem mais de um componente para sua construção, eles tem seus próprios estados e tem uma complexibilidade maior.
  • ui - Componentes mais simples que geralmente são usados em todo o sistema, tanto em página quanto na construção de componentes mais complexos.
    
    

• data - Aqui podemos armazenar algumas constantes que vamos usar pelo sistema, é parecido com o assets porém mais focado em código em si.
  
  

• hooks - Todos os Hooks que podemos reutilizar no projeto é armazenado nessa pasta.
  
  

• layouts - Layouts que usamos no sistema, ou seja, as padronizações de processos feitas para facilitar o desenvolvimento no dia a dia

  • body - Layouts que abrangem todo o sistema, ou seja, independente do conteúdo que esteja sendo mostrado, esse layout irá aparecer na tela.
  • content - Layouts para padronizar os conteúdos que vão estar dentro do body.
  • panel - Layouts de processos padrões, registros, visualizações e etc.
    
    

• routes - Arquivos de configuração sobre as rotas do sistema.
  
  

• services - Aqui devem ser armazenadas todo o padrão de comunicação com api's externas.
  
  

• themes - Tudo envolvendo cores do sistema devem estar armazenadas aqui, cores padrões do sistema, cores de fundo e afins.
  
  

• utils - Pasta de utilidades que armazena funções e serviços que podem ser usadas por todo o sistema.
  
  

---

A pasta pages deve ter um cuidado a mais para seguir um padrão que combine com a url da rota, ou seja, a estrutura de pasta deve seguir o padrão de url, este é um padrão de mercado e uma boa prática em react, segue exemplo:

Implementação da tela de cadastro de produto encontrada no caminho pages > products > registration

URL da rota:

O arquivo index.js é o primeiro arquivo a ser renderizado pelo react, ou seja, quando o sistema inicia, é o primeiro arquivo a ser olhado.

Neste arquivo é aonde acontece o render das páginas com o DOM

O DOM basicamente é o que diferencia o React do Html, javascript e css padrão, sem ele não é possível fazer uma aplicação React pois não vai dar de colocar Html, javascript e css em um mesmo contexto de arquivo assim como fazemos no React.

Diferença entre aplicação com o DOM e sem ele

O StrictMode é um modo para deixar a aplicação mais segura

Mais sobre o StrictMode

O arquivo App.jsx é um arquivo que configuramos os scripts/componentes que queremos que rode a todo momento na aplicação, devemos tomar muito cuidado ao chamar/criar algo nele pois vai ser carregado independentemente da rota

Aqui ficam armazenados os estilos que vão ser usados em todo o sistema, só podem ser subistituidos por algum css mais específico

Exemplo: Caso uma página não tenha seu css próprio, o css que ela vai buscar vai ser esse arquivo padrão

Assim como tudo no sistema, os arquivos css também devem ter um padrão.

• O nome padrão de qualquer arquivo css deve ser styles.css
• Os arquivos css devem respeitar as pastas da onde estiverem, segue exemplo abaixo:

Nesse cenário temos um arquivo styles.css que está dentro da pasta notification, além dele temos o arquivo Notification.jsx que é a implementação do componente. Neste caso o arquivo styles.css deve ser chamado apenas no Notification.jsx, ou seja, ele é uma estilização que pertence ao componente Notification

Neste outro cenário temos o arquivo styles.css dentro da pasta alert que está 1 nível acima da pasta notification, dessa forma podemos usar o css tanto no nos componentes dentro da pasta notification quanto na pasta panel já que é um css mais abstrato.

Basicamente hoje as rotas públicas e privadas são separadas da seguinte forma:

Caso tenha /login na rota, é uma rota pública, caso não tenha, é privada.

As rotas públicas são rotas que não precisam de um token salvo no navegador para serem acessadas.

As rotas privadas por sua vez são rotas que precisam de um token salvo no navegador para serem acessadas.

RouteController é o componente responsável por validar para ver se a rota é pública ou privada e também por validar se deve mostrar todo o layout body ou não

Abra uma nova tag Route, passe a url que vai pertencer a ela e passe os elementos que ela deve carregar que sempre deve conter a tag RouteController para a rota ser controlada e a pagina que vai pertencer a essa rota, neste caso estamos fazendo com a página TestPage

E pronto, basta testar a rota para ver ela funcionando, lembrando que se for uma rota privada deve haver login antes.

As importações devem seguir a seguinte ordem:

1. Dependências externas - função default
2. Dependências externas - funções de 1 só arquivo
3. Dependências internas - função default
4. Dependências internas - funções de 1 só arquivo

Exemplo:

Importando função default do arquivo

Quando o arquivo tem apenas uma função exportada e está marcada com a palavra chave default, podemos importar apenas chamando o nome da função exportada.

Exemplo: import ContentPage from "../../../layouts/content/ContentPage"

Importando várias funções de um mesmo arquivo

Quando um arquivo tem várias funções exportadas, podemos importar 1 ou mais funções de uma vez apenas adicionando {} e colocando a função dentro.

Exemplo: import { SaveButton, CollapseButton } from "../../../components/ui/buttons/icons/IconButton"

Exportando função default do arquivo

Para exportar a unica função do arquivo podemos usar o export default.

Exemplo: export default ContentPage

Exportando várias funções de um mesmo arquivo

Para exportar várias funções do arquivo, devemos adicionar {} e separar as funções por ,.

Exemplo: export { CollapseButton, SaveButton, QueryDataButton, EditButton, MoreButton }

Como já vimos antes, as páginas devem ser criadas na pasta pages

Implementando uma div comum

Todas as páginas devem ter o sufixo Card no final do nome, é uma boa convenção para conseguirmos distinguir com facilidade o que são páginas ou não.

Arquivo DashboardCard.jsx

Todos os arquivos de páginas devem ter apenas uma função retornando a página, dessa forma deve-se exportar usando a palavra chave default

Sempre que precisar utilizar cores para um botão, ou background ou qualquer outra coisa, use as cores default do sistema, elas estão na pasta themes

Exemplo:

building...

building...