Estrutura de um Projeto React

Quem nunca teve um pouco de dificuldade para entender cada pasta e arquivo de um projeto? Então, meu objetivo aqui é esclarecer um pouco qual a funcionalidade de alguns diretórios.

Package.json

É aqui onde encontramos as principais informações do projeto, como:

Nome
Versão
Arquivo de inicialização
Licença
Dependências

Node Modules

Assim como o package.json, está presente em todos os projetos javascript. É nessa pasta que fica armazenado todos os códigos das dependências que instalamos em nossa aplicação.

Inicialmente podemos estranhar o tamanho da pasta se comparado ao que está sendo declarado no package.json, mas isso ocorre pois as dependencias do nosso projeto também possuem dependencias e isso vai causando um efeito cascata, um depende de outro e assim por diante.

O comum é deixar o node_modules dentro do .gitignore, pois as dependencias já estão declaradas dentro do package.json, logo não é necessário que a pasta seja traqueada

SRC

Todo o código criado por nós deve ficar nessa pasta source
Onde encontramos o código bruto

Public

Aqui fica os aquivos públicos,arquivos que precisam ser acessados pelo meio externo, como os assets e o index.html

Babel

Ferramenta que converte o código para uma maneira que todos os browsers e todo ambiente da nossa aplicação consiga entender. Isso é necessário, pois o JS é uma linguagem que se atualiza muito e o React possui muitas funcionalidades que o navegadores ainda não consegue entender, então assim o babel compila para versão compatível com todos os navegadores.

Webpack

Na maioria das vezes é utilizado juntamente do babel

Estipula uma series se configurações(Loaders) que ensinam a aplicação a tratar cada tipo de arquivo(.png, .sass, .jpg, js) que pode ser importado e assim os converte para arquivos entendíveis pelo browser.