React Native Series: O que é React Native? Como usar e instalar?

Compartilhe

Compartilhar no facebook
Compartilhar no google
Compartilhar no twitter
Compartilhar no linkedin

O que é React Native?

O React Native é um framework em JavaScript voltado para desenvolvimento Mobile e sendo ele baseado em React.

Desenvolvido pela equipe do Facebook, a grande pegada do React Native é  que ele possibilita o Desenvolvimento Mobile Multiplataforma para Android e iOS, utilizando apenas JavaScript.

Existem outros parecidos no mercado, porém o diferencial dele, é que mesmo sendo Multiplataforma, ele compila em código nativo (Swift, Java) e não em uma Webview.

Como usar e instalar?

A seguir, vou ensinar como funciona  a instalação React Native no macOS :

  1. Instalar o node e Watchman

Para instalar o node e watchman, iremos usar o Homebrew.

brew install node
brew install watchman

view raw
06
hosted with ❤ by GitHub

2 . Instalar o React Native CLI

Iremos instalar ele via npm.

npm install -g react-native-cli

view raw
02
hosted with ❤ by GitHub

3 . Instalar o Xcode e a Ferramentas de linha de comando

Na App Store do seu macOS, procure o Xcode e instale ele.

Depois de instalado o Xcode, abra ele, aceite as licenças que ele solicita, depois disso, com ele ainda aberto, na barra superior do Xcode, vá em Preferências, com a janela aberta, vá na opção Localizações, nela, vá na opção Ferramentas de linha de comando, ao clicar nela, selecione a opção do seu Xcode (Ex: Xcode 10.2.1).

4 . Instalar o Android Studio e JDK

Para utilizar o Android é necessário instalar algumas coisa, porém você instalando o Android Studio, grande parte dele já vem com ele, já o JDK, seria para ter o Java no seu macOS.

Para baixar o Android Studio é necessário baixar ele nesse link:

https://developer.android.com/studio/index.html

Para baixar o JDK é necessário baixar ele nesse link:

https://www.oracle.com/technetwork/pt/java/javase/downloads/jdk8-downloads-2133151.html

5 . Configurando a variável de ambiente do ANDROID_HOME

É necessário configurar essa variável, para que no momento que for executar o android no seu macOS ele saiba onde está seu SDK, por exemplo.

No seu terminal, execute o seguinte comando:

nano ~/.bash_profile

view raw
02
hosted with ❤ by GitHub

No arquivo aberto, iremos adicionar as seguintes linhas:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

view raw
gistfile1.txt
hosted with ❤ by GitHub

Salve e feche o arquivo, depois disso é necessário um “reload” no bash_profile, executando esse comando:

source ~/.bash_profile

view raw
04
hosted with ❤ by GitHub

6 . Criando um projeto React Native

Depois de realizar as configurações acima, teoricamente, já é possível criar um projeto em React Native sem dor de cabeça.

Abra o seu terminal em uma pasta de sua preferência e execute os seguintes códigos em seu terminal:

react-native init MyNewProject
cd MyNewProject
react-native run-ios

view raw
05
hosted with ❤ by GitHub

Para iOS, execute:

react-native run-ios

view raw
08
hosted with ❤ by GitHub

Para Android, faça os seguintes passos:

  • Abra o seu Android Studio
  • Crie qualquer projeto
  • Depois do projeto criado, man barra superior, procure pela opção AVD Manager e clique nela
  • Aberta a janela de AVD’s, click Play do emulador já criado default. Caso não tenha nenhum emulador, crie um em Criar novo Device.
  • Com o emulador do device aberto, no  raiz do seu projeto, pelo terminal, execute: 
react-native run-android

view raw
09
hosted with ❤ by GitHub

Esse processo pode levar um tempo, apenas aguarde.

Se tudo saiu certo, conforme o esperado, no caso do iOS, será aberto o simulador do iOS  e nele depois de um tempo será aberto o seu App em React Native, no caso do Android, com o emulador já aberto do Android, será aberto o seu App em React Native.

O React Native pega apenas no macOS?

Não, não, também pega em Windows e Linux, porém para executar o simulador do iOS real, apenas no macOS.

Existe um modo de usar o simulador do iOS no Windows e Linux, usando Expo, mas no caso, para usar Expo, esse tutorial não atende a ele, pois seria de outro modo bem diferente.

Os próximos passos …

O React Native Series será uma série onde irei ensinar um passo a passo de como fazer uma aplicação simples em React Native.

Qual seria essa aplicação? Isso vocês vão saber nos próximos capítulos dessa série, então não deixem de acompanhar, toda semana sairá uma parte.

Valeu! Até mais o/

Deixe um comentário

Categorias

Posts relacionados

Siga-nos

Baixe nosso e-book!

%d blogueiros gostam disto: