24
loading...
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.
É aqui onde encontramos as principais informações do projeto, como:
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
Todo o código criado por nós deve ficar nessa pasta source
Onde encontramos o código bruto
Onde encontramos o código bruto
Aqui fica os aquivos públicos,arquivos que precisam ser acessados pelo meio externo, como os assets e o index.html
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.
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.
Forma de conseguir visualizar o código da aplicação mesmo quando o código está tofo bagunçando do bundle.js
Pré processador de css que nos permite ter mais funcionalidades, como:
24