O que é React Native?



Por   

 08/09/2019 

Atuando desde 2005 com tecnologia e internet, concebendo e desenvolvendo processos de inovação.

O React Native é um framework baseado no já aclamado React, desenvolvido pela equipe do Facebook, que possibilita o desenvolvimento de aplicações mobile, tanto para Android, como para iOS, utilizando apenas Javascript

Olhando por esse lado, não parece ser nada surpreendente, nem inovador, pois já existem inúmeros frameworks que empacotam aplicações web em uma espécie de “browser”, como o Cordova, ou o Manifold.js, porém o React Native é diferente, pois todo o código desenvolvido é convertido para a linguagem nativa do sistema operacional.

Vantagens

As principais vantagens de uma aplicação nativa sobre uma aplicação web mobile são:

  • Experiência do usuário fluída;
  • Carregamentos em geral mais rápidos;
  • Melhor integração entre funções do celular como câmera, giroscópio, etc;
  • Segurança superior;
  • Melhor performance em geral.

Antes do surgimento do React Native, desenvolver para Android e iOS era algo relativamente complexo, pois além de ter que aprender as linguagens Objective-C (iOS) e Java (Android), o desenvolvedor não aproveitava praticamente nada do código de uma plataforma para outra, fazendo assim com que as empresas contratassem um time de desenvolvimento para cada sistema operacional, tornando o projeto muito lento e caro. Porém, com o React Native, o código pode ser reaproveitado em até 100% entre as plataformas, podendo fazer com que o custo e a duração do projeto caiam pela metade.

Dica: Leia também nosso artigo: O que é AMP?

Sintaxe

Diferente do React ‘clássico’, os elementos não são escritos com as tags HTML:

<div>, <span>, <ul>

Mas sim com elementos que convertem diretamente para linguagem nativa, na tabela abaixo estão alguns exemplos de tags no React Native:

Tabela Elementos

Além disso existem elementos específicos para cada plataforma (que normalmente contém o sufixo do sistema operacional), como:

<DatePickerIOS/>, <NavigationIOS/>, <SwitchIOS> e <SwitchAndroid>

Estilos

Na maioria dos frameworks, costumamos utilizar arquivos de estilos separadamente, e podem ser escritos em CSS, SASS ou LESS, porém o React Native traz uma abordagem muito diferente, com estilos inline e utilizando Javascript. Isso pode parecer estranho e feio no início, porém existem várias abordagens que fazem com que você não precise estilizar item por item, por exemplo criar um objeto de estilo que você pode reutilizar em diversos elementos, como mostra no exemplo abaixo:

var styles = Stylesheet.create({
    button:    {
        borderRadius: '5px',
        backgroundColor:  '#B420FF’,
        flex: 1
     },
     accentText:    {
        fontSize: 18,
        fontWeight: 'bold'
     }
});
var MainButton = React.createClass({
    render: function() {
        return (
            <Text style={[styles.button, styles.accentText]}>
                “Olá Mundo”
            </Text>
        )
   }
})

Utilizando os estilos dessa forma, podemos criar um modelo de “cascata”, assim como no CSS, trazendo diversas possibilidades. Outra vantagem gigante do React Native é a customização de layouts, que é feita inteiramente por meio do Flexbox, utilizado da mesma maneira que no CSS padrão.

Dica:

Funcionalidades

O React Native possui diversas funcionalidades muito interessantes que aumentam a praticidade e a produtividade do desenvolvimento. Uma delas é o Hot Reloading, que faz com que o programa fique rodando em desenvolvimento, e a cada atualização no código uma versão nova do arquivo modificado é injetado na aplicação, levando menos de 1 segundo para atualizar (mesmo com aplicações grandes e complexas). Para o desenvolvimento mobile isso é um grande passo, pois em outros frameworks nativos, a cada mudança no código, a aplicação precisava ser recompilada por completo, levando muito mais tempo.

Existe também a possibilidade de depurar a aplicação via Google Chrome, como se fosse uma aplicação web padrão, o que ajuda muito os desenvolvedores web que já estão acostumados a utilizar o Dev Tools. Outra feature interessante do React Native é a possibilidade de combinar seu código Javascript com algum código nativo em Objective-C, Java ou Swift, caso você queira utilizar componentes já prontos, ou otimizar alguns aspectos da sua aplicação.

Futuro

Após o anúncio do React Native, feito na ReactConf 2015 (maior conferência de React do mundo, que ocorre no escritório do Facebook, na Califórnia), o código do framework foi colocado no Github, com isso milhares de desenvolvedores se engajaram para contribuir com a ferramenta, que já ultrapassa 10.000 commits.

Diversos aplicativos de empresas gigantes já foram desenvolvidos com React Native como o Airbnb, Instagram, Baidu Mobile, Vogue App, Facebook Ads Manager e diversos outros, sendo o Facebook Groups o primeiro app feito 100% com o framework.

Mesmo ainda não sendo uma plataforma totalmente estável e ‘madura’, o React Native é sem dúvidas uma das maiores promessas para o desenvolvimento mobile em um futuro próximo, pois o número de desenvolvedores web é cada vez maior e é muito mais prático para esse desenvolvedores utilizar uma linguagem que já estão familiarizadas do que aprender linguagens e paradigmas de programação novos para criar um aplicativo mobile.

- Escrito Fernando Kupka.



Assine nosso blog

Não perca nenhuma novidade!

Assine nosso blog

Não perca nenhuma novidade!