Web App Saga
A estrutura do APP projeto à ser trabalhado!
Um app React é composto por muitos arquivos e recursos. Vamos aprender hoje sobre esta estrutura e todas as pastas e o tipo de informação que cada uma delas guarda. Vamos lá:
A imagem ilustra essa estrutura inicial, após a criação de um projeto, temos essa estrutura de arquivos necessários para construir um app React.
Para abrir o projeto no VS Code (File | Open Folder | Pasta do projeto).
As 3 pastas do APP:
- node_modules – mantém pacotes e dependências do app
- public – mantém os recursos públicos do app
- favicon.ico – ícone
- index.html – define o template da página do app
- manifest.json –
- src – mantém os arquivos do componente React
- app.cs – arquivo de estilo
- app.test.js – arquivo de unit test
- logo.svg – logo da página
- registerServiceWorker.js – mantém código gerado pelo React
- app.js – arquivo principal do componente
Index.html
Possui a section body com tag div id=”root”. Esta tag que o app React passa pela renderização/exibição. Esta div é o contâiner para o app React.
Apenas os arquivos definidos nesta pasta podem ser utilizados na página Index.html.
App.component
Responsável pela renderização do banner com o logo do React no app.
SRC
O WebPack irá processar somente os arquivos dentro desta pasta. Ou seja, coloque arquivos como JS e CSS, do contrário o Webpack não irá reconhecê-los.
Next stop React. Disambark on the left.
Keep Coding!!!!
