React Native: como desenvolver aplicativos React para iOS e Android

Udacity Brasil
1 de mai de 2018

Criado por uma equipe de engenheiros do Facebook, o React Native é um framework baseado na biblioteca de JavaScript React e que permite o desenvolvimento de aplicações móveis nativas para aparelhos iOS e Android.

Por sua praticidade, o React Native já é utilizado por centenas de outras empresas, como Instagram, Airbnb, Walmart e Skype. Trata-se de uma excelente escolha para quem pretende desenvolver apps móveis nativos rapidamente.

Sua principal característica é a possibilidade de criar um aplicativo mobile nativo em JavaScript. Na prática, isso significa que um app feito com o React Native não é uma aplicação para web compatível com mobile ou um app híbrido: é um app para iOS ou Android indistinguível de outro escrito em Swift ou Java.

Conheça: Aprenda React e React Native com a Udacity

Do React ao React Native

Para entender melhor o que é o React Native e como ele funciona, vale a pena traçar a sua origem desde o React, também chamado de React.js.

Basicamente, trata-se de uma biblioteca JavaScript utilizada para a criação de interfaces visuais na web. Criada por Jordan Walke, engenheiro de software no Facebook, foi utilizada pela primeira vez para renderizar o feed de notícias da rede social em 2011 e passou a ser adotada pelo Instagram no ano seguinte.

Em maio de 2013, o projeto se tornou um código aberto durante a JSConf US e, a partir dali, se popularizou na comunidade do Node.js. Hoje está entre as bibliotecas mais populares (e adoradas) do mundo.

Apesar de ser apenas uma biblioteca para renderização de visualizações, sua popularização fez surgir um ecossistema com ferramentas e técnicas para o desenvolvimento.

Há cinco anos, durante um hackathon interno no Facebook, surgiu a ideia que levaria o React às plataformas móveis. O projeto levou dois anos para ser oficialmente anunciado e, em março de 2015, também se tornou open source.

Leia: As 5 linguagens de programação mais queridas de 2018: conheça o perfil de cada uma

As vantagens do React Native

Desenvolvedores familiarizados com o React e acostumados a escrever em JavaScript muitas vezes simpatizam com o React Native apenas pelo fato de que, com ele, é possível desenvolver para iOS e Android sem ficar preso às linguagens mais utilizadas para esse fim, como Swift, Java ou Kotlin.

As vantagens, no entanto, vão muito além disso. Este framework permite a criação de uma interface de usuário mobile a partir de componentes declarativos (um dos grandes destaques do React) e pode ser integrado a apps já desenvolvidos para a criação de novas funcionalidades ou reajuste de elementos existentes.

O próprio aplicativo do Facebook para dispositivos móveis, por exemplo, teve uma parte escrita em React Native e outra em Swift/Java.

Além disso, o código em JavaScript pode ser aproveitado tanto no iOS quanto no Android, o que facilita imensamente o desenvolvimento paralelo nas duas plataformas, já que elimina a necessidade de reescrever porções grandes do código na hora de portar o aplicativo para uma ou outra.

Uma outra vantagem para desenvolvedores é que praticamente todas as bibliotecas JavaScript já são compatíveis com o React Native, o que pode facilitar e agilizar bastante o desenvolvimento de aplicações.

Por fim, vale a pena destacar o Hot Reloading, uma ferramenta que permite recarregar o código em menos de um segundo após pequenas modificações, sem a necessidade de recompilar tudo novamente.

Em suma, o React Native traz algo precioso para esse mercado: a rapidez.

Leia: Como se tornar um desenvolvedor Android

Diferenças na sintaxe do React Native

Quem começa a desenvolver no React Native perceberá algumas diferenças significativas na sintaxe. A principal delas é a ausência de tags HTML, como < div >, < img > e < span >, que são substituídas por < View >, < Image > e < Text >, componentes que serão convertidos para a linguagem nativa.

E quando é preciso escrever algo específico e personalizado para determinada plataforma, existem componentes com sufixos do sistema operacional, como < NavigationIOS > ou < SwitchAndroid > .

Para quem já está acostumado com o JavaScript, não é difícil aprender e se adaptar aos novos elementos, que são apenas detalhes no desenvolvimento.

Leia: 7 habilidades que um desenvolvedor iOS precisa dominar

Construindo um aplicativo em React Native

A forma mais fácil de começar a desenvolver um app com o React Native é utilizando o Create React Native App, uma ferramenta que vai eliminar a necessidade da instalação do Xcode ou Android Studio para gerar IPAs e APKs.

Considerando que o Node.js já está instalado, basta utilizar o gerenciador npm para criar um projeto, que terá um código QR próprio. Esse QR será escaneado pelo aplicativo Expo, instalado em um dispositivo iOS ou Android na mesma rede que o computador do desenvolvedor.

Uma vez que o QR tenha sido escaneado, ele já começa a rodar no smartphone como um app nativo. Sempre que alterações e novas funcionalidades forem implementadas, o aplicativo recarregará automaticamente.

Esse caminho simples permite que desenvolvedores rodem facilmente os aplicativos criados no React Native em dispositivos reais, sem a necessidade de configurar todos os detalhes do ambiente de desenvolvimento ou exportar versões para cada uma das plataformas.

O único detalhe é que o Create React Native App não permite alterações no código nativo. Isso significa que, caso mudanças sejam necessárias, é preciso ejetar o app e continuar o seu desenvolvimento normalmente.

E atenção na hora de publicar o app em suas respectivas lojas: será necessário instalar e configurar o Xcode – que funciona apenas em computadores da Apple – para gerar o IPA que será enviado para a App Store ou o Android Studio, que vai exportar o APK para a Google Play.

8 apps construídos com React Native

Para se inspirar em relação às vantagens e possibilidades desse framework, você pode explorar apps construídos com React Native. A lista é crescente e inclui algumas das maiores empresas do mundo, de Bloomberg à Uber:

Não é preciso, no entanto, ter uma equipe gigante ou um bolso fundo para utilizar suas funcionalidades – pelo contrário. "O principal motivo que nos levou a usar React Native foi a falta de engenheiros mobile suficientes para começar a desenvolver um novo app", explicou Jan Monschke, engenheiro de frontend da Soundcloud, ao NetGuru. "Este é provavelmente um dos grandes argumentos para usar React Native, se você estiver em uma posição parecida."

Pronto para testar o React Native? Saiba mais sobre a ferramenta aqui!