Leia também o artigo:
Home / React Native / React Native

React Native

O React Native é uma biblioteca que permite criar aplicações mobiles para Android e IOS, usando o JavaScript como linguagem. Foi criada pelo Facebook e possui código aberto. Existe também o React “Web” para aplicações na internet.

Documentação oficial:

https://facebook.github.io/react-native/docs/getting-started.html

Configurando o ambiente

Em ambiente Windows, e focando nosso estudo em Android, precisaremos aqui instalar:

  • Visual Studio Code (instalação padrão – N.N.F)
    • Caso esteja no Path, podemos inicializa-lo na linha de comando com: code . (ponto)
  • Node.js (instalação padrão – N.N.F)
  • JDK 8 (ou superior) e a variável JAVA_HOME configurada.
  • Android Studio e a variável ANDROID_HOME configurada.
    • https://developer.android.com/studio
    • Deixar marcado Android Studio e Andoid Virtual Device.
    • No wizard, escolher a opção Custom, depois o tema Darcula.
    • Marcar todas as opções, incluindo o Android Virtual Device.
    • Deixar a configuração recomendada (2 GB).
    • Responder YES pra tudo que for necessário.
    • No Android Studio > Configure > SDK Manager
      • Para pegar o caminho do SDK, algo como:
      • C:\Users\haylson\AppData\Local\Android\Sdk
      • Criar a variável ANDROID_HOME.
  • No Path devem ter os comandos:
    • %JAVA_HOME%\bin
    • %ANDROID_HOME%\emulator
    • %ANDROID_HOME%\tools
    • %ANDROID_HOME%\tools\bin
    • %ANDROID_HOME%\platform-tools
    • Testar na linha de comando:
      • adb –version
      • emulator -version
      • java -version
      • javac -version
  • Executar na linha de comando:
    • sdkmanager –licenses
    • responder yes pra tudo.
  • Verificar emuladores instalados na máquina:
    • emulator -list-avds
    • Executar o emulador:
      • emulator -no-snapshot -avd <nome-do-dispositivo-listado>
      • emulator -no-snapshot -avd Nexus_5X_API_29_x86
  • Abrir outro terminal, e configurar o react-native-cli de forma global.
    • comando: npm i -g react-native-cli
  • Criar a pasta do projeto, e entrar na pasta pelo terminal para criar o projeto.
    • comando: react-native init <nome-do-projeto>
    • executar: react-native init exercicios
  • Executar o Build do projeto no emulador do Android:
    • Entrar dentro da pasta com o nome do projeto criado (Ex.:exercicios).
    • Executar: react-native run-android
    • Podemos abrir o VS Code diretamente dessa pasta através do comando: code .
  • Build feito, é para aparecer no emulador a mensagem: Welcome to React Native!
    • Abrindo o arquivo App.js é possível testar substituindo essa mensagem por alguma outra como: Bem vindo ao React Native!
    • Salvamos o App.js, vamos no emulador e executamos duas vezes a letra “R” no teclado, para atualizar a mensagem.
    • CTRL + M: Mostra o dev menu, então podemos habilitar o Live Reload e o Hot Reloading.

Abrindo novamente o projeto

Com o ambiente já configurado, para abrir novamente o projeto:

  • Entre na pasta do projeto via linha de comando.
  • Execute o emulador do android conforme sua lista:
    • emulator -no-snapshot -avd Nexus_5X_API_29_x86
  • Execute um novo Build dentro da pasta do projeto:
    • react-native run-android

React e o JSX

JSX é uma extensão de sintaxe para o Javascript e vamos usar junto com o React para definir como a UI deve aparecer e ser estilizada, ou até mesmo para criar os nossos próprios componentes.

Uma boa referência para o JSX:
https://pt-br.reactjs.org/docs/introducing-jsx.html

Exemplo de JSX e estilização:

Tag View, Text e alterando tamanho da fonte, centralização, através do style.

Criando um projeto: Calculadora

Dentro do seu workspace execute o comando:

  • react-native init calculadora

Segue o link do projeto no github:

https://github.com/haylson/react-native-calculadora

Um projeto simples para começar, fazendo uma calculadora para o Android.

O Screenshot da calculadora no meu celular, e vamos para o próximo desafio.

Sobre Haylson Martins

Me chamo Haylson Martins, formado em Sistemas de Informação, trabalho com T.I de forma geral desde 2002 com suporte depois na área de negócio e treinamentos, e com Desenvolvimento para Sistemas Web desde 2010 com linguagem principal o Java. Amo tecnologia, amo aprender coisas novas, gosto de ensinar embora não seja essa a minha pretensão. Por meio desse blog pretendo reforçar o que ando aprendendo e estudando de outras linguagens e tecnologias, e principalmente como uma espécie de bloco de notas para consultas posteriores e quem sabe também ajude outras pessoas que estudam e têm as mesmas dúvidas que já tive ou que ainda tenho. Vamos começar?

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *