Fala Carlos, beleza?
Na verdade não tem uma forma oficial de se organizar o código, todos tem prós e contras. A forma que eu ensino é uma forma parecida com a que o next usa.
- Prós
- Dá para organizar mais facilmente arquivos que são usados somente naquele componente, por exemplo, se temos um arquivo de constantes, um arquivo utils, um arquivo css e um arquivo com o componente, podemos colocar todos eles no mesmo arquivo com o nome do componente e é muito mais fácil achar.
- Dá para colapsar todas as pastas e ver facilmente pelo nome das pastas os componentes, reduzindo bastante a quantidade de arquivos no editor quando todas estão colapsadas.
- Mais fácil de encontrar arquivos, em outras formas temos que ter pastas como css/, utils/ components/, sendo que se temos o CSS que só é utilizado no componente, podemos colocá-lo direto na pasta do componente, o que não seria possível se organizássemos somente por arquivo.
- Contras
- inúmeros arquivos com o mesmo nome (index.tsx, style.css etc.)
- Dependendo da organização/complexidade do projeto, pode haver muitas arquivos com um caminho muito grande (componentes/Lista/Item/Titulo/index.tsx)
De acordo com a experiência que eu já tive com projetos React, a minha opinião é que essa forma é a melhor forma de organizar pastas, mas sinta-se a vontade de utilizar a forma que lhe for mais conveniente, isto só muda na sua produtividade.
Bons estudos!
