Nesse artigo você apredenderá o que é, suas vantagens, algumas funcionalidades importantes, curiosidades a respeito da sua sintaxe e estilos.
Leia até o final e compreenda o presente e o FUTURO dessa tecnologia, e como ela será um divisor de águas para garantir que o seu seja ótimo.
Índice: O que é React Native? | Conhecimento Avançado | Vantagens | Funcionalidades | Sintaxe | Estilos | Futuro do React Native | O seu Futuro como Desenvolvedor
O que é React Native?
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.
Conhecimento avançado
Antes de mais nada, se você está buscando conhecimento avançado sobre React Native, utilize o botão verde a seguir:
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.
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.
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:
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 de interface dos aplicativos
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.
Futuro do React Native
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 Uber, 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.
O seu Futuro como Desenvolvedor
Não há dúvidas: todos os dispositivos eletrônicos estão se tornando inteligentes.
Smartphone, SmartTV, Geladeira Inteligente, Carro Inteligente, Casa Inteligente...
Isso não é o futuro. É o presente!
Esse mercado não tem a menor possibilidade de entrar em crise nos próximos 100 anos, além de pagar MUITO bem.
Criar aplicativos é como dar vida para os dispositivos que facilitam a vida da humanidade.
Dê o próximo passo em direção ao seu futuro clicando aqui e saiba como aprender a criar aplicativos nativos para Android e iOS utilizando a biblioteca React Native, a mesma usada em apps como Facebook, Instagram, Uber, Tesla, Skype e AirBnB.
Documentação do React Native
A documentação do React está disponível em inglês e português do Brasil!
GitHub
Os códigos-fonte do React Native estão no GitHub disponíveis para você iniciar sua utilização.
Perguntas Frequentes
📗 O que é React Native?
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.
🔴 Quais são as principais vantagens do React Native?
1) Todo o código desenvolvido é convertido para a linguagem nativa do sistema operacional.
2) Melhor integração entre funções do celular como câmera, giroscópio, etc.
3) Segurança superior.
4) Melhor performance em geral.
📗 Quais as principais funcionalidades do React Native?
São diversas funcionalidades muito interessantes que aumentam a praticidade e a produtividade do desenvolvimento, mas vale enfatizar 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).
🔴 Como funciona a sintaxe do React Native?
Diferente do React clássico, os elementos não são escritos com as tags HTML, mas sim com tags específicas que convertem diretamente para linguagem nativa.
🔴 Como definir o estilo das aplicações desenvolvidas em React Native?
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.
- Versão inicial escrita por Fernando Kupka e atualmente mantida e atualizada por Lauro Becker.
Dica: A Orgânica é uma agência de Marketing Digital especializada. Saiba mais!
