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

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.

2 . Instalar o React Native CLI

Iremos instalar ele via npm.

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:

No arquivo aberto, iremos adicionar as seguintes linhas:

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

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:

Para iOS, execute:

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: 

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/