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!!!!

ReactNative – Release

Módulo # 12

A missão de hoje é fazer um estudo tratando dos detalhes fundamentais que precisamos conhecer para escrever códigos ReactJS. Ou seja, o foco será apenas em assuntos básicos da tecnologia, os elementos principais, explicando como eles funcionam dentro da plataforma.

No RN trabalhamos apenas com JS, ou seja, não temos acesso a CSS. E para aproximar a experiência de criar apps ao mundo do desenvolvimento web. Nasceu o FlexBox, uma forma declarativa de estilizar componentes bastante similar ao CSS.

A ideia é compreender a organização visual de nossos elementos. Entender os objetos, parâmetros e valores, trabalhando e customizando cada um dos elementos e conceitos disponíveis nesta tecnologia.

Ao final da missão, deveremos ter domínio sob a estrutura básica de um app-ReactJS sendo capaz de organizar boas soluções utilizando seus recursos.

Enfim, vamos fazer um overview sobre:

  • Overview
  • Generating the static bundle in iOS
  • Testing the static bundle in iOS
  • Creating an iOS release in Xcode
  • Generating the Android APK

O objetivo é trabalhar muito em cima deste projeto, vamos pensar em algo pequeno e conforme for terminando, iremos aprender como acrescentar mais novas funcionalidades.

“Modo React!”

Keep Programming!!!!