Um guia completo de React Native

O desenvolvimento móvel está em alta, e o Facebook não pode ser deixado para trás por sua própria estrutura. O React Native é um framework de desenvolvimento móvel relativamente novo, mas já possui um grande número de usuários e um histórico de projetos respeitado.

Neste guia completo do React Native, aprenderemos mais sobre o poder dessa tecnologia, uma estrutura JavaScript para criar aplicativos nativos para dispositivos móveis.

O que é React Native?

O React Native, projeto open source mantido pelo Facebook, percebeu que um grande número de aplicativos estava sendo criado e decidiu lançar sua própria solução em 2015.

Mesmo com pouco tempo de lançamento, possui muitos casos de sucesso desenvolvidos utilizando seu ambiente de programação.

Seu principal conceito é construir interfaces usando componentes, renderizando nativamente aplicativos Android e iOS baseados em React.

“Aprenda uma vez, escreva em qualquer lugar”, ou em português, aprenda uma vez, escreva em qualquer lugar. Respondendo a esse dilema, o React Native cumpre sua promessa de desenvolver para Android e iOS usando a mesma base de código.

Por que usar React Native?

É uma tecnologia nova, mas já é muito popular e está ganhando aceitação no mundo do desenvolvimento rapidamente.

Introduzido pelo Facebook por um motivo, mas permitindo o desenvolvimento apenas com JavaScript na criação na tela, ações, elementos de desenvolvimento, entradas de texto, botões e qualquer item de item, encapsular todo o código nativo é a principal vantagem de escolher um projeto.

React Native vs Flutter

Quanto à tecnologia híbrida, o React Native cria componentes nativos na tela, não cria visualizações da web em HTML, IS, CSS, não é uma biblioteca híbrida, portanto renderiza componentes nativos.

Gigantes que utilizam React Native

O React Native foi lançado com essa proposta em busca de desenvolver um aplicativo que proporcione aos usuários uma experiência nativa de alto desempenho.

Esses resultados são comprovados quando vemos nomes como Facebook Ads, Uber Eats, AirBnB, Discord, Instagram, Walmart desenvolvendo aplicativos escaláveis ​​com alta demanda.

Combinando todos os benefícios de aplicativos nativos com um processo de desenvolvimento semelhante à web e fácil portabilidade entre plataformas e dispositivos, provou ser uma das melhores soluções para desenvolvimento móvel.

Programação em React Native

Tornar-se um desenvolvedor é uma tarefa que exige planejamento e dedicação. Podemos acessar facilmente as informações e, ao mesmo tempo, sem organização, os resultados podem ser difíceis e demorados.

Por isso, é importante:

Ordenar os conteúdos;
Delimitar prazos;
Montar ciclos que trabalham fundamentos e prática de exercícios;
Relacionar teoria com a prática;

Montar práticas com cenários reais.

Essas são as formas que tenho conseguido construir o processo de aprendizagem, e tenho obtido resultados com maior agilidade e motivação para aprender e desenvolver projetos mais desafiadores.

Quais são os desafios de fazer um aplicativo em React Native?

Desenvolver um aplicativo em qualquer linguagem exige cuidados, como analisar onde quero usar essa solução em termos de desempenho, escalabilidade e usabilidade.

Mas não importa qual decisão seja tomada, configurar o ambiente de programação e gerenciar o progresso do desenvolvimento são a base para os resultados esperados.

Diante disso, manter ferramentas de fácil comunicação, preferencialmente aquelas que componham o mesmo campo técnico, ajuda muito!

Além de ter uma comunidade forte, também pode crescer com muita colaboração. Esses são pontos importantes para facilitar a criação de projetos em React Native.

Ferramentas para configurar o ambiente de desenvolvimento
Editor

O editor é uma ferramenta para programar, organizar pastas de projetos, configurar dependências e todos os outros detalhes do projeto.

O editor de código que uso para criar aplicativos móveis é o Visual Studio Code da Microsoft.

Ele permite coisas como preenchimento automático, depuração e outros recursos que existem apenas em IDEs. O VSCode não é obrigatório, você pode usar o que quiser. Eu recomendo: Visual Studio Code, Sublime Text, Atom, Vim.

Emulador

Para testar nosso aplicativo em um dispositivo real, usaremos emuladores, que são aplicativos que imitam a funcionalidade de dispositivos físicos em nosso sistema.

Uma desvantagem do Windows e do Linux é que ainda não é possível configurar o simulador do iOS nativo.

Para ter um ambiente de desenvolvimento Android, vamos instalar o Android SDK com outras ferramentas para rodar nosso aplicativo no emulador.

No final deste guia, você também pode emular seu aplicativo em um dispositivo físico usando USB. O ambiente Android pode ser configurado no Mac OS X, Linux e Windows.

Usaremos o Genymotion como o emulador do Android.

Escolhemos o Genymotion porque é mais estável e rápido, mas você pode optar por usar o emulador do Android Studio. Antes de instalar o Genymotion, vamos instalar o VirtualBox.

Para ambiente Linux, basta executar o seguinte comando no terminal:

sudo apt-get install virtualbox

Para ambientes Mac OS X ou Windows, você pode instalá-lo ou optar por instalá-lo junto com o Genymotion.

Agora vamos visitar o site do Genymotion e clicar no botão “Baixar Genymotion Personal Edition”.

O Genymotion solicitará que você crie uma conta na plataforma, passe pelo processo e, em seguida, você poderá fazer o download do software.

Agora, em um ambiente Mac OSX ou Windows, basta instalar o software e abri-lo através de seu executável.

Se você estiver no Linux, precisamos passar por mais um processo: extrair o arquivo .bin baixado do site do Genymotion em uma pasta de sua preferência e acessar pelo terminal.

Visite a pasta extraída e execute os seguintes comandos:

Com isso, o Genymotion será instalado em seu sistema e agora você poderá acessá-lo a partir da pasta de instalação.

Por padrão, a pasta onde o Genymotion está instalado é

Acesse esta pasta via Terminal e execute o seguinte comando para abrir o Genymotion:

Abra o Genymotion, vamos nas preferências e clique no botão “Configurações”. Na guia Contas, faça login com a conta que você criou no site da Genymotion.
Uma vez logado, ainda no menu Configurações, na aba ADB, precisamos informar o caminho do nosso Android SDK.

Selecione a opção Use Custom Android SDK Tools no Genymotion e use o caminho descompactado para o arquivo que você baixou do site Android anteriormente. Por exemplo: .

Agora, feche as configurações e volte para a tela principal do Genymotion para adicionar um emulador específico.

Estarei usando o Samsung Galaxy S8 – 7.0.0 API 24, mas aqui você pode escolher a opção que funciona melhor para você, tente sempre usar a versão mais recente do Android.

Selecione a opção e clique em Next.

Depois disso, ele pedirá o nome do emulador, digite um nome que você goste ou mantenha o padrão.

Depois disso, clique em next novamente e aguarde o download das dependências. Após concluir o processo, você terá um novo emulador na lista inicial do Genymotion:

Clique duas vezes no emulador para executar o ambiente Android.

Se você encontrar algum erro ao longo do caminho, recomendo executar a máquina virtual Android diretamente pelo VirtualBox, pois assim você obterá um log de inicialização do ambiente com todos os possíveis erros.

A etapa final é conectar o emulador ao ADB através do IP do dispositivo. Para verificar o IP do dispositivo, basta esticar a janela do simulador e o IP estará no título da janela. Em um terminal, execute o comando.

Logo após, rode:

Se o nome do seu dispositivo aparecer na lista, seu emulador foi conectado com sucesso!

Depois de abrir o emulador, basta executar na pasta do seu projeto.

Reagir nativo no Windows

Em sistemas Windows, instalaremos essas bibliotecas usando o gerenciador de pacotes.

Para configurar o ambiente Android no Windows, precisamos instalar quatro dependências: Node, Python2, JDK e Android SDK.

Para concluir essas dependências, precisamos instalar o Chocolatey e outras dependências, instalar e configurar o Android SDK e instalar e configurar o emulador Genymotion.

Instalaremos essas bibliotecas no Windows usando um gerenciador de pacotes do Windows chamado Chocolatey. Esta ferramenta permite instalar dependências e ferramentas no sistema com poucos comandos e tudo pelo terminal.

Use a tecla Windows + X ou clique com o botão direito do mouse no botão Iniciar para executar o prompt de comando ou o powershell como administrador.

Agora você tem que executar o comando de acordo com a opção que você clicou.

Se a opção que você clicou for chamada de Prompt de Comando, execute o seguinte comando na janela que se abre para instalar o Chocolatey:

Se a opção for Powershell, execute o seguinte comando para verificar se você tem permissão para instalar as dependências usando o terminal:

Obtenha a estratégia de execução

Se o retorno deste comando for “Restricted”, execute o próximo comando em seu terminal, caso contrário, continue para a próxima etapa:

Definir política de execução AllSigned

Agora, execute o seguinte comando para instalar o Chocolatey:

Desvio de Política de Execução de Conjunto – Processo de Escopo – Força; ou seja,

Agora, teste se a instalação está correta executando o seguinte comando no terminal (nada acontecerá, mas não deve retornar um erro). Durante esta etapa, pode ser necessário reiniciar o terminal.

lula

Agora vamos instalar o Node, Python2 e JDK8 (Java Development Kit 8).

Se o NodeJS já estiver instalado em sua máquina, certifique-se de que sua versão seja superior a 7, se você possui o JDK instalado em sua máquina, certifique-se de que sua versão seja 8.

Agora que as dependências estão instaladas, vamos instalar o React Native CLI (Command Line Interface) que nos ajudará a criar e testar novos projetos. Durante esta etapa, talvez seja necessário reiniciar o terminal para que o comando entre em vigor.

Se tudo correr bem até agora, você poderá executar os seguintes comandos:

Este comando deve exibir uma lista de comandos que podem ser executados usando a CLI do React Native.

Agora, vamos configurar o Android SDK no Windows, crie uma pasta no local desejado para instalar o SDK. Por exemplo, C:\Android\Sdk

Anote esse caminho para uso posterior.

Na opção Somente ferramentas de linha de comando, baixe o SDK para seu sistema operacional.

Após feito o Download, extraia o conteúdo do pacote para a pasta criada no passo anterior.

Agora, no Painel de Controle do Windows:

Abra o item “Sistema e Segurança” ou “Sistema”;
Clique em “Configurações avançadas do sistema”;
Selecione “Variáveis de ambiente”;
Clique no botão “Nova variável de ambiente”;
Indique o nome da variável como

Adicione o caminho usado acima como segundo parâmetro e clique em OK.

Na mesma janela Variáveis ​​de Ambiente no Windows, clique na variável PATH e, em seguida, clique em Editar. Haverá uma lista de caminhos e você deve adicionar esses dois novos caminhos ao final da lista:

Se sua versão do Windows for inferior a 10, sempre use um ponto e vírgula “;” no final do caminho, para que eles não se juntem.

Agora, abra um prompt de comando ou PowerShell como administrador e execute os seguintes comandos:

Command Prompt

*Aceite todas licenças digitando quando necessário.

React Native no Ambiente Linux
Em sistemas de ambiente Linux, instale a biblioteca via apt-get.

Para configurar o ambiente Android no Linux, precisamos:

Instale NodeJS, JDK e outras dependências: instale dependências, instale
Android SDK: Configure o SDK, instale e configure o emulador
Genymotion: Configure o emulador. Instale dependências.
Para configurar o ambiente Android no Linux, precisamos instalar 2 dependências: Node e JDK.

Ubuntu (deb), instale CURL.

Certifique-se de ter o CURL instalado executando o seguinte comando em um terminal:

Instale o NodeJS, agora que o CURL está instalado, vamos instalá-lo no NodeJS usando o seguinte comando:

Se você não estiver em uma distribuição Debian/Ubuntu, siga os passos de instalação de acordo com seu sistema:

Instale a CLI do React Native. Após instalar o NodeJS, podemos instalar o React Native CLI (interface de linha de comando):

Instale o JDK (Java Development Kit). Agora precisamos instalar o JDK (Java Development Kit) na versão 8 usando o seguinte comando:

A versão 8 do JDK é obrigatória, não use versões mais recentes. Podemos testar a instalação do JDK com o seguinte comando:

Versão java

Se você tiver outra versão do Java, poderá selecionar a versão 8 como a versão padrão com o seguinte comando:

Instale a biblioteca de gráficos. Na maioria das vezes, precisamos instalar algumas bibliotecas da versão 32 bits do Linux para simular nosso projeto, para isso usaremos o seguinte comando:

Arco Linux. Instale o NodeJS. Vamos instalar o NodeJS com o seguinte comando:

Instale a CLI do React Native. Após instalar o NodeJS, podemos instalar o React Native CLI (interface de linha de comando):

Instale o JDK (Java Development Kit). Agora precisamos instalar o JDK (Java Development Kit) na versão 8 usando o seguinte comando:

A versão 8 do JDK é obrigatória, não use versões mais recentes. Para fazer isso, podemos defini-lo como padrão com o seguinte comando:

conjunto

Instale a biblioteca de gráficos. Na maioria das vezes, precisamos instalar algumas bibliotecas da versão 32 bits do Linux para simular nosso projeto, para isso usaremos o seguinte comando para habilitar o repositório multilib:

Configure o SDK do Android no Linux. Crie uma pasta no local desejado para instalar o SDK. antecessor:

Anote esse caminho para uso posterior.

Na opção “Somente ferramentas de linha de comando”, baixe o SDK para seu sistema operacional. Após o download, extraia o conteúdo do pacote na pasta criada na etapa anterior.

Com este endereço, precisamos configurar algumas variáveis ​​de ambiente em nosso sistema, procure o primeiro dos seguintes arquivos em seu sistema:

Adicione essas três linhas no arquivo (de preferência no início):

Se nenhum desses arquivos existir, crie /bash_profile. Se você estiver usando uma pasta diferente para o Android SDK, faça as alterações acima. Agora, abra um terminal e execute os seguintes comandos:

Aceite todas licenças digitando, caso necessário.

React Native no Ambiente MacOS

Instale libs via Homebrew, instale NodeJS, JDK e outras dependências: Instale dependências, instale e configure o Android SDK:

Configure o SDK, instale e configure o emulador Genymotion: Configure o emulador.

Instalar dependências. Para configurar o ambiente Android no macOS, precisamos instalar 3 dependências: Node, Watchman e JDK.

Para a maioria desses pacotes, usaremos o Homebrew para instalá-los.

Instale o Homebrew, um gerenciador de pacotes do OS X muito conhecido e útil. Vamos instalá-lo em nosso sistema usando o seguinte comando:

Instalando Node e Watchman, com o Homebrew instalado, vamos instalar o NodeJS e o Watchman:

Com o React Native CLI instalado, o NodeJS instalado, podemos ir em frente e instalar o CLI do React Native (Command Line Interface):

Instale o JDK (Java Development Kit), a última coisa a instalar é o Java JDK (Java Development Kit), que pode ser baixado no link.

Após a instalação, execute o .dmg e siga as etapas do instalador para instalar.

Para configurar o Android SDK em macos, crie uma pasta no local desejado para instalar o SDK. Por exemplo:

* Observe este caminho para uso posterior

Visite o Android Developer e baixe o SDK para o seu sistema operacional na opção “Somente ferramentas de linha de comando”.

Após o download, extraia o conteúdo do pacote na pasta criada na etapa anterior.

Com este endereço, precisamos configurar algumas variáveis ​​de ambiente em nosso sistema, procure o primeiro dos seguintes arquivos em seu sistema: , e coloque isso Adicione três linhas a o arquivo (de preferência no início):

Se nenhum desses arquivos existir, crie um arquivo de configuração  Se você estiver usando uma pasta diferente para o Android SDK, faça as alterações acima.

Agora, abra um terminal e execute os seguintes comandos:

Se necessário, aceite todas as licenças digitando.

Treinamento de React Native

Vou começar a programar com React Native, mas por onde começo? Pesquise na internet para encontrar um conteúdo muito bom e completo.

Acredito que o processo de aprendizado de se tornar um desenvolvedor começa com tutoriais, aprendendo o básico de linguagens, no nosso caso JavaScript e ES6, aprendendo teoria de framework e projetos práticos. Obviamente, executar esse loop aumenta a dificuldade da tarefa que está sendo executada.

Listei abaixo excelentes treinamentos para dar os primeiros passos em direção aos primeiros projetos completos como Rocketseat e Tiago Gouvea.

Então, acabei com este guia completo de React Native, o que considero os projetos mais difíceis para iniciantes, então simplesmente os dividi em alguns tópicos.

As etapas para criar um aplicativo em React Native são deixadas para o próximo artigo. Espero que você goste.