Category Archives: ReactNative

React Native – Fundamentos – Estrutura da solução

A estrutura do APP projeto à ser trabalhado!

Web App Saga

Um app RN é 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 RN.

react_basico_projectstructure

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
    • ico – ícone
    • html – define o template da página do app.
  • src – mantém os arquivos do componente React
    • cs – arquivo de estilo
    • test.js – arquivo de unit test
    • svg – logo da página
    • js – mantém código gerado pelo React
    • 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 e 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. Disambarke on the left.

Keep Coding!!!!