GoStack 10.0 || Módulo 06

• 1. Conceitos abordados
• 2. Descrição do projeto
• 3. Iniciando o React Native
• 4. Criando o projeto

1. Conceitos abordados

1. Iniciar um projeto React Native para mobile app.
2. Utilização de ambiente Android.
3. Incluir ESLint, Prettier & EditorConfig.
4. debug via Reactotron.
5. Navegação entre páginas: React Navigation.
6. Estilização via Styled Components.
7. Acessando dados de API do Github.
8. Acessando localstorage do Google Chrome.

2. Desrição do projeto

Um aplicativo mobile para a busca de usuário de Github e ver o perfil e uma lista de seus repositórios marcados com Star.

3. Iniciando o React Native:

Esse projeto foi desenvolvido para o ambiente mobile. No desenvolvimento do projeto foi usado o emulador mobile: Genymotion. Instruções para a instalação do Genymotion: https://docs.rocketseat.dev/ambiente-react-native/android/emulador Iiniciar o GenyMotion:

./genymotion (na pasta genymotion)

Dentro da pasta do projeto, Para iniciar o bundle:

yarn react-native start
ou
yarn react-native start --reset-cache

Redirecionamento de porta para o uso do debugger: Reactotron.

adb reverse tcp:9090 tcp:9090 ( redirecionar à porta do Reactotron)

Iniciar o app:

yarn react-native run-android

obs. O aplicativo foi desenvolvido para o ambiente Android.

4. Criando o projeto

1. Ambiente de desenvolvimento:

   1. Instalar NodeJS, JDK e dependencias.
   2. Instalar SDK do Android.
   3. Instalar Genymotion (emulador de mobile Android).
   4. Guideline:
      1. http://docs.rocketseat.dev
      2. https://docs.rocketseat.dev/ambiente-react-native/android/linux

2. Iniciando o projeto:

   1. yarn react-native init modulo06
      

   2. App.js
      1. Remover comentarios, const, text que não seja "Welocme to React".
      2. obs. Todos os elementos ja tem display: flex do css.

3. ESLint, Prettier & EditorConfig

   1. Criar .editorconfig

   2. Add ESLint:

      yarn add eslint -D
      yarn eslint --init
      yarn add prettier eslint-config-prettier eslint-plugin-prettier babel-eslint -D
      

   3. Criar .eslintrc.js

   4. Criar .prettierrc

   5. Reiniciar o bundle.

4. Configurando o Reactotron

   1. Debugger pode causar problemas, portanto vamos usar o reactotron:
      1. Google: Reactotron 2. Link: https://github.com/infinitered/reactotron/releases 3. Download and Install: reactotron-app_2.17.1_amd64.deb

         yarn add reactotron-react-native
         

   2. Criar src, src/index.js, src/config/ReactotronConfig.js
      1. Transfere todo o codigo do App.js para src/index.js e deleta App.js
      2. modulo06/index.js: import App from './src';
      3. Adicionar ao .eslintrc.js em globals:

         __DEV__: 'readonly'
         

      4. src/index.js: import './config/ReactotronConfig';
      5. Se não conectar o Reactotron:
         1. Se você tem o adb instalado na sua distro Linux provavelmente ele está diferente da versão do Genymotion.
         2. Seguir o guideline:
            1. https://medium.com/@birobirobiro/erro-adb-devices-no-genymotion-react-native-735c15594ac6
         3. Redirecionamento de porta: Terminal:

7. Styled Components

   yarn add styled-components
   

   1. Criar Main/styles.js

8. Estilizando formulário

   1. Main/index.js
   2. Acesso a MaterialIcons:

      yarn add react-native-vector-icons
      

   3. https://github.com/oblador/react-native-vector-icons
      1. abrir pasta android/app/build.gradle

         project.ext.vectoricons = [
         iconFontNames: [ 'MaterialIcons.ttf' ] // Name of the font files you want to copy
         ]
         apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
         

   4. Main/index.js: import Icon from 'react-native-vector-icons/MaterialIcons'
      1. Google -> react native vector icons -> github -> site na 1a linha:
      2. https://oblador.github.io/react-native-vector-icons/

9. Acessando API do Github

   1. Main/index.js
      1. Quando o usuario preencher os dados no placeholder e clicar no '+', vamos buscar os dados no github do usuario e adicionar num 'state'.
      2. Para isso, alteramos a function Main para class.
      3. obs. no Input: add value e onChangeText. Add returnKeyType e onSubmitEditing.
      4. função handleAddUser. this.handleAddUser vai no SubmitButton e não no Form (React Native não tem Form).
   2. API (adicionar axios):

      yarn add axios
      

      1. Criar src/services/api.js
      2. import ao handleAddUser.
   3. import { Keyboard } from 'react-native';
      1. Keyboard.dismiss();

10. Estilizando a listagem

    1. List:
       1. React Native não tem ul, li e não tem .map. React Native ja tem List padrão com barra de rolagem, etc.
       2. usar FlatList
    2. Main.index/js e Main/styles.js

11. Loading e disabled

    1. Main/index.js:

       import { Keyboard, ActivityIndicator } from 'react-native';
       

    2. Incluir loading no state.
    3. Main/styles.js: Add opacity.

12. Salvando no storage

    1. React Native não tem API para localstorage.

    yarn add @react-native-community/async-storage
    yarn react-native run-android