React Native é um framework baseado no Javascript que utiliza JSX, estados e props para construir um sistema. Com ele é possível criar aplicações mobiles que são renderizadas de forma nativa no iOs e Android. Toda sua arquitetura de software se baseia em nos conceitos introduzidos pelo React (biblioteca core do RN).

Ao invés de manipular os DOM’s (Document Object Model) manualmente, o React faz o intermédio dessas alterações, deixando o trabalho para dev’s mais enxuto e prático. Esse modelo de desenvolvimento “explodiu” no mundo Web e agora está em expansão no mundo Mobile com o RN.

Figura 1 – Comparação React vs manipulação tradicional, por AltexSoft

De forma conceitual o que o React Native faz é bem simples: toda interface da aplicação é criada utilizando JSX, uma junção de lógica com a UI, posteriormente quando essa aplicação estiver rodando em um smartphone o RN faz o papel de intermediário, transformando os blocos de JSX em componentes nativos de cada sistema operacional, portanto fornecendo uma experiência nativa para o usuário mesmo que toda a aplicação tenha sido construída com base no Javascript.

Figura 2 – Fluxo de renderização React Native

Vamos começar com react native?!

Caso você tenha assistido nossa apresentação (se não assistiu não sabe o que está perdendo) você notou que apenas apresentamos os conceitos e as vantagens do React Native mas não construímos nada de fato: agora é a hora de colocar a mão na massa!

Instalação

Primeiramente precisando instalar o react-native-cli, responsável por gerenciar as criações, modificações e links dentro do nosso projeto. Contando que você já tenha o NodeJs instalado na sua máquina basta abrir um terminal e executar o seguinte comando.

npm i -g react-native-cli

Obs: Em sistemas baseados no Unix talvez seja necessário executar o comando acima como sudo.

Criação do projeto

Navegue até o diretório desejado para criação e abra-o no terminal. Execute o seguinte comando para então criar de fato o projeto.

react-native init nome_do_projeto

Substitua nome_do_projeto pelo nome desejado, nesse caso irei nomeá-lo de tutorial. Logo após rodar o comando, será criada uma pasta com o nome escolhido e todas as dependências do React Native serão automaticamente instaladas. Abra o diretório com o seu editor de textos favorito e vamos executá-lo para termos certeza que tudo está funcionando como deveria.

Executando a aplicação

Para rodar a aplicação no emulador ou até mesmo no seu celular precisamos configurar os ambientes de cada plataforma: Android e iOs. Ambas instalações variam de acordo com o seu S.O. e, portanto, estarei apenas disponibilizando os guias para os respectivos guias, dessa forma podemos focar no projeto em si.

Figura 3 – Estrutura do projeto

Agora já temos tudo o que é necessário para de fato começarmos o desenvolvimento. Entretanto, é importante conhecer o significado de alguns desses arquivos e pastas.

• /node_modules: Aqui ficam todos as dependências do projeto, gerenciadas pelo yarn ou npm, geralmente. Nunca mexa diretamente nessa pasta, os arquivos aqui são locais e quaisquer alterações não serão replicadas para seus colegas de desenvolvimento.

• /android e /ios: Pastas respectivas de cada sistema operacional, contém todos os arquivos necessários para executar a aplicação em cada plataforma.

• App.js: Aqui está presente o primeiro componente da aplicação e que engloba todo o resto. Nesse arquivo são feitas algumas configurações globais nos componentes que envolvem a aplicação, principalmente quando se trabalha com outros gerenciadores de estado.

• index.js: De fato o primeiro arquivo a ser executado em todo o projeto. Aqui é registada a aplicação do React Native para que ela possa ser executada.

Primeiro componente

Vamos modificar o arquivo App.js para criarmos um contador simples: toda vez que o usuário clicar no botão o contador incrementa em uma unidade. Apesar de ser bem trivial isso vai criar uma oportunidade para trabalharmos com o state do componente.

Primeiramente vamos dar uma olhada na estrutura JSX do arquivo. Aqui é necessário que você delete todo o conteúdo desse arquivo, o RN por padrão gera alguns códigos de exemplos mas nesse caso não precisamos pois usaremos um código próprio.

Figura 4- Arquivo App.js – Estrutura JSX

Nas duas primeiras linhas importamos os componentes e bibliotecas necessários. Como estamos criando um componente com JSX é necessário importar o React para que ele registre essa classe automaticamente. Na segunda linha importamos os componentes visuais do React Native, todos esses podem ser consultados na documentação oficial para mais detalhes de como podem ser utilizados.

Logo após criamos e exportamos uma classe chamada App (essa é a classe importada pelo arquivo index.js) que estende as propriedades da classe Component, disponibilizada pelo React. Na linha 5 inicializamos o estado do componente como um objeto com a propriedade counter que inicia com o valor 0.

No método render retornamos uma estrutura JSX representando o layout do componente. Uma View encapsula um texto e um botão, no texto exibimos a seguinte frase: Counter: {this.state.counter}. Nesse trecho estamos inserindo o valor da variável counter dentro do texto. No botão definimos um title e passamos uma função para o prop onPress; essa função será executada  assim que o usuário pressionar o botão. Nela executamos this.setState para definirmos um novo estado do componente, sobrescrevendo o anterior. O novo valor é o anterior mais 1, incrementando nosso contador.

Provavelmente você deve ter percebido que não citei os props style passados para a View e o Text, isso é porque declaramos os estilos visuais da aplicação fora do componente, geralmente logo abaixo dele.

Figura 4 – Estilização

Nesse trecho o código se assemelha muito de arquivo CSS, mas isso é intencional. Os nomes dos estilos e suas funções são muito parecidas com as presentes no CSS tradicional, portanto, se quiser, brinque com os valores e as propriedades para experimentar novos estilos no seu componente.

O layout final ficará parecido com a imagem abaixo e a cada clique no botão Incrementar o valor subirá em uma unidade.

Figura 5 – Aplicação final

Conclusão

React Native é um framework poderoso, na apresentação vimos como ele funciona por trás e suas vantagens durante o desenvolvimento – a possibilidade de reutilização de código traz um benefício gigante na velocidade do projeto além da redução de custos.

Agora você pode continuar explorando esse vasto mundo com um pouco mais de conhecimento, ao menos sabendo como funciona uma aplicação básica e como o RN de fato trabalha.

A documentação oficial é sua melhor amiga nesses casos e muitos outros artigos lhe ajudarão nessa jornada.