Olá, estudante! Chegou o momento de você conhecer o framework React Native, o responsável por “empacotar” seu código HTML5, CSS3 e JavaScript em uma bela aplicação para Android e/ou iOS. Mas, afinal, o que é o React Native? Segundo Escudelario e Pinho (2021), pode-se definir o React Native como um framework que consiste em uma série de ferramentas que viabilizam a criação de aplicações mobile nativas (Android e iOS), utilizando o que há de mais moderno no desenvolvimento Front-End. Pode ser considerada a melhor opção no mercado quando se fala em desenvolvimento híbrido de aplicativos para dispositivos móveis.

Uma das grandes características do React Native é o fato de o “empacotamento”, conforme já citamos, ser, na verdade, uma conversão de todo código desenvolvido para a linguagem nativa do sistema operacional do aparelho.

Portanto, o objetivo desta lição é trazer um pouco de conhecimento acerca do React Native. Dessa forma, veremos como criar, por meio dele, componentes reutilizáveis, as boas práticas e a refatoração. Além disso, veremos quando se trabalhar com o framework e, finalmente, como funcionam as Functions Components e dois tipos de componentes do React Native: AsyncStorage e Navegação.

O grande problema do desenvolvimento de aplicativos para dispositivos móveis sempre foi a relação entre a linguagem de programação e a plataforma, ou seja, o sistema operacional do dispositivo. Esse problema ocorria porque o(a) desenvolvedor(a) que queria iniciar nessa área deveria escolher uma das plataformas para, então, estudar todo o universo de linguagens e ambientes dessa plataforma e, ao final, conseguir desenvolver aplicativos somente para Android ou para iOS.

Em lições anteriores, apresentamos o grande impacto do desenvolvimento híbrido mobile, em que, ao invés de conhecer todas as linguagens das plataformas disponíveis, você precisa conhecer: (I) HTML5, CSS3 e JavaScript; (II) tecnologias amplamente utilizadas no desenvolvimento web; e (III) tecnologia adicional, para que seja efetuado o “envelopamento” da aplicação para cada uma das plataformas já citadas. 

Portanto, por meio do React Native, uma tecnologia baseada no React (um framework para desenvolvimento web), é possível implementar um aplicativo e gerar um código para Android e outro para iOS. Sua principal característica é que não efetua o tal “envelopamento”, mas, a partir do seu código, junto às tecnologias citadas anteriormente, gera um código nativo de cada uma das plataformas.

Nesta lição, você conhecerá a empresa fictícia Innovation Systems, que trabalha na criação de sistemas web e aplicativos para dispositivos móveis para as duas grandes plataformas. O case em questão apresenta a história do Desenvolvenilson, um rapaz que trabalha como desenvolvedor web na Innovation Systems atuando na equipe de sistemas web com stack — conjunto de tecnologias, como HTML5, CSS3, JavaScript e framework React.

Certo dia, um dos grandes clientes da Empresa, que já possuía um robusto sistema web desenvolvido pela equipe do Desenvolvenilson, pediu um aplicativo para smartphones e, mesmo antes da solicitação do novo projeto, o cliente realizou um levantamento interno entre colaboradores, gestão e clientes sobre a plataforma mobile que era utilizada e chegou ao impressionante número de 50% para cada uma das grandes plataformas (Android e iOS). Então, um dos principais requisitos para esse aplicativo era que funcionasse nas duas plataformas.

Desenvolvenilson foi indicado para formar uma nova equipe para atender a esse projeto, devido à importância do cliente em questão. Após uma rápida pesquisa sobre qual tecnologia e/ou estratégia que seria utilizada, a nova equipe chegou à conclusão de que, devido à similaridade entre as tecnologias e, principalmente, à utilização do React para sistemas web, o React Native seria a grande escolha, devido, também, ao prévio conhecimento ser um grande fator de produtividade para essa equipe.

Agora, você conhecerá um pouco dos conceitos por trás do React Native no que diz respeito à forma de se programar utilizando framework. Mostraremos como o desenvolvimento por meio de componentes torna sua produtividade maior assim como a consistência da interface e de comportamentos de sua aplicação.

Componentes reutilizáveis para sua webapp

Uma das evoluções no mundo da programação para web e desenvolvimento de aplicativos móveis com a junção de HTML5, CSS3 e JavaScript, por meio de seus frameworks, é a criação de componentes reutilizáveis. Mas o que são esses componentes e como eles podem ser reutilizáveis? 

Com o advento do React e do React Native, é possível criar o design com HTML, uma estilização básica com CSS e uma lógica de autenticação com JavaScript. Porém tudo isso dentro de uma espécie de caixinha, que chamamos de componente, com algumas personalizações (paleta de cores, conexão com banco de dados etc.), para que, sempre que for preciso utilizar esse “componente”, baste informar o que é personalizável dele. Com isso, você ganha, em coesão de funcionamento de seus códigos, produtividade e estabilidade, pois, uma vez criado e aprimorado, seu componente tem forte garantia de segurança e bom funcionamento e que, sim, poderá ser evoluído conforme necessidade.

Uma boa prática no desenvolvimento React e React Native é a separação das responsabilidades, pois, assim, é possível deixar, cada vez mais, seus componentes reutilizáveis e fáceis de se dar manutenção, ou realizar melhorias. Um padrão muito utilizado para essa separação de responsabilidade consiste em dividir seu componente sempre em duas partes, sendo elas: Container e Presentation.

A fim de se buscar um código bem feito e dentro dos padrões, no início de carreira, é comum, primeiramente, criar um componente, de modo a deixá-lo funcional, para, depois, pensar nessa estrutura de boas práticas. Mas nem sempre será possível trabalhar com o código do zero, ou código novo, pois, na maioria das vezes, quando se entra numa empresa, esta já tem um projeto que já está em andamento e com muito código já produzido, os chamados códigos legados. Nesse caso, quando é necessário deixar o código mais legível, pode-se usar a refatoração, uma técnica bastante utilizada que permite entender, melhorar e aperfeiçoar o funcionamento desse código. 

Dentre as práticas de refatoração, uma das mais utilizadas e necessárias é a criação de testes automatizados (unitários e de integração), que são códigos criados para testar o seu código verdadeiro. Com isso, se o seu código for alterado, basta executar seus testes automatizados para saber se aconteceu algo inesperado e se algum código que estava funcionando parou de funcionar. Esses testes automatizados podem se tornar até uma disciplina, valendo a pena seu estudo no futuro!

Trabalhando com Functions Components

Como você pôde ver anteriormente, é uma boa prática dividir as responsabilidades de seus componentes e, para isso, vimos que se pode desenvolver código em React e React Native de duas maneiras: na forma de classe e na forma funcional. Mas, na prática, o que quer dizer isso?

A forma de classe é bastante utilizada na programação orientada a objetos, em que se tem uma classe (uma forma) que cria objetos (instâncias dessa forma) para utilização e relacionamento com outros objetos. A questão aqui é mais o que se pode fazer com componentes funcionais. Veja, na sequência, a Figura 1, que apresenta um exemplo de componente funcional:

Mas o que esse código faz? Simplesmente, exibe o texto Hello, I am your cat! Esse código foi retirado da documentação oficial do React Native e pode ser acessado clicando aqui! 

Mas e quanto à explicação do código? Bom, nas duas primeiras linhas, temos a importação da biblioteca React e do componente Text do React Native para que, na quarta linha, inicie-se o componente por meio da função que só retorna o componente filho Text com o texto já descrito. Na última linha, exporta-se todo aquele código com o nome padrão de Cat, para que ele possa ser importado em outros arquivos para reutilização do componente. 

AsyncStorage

Segundo React Native (2023a), este componente é um sistema de armazenamento não criptografado, assíncrono, persistente e de valor-chave, que é global para o seu aplicativo. O que é relevante para você saber agora é que o termo assíncrono significa que, se o restante do seu código não espera que isso aconteça para seguir seu fluxo, isso pode ser feito em paralelo a outras execuções. Persistente se refere à questão de armazenamento do conteúdo por meio de valor-chave, ou chave-valor, que seria, por exemplo, solicitar o armazenamento do nome do usuário que está autenticado no aplicativo. Por exemplo: “usuario: Xpto”, em que “usuário” seria a chave e “xpto”, o valor. O armazenamento nesse caso não acontece por meio de tabelas e outras formas, mas por meio de pequenos armazenamentos para uso em toda sua aplicação, sempre por meio de uma chave em que você terá o valor armazenado, ou poderá enviar um novo valor para ser armazenado com a referida chave.

Navigation (navegação)

Aplicativos móveis, raramente, são compostos de uma única tela. Por isso, você precisará sempre ter o gerenciamento da apresentação e da transição entre várias telas, que, normalmente, é feito por meio de menus e, no caso do React Native, do componente Navigation. Segundo React Native (2023b), o componente Navigation é uma solução criada pela comunidade para navegação e é uma biblioteca autônoma que permite aos desenvolvedores configurar as telas de um aplicativo com algumas linhas de código.  Em outras palavras, é um componente que permite criar toda a navegação, por meio das telas disponíveis de sua aplicação, e controlar, assim, todo o fluxo de navegação dessas telas.

Agora, você verá como deixar o React Native pronto para ser usado em um projeto na sua máquina Windows. Para isso, você precisará instalar o NodeJs, que é um framework JavaScript, para ser executado em Backend, que é usado, principalmente, para que você possa testar suas aplicações no desktop ou notebook. Para isso, você deverá realizar os seguintes passos:

• Acesse o site https://nodejs.org

• Logo na página inicial, há dois botões verdes com as versões mais recomendadas e atualizadas. Clique em uma delas, efetue o download e execute na sua máquina, na instalação padrão de softwares no Windows (Next, Next, Finish).

Uma vez que tenha instalado o nodejs, o indicado, segundo a própria documentação do framework (disponível em https://reactnative.dev/docs/environment-setup), é utilizar a ferramenta Expo Go. Para isso, basta que você vá até o terminal de seu Windows (Cmd ou Shell), acesse a pasta que deseja e siga os seguintes passos:

• Digite o comando npx create-expo-app MeuPrimeiroApp

• Digite o comando cd MeuPrimeiroApp

• Digite o comando npx expo start

Agora, você está com seu servidor de desenvolvimento em funcionamento e poderá criar seu aplicativo da maneira que quiser. 

OBS: esse passo a passo está registrado para exemplificação e aprendizado. Sempre que estiver em ambientes de desenvolvimento Windows, com as devidas permissões para instalação, você poderá colocar esse conhecimento em prática.

Considerando, porém, que os laboratórios das escolas estaduais do Paraná possuem computadores cujo o sistema operacional são versões linux — você estudará sobre software livre e, certamente, sobre linux nas aulas de Ciência da Computação — e, também, restrições para instalações de softwares nos computadores da escola, somente a título de curiosidade e testes iniciais, você pode utilizar o site snack (disponível em https://snack.expo.dev/) para desenvolvimentos rápidos e para verificar o funcionamento de um App básico em React Native.