O que você precisa saber para começar com React Native

Introdução:

React Native é um Framework desenvolvido pelo Facebook, com ele conseguimos criar aplicativos mobile multiplataforma (Android e IOS) de forma nativa usando Javascript, fazendo a conversão do código para o nativo Java (Android) e Objective-C (IOS).

Para que isso seja possível, React Native usa uma sintaxe que se chama JSX, que mistura um tipo de “HTML” que você provavelmente já conhece, com Javascript, e o resultado fica mais ou menos assim:

React JSX

React Native é sem sombra de dúvidas uma das melhores alternativas que você pode encontrar hoje no mercado para desenvolvimento multiplataforma, e vou te mostrar como você pode começar a utilizá-lo para criar seus App’s nativos.

Começando hoje:

Para que você entre nesse mundo do React Native, é necessário um pouco de conhecimento na linguagem de programação que ele utiliza, ou seja, JavaScript, e também exige (na minha opinião) ter uma certa familiaridade com um pouco de HTML e CSS.

Javascript:

Você irá utilizar essencialmente o Javascript para construir seus App’s, e para isso você precisa aprendê-lo. Separei para você alguns cursos e livros que podem te ajudar a aprender Javascript e ES6+:

Cursos:

Curso em vídeo: https://www.youtube.com/playlist?list=PLHz_AreHm4dlsK3Nr9GVvXCbpQyHQl1o1

Rocketseat Started: https://rocketseat.com.br/starter

Livro:

You don’t know JS: https://github.com/cezaraugusto/You-Dont-Know-JS

HTML e CSS

Você deve estar se perguntando o porquê é necessário ter alguma noção de HTML e CSS para desenvolver seus Apps’s?

React Native utiliza a sintaxe JSX que é muita parecida com HTML (<tag> </tag>) fazendo a estrutura da aplicação. E para o design utiliza-se Flex-box, usado também na Web, tornando importante o conhecimento em CSS.

Diga olá para o exemplo:

O que chamamos de “HTML”

O que chamamos de “CSS”

Separei também alguns materiais para você aprender mais sobre Flex-box (CSS):

Guia completo: https://origamid.com/projetos/flexbox-guia-completo/

Um jogo para aprender Flex-box: https://flexboxfroggy.com/#pt-br

Aprendendo React

Primeiramente, antes de partir para o próprio React Native é necessário que você aprenda React, seus componentes, state e props.

O que é um componente?

Componentes permitem você dividir a UI em partes independentes, reutilizáveis e pensar em cada parte isoladamente.

Conceitualmente, componentes são como funções JavaScript. Eles aceitam entradas arbitrárias (chamadas “props”) e retornam elementos React que descrevem o que deve aparecer na tela.

Componente React

O que são props?

Props é uma abreviação de properties, que são informações que podem ser passadas de um componente para outro, sendo uma string, number, array ou até um objeto.

O que é state?

São informações utilizadas pelo componente. Ao contrário das props, o state não recebe informações de outros componentes, ele é iniciado com algum valor, podendo ser uma string, number, array ou até um objeto, que é utilizado no próprio componente.

A diferença entre um Function component e um Class component:

Function Component vs Class Component

Criando o seu primeiro projeto React Native

Para que você possa criar seu primeiro projeto em React Native, é necessário que você configure seu ambiente de desenvolvimento. Essa parte geralmente é demorada, um pouco chata, e esse é um dos motivos que fazem muitos desistirem. Para resolver esse problema, vou mencionar abaixo um tutorial, para não estendermos muito esse assunto.

Configurar ambiente: https://docs.rocketseat.dev/ambiente-react-native/introducao

Depois de configurar seu ambiente de desenvolvimento, utilize o seguinte comando para criar o seu primeiro projeto em RN:

npx react-native init Nomedoseuprojeto

Depois de criado, abra o projeto em seu editor de código preferido.

Para que possamos rodar o projeto pela primeira vez no Android, é necessário que você abra seu emulador e execute o seguinte comando:

react-native run-android

No IOS, não é necessário abrir o emulador, então, execute:

react-native run-ios

Depois de instalado o App em seu emulador, basta executar:

react-native start

Para iniciar o seu App.

Resultado:

Exemplo App React Native

Consumindo uma API

Se seu objetivo é trabalhar com React Native, certamente vai precisar aprender a consumir uma API. Mas, o que é uma API?

API significa Application Programming Interface — Interface de Programação de Aplicativos — e corresponde a um conjunto de instruções e padrões de programação para interligar softwares, fazendo uma ponte para envios e recebimentos de informações entre sistemas diferentes.

Uma API geralmente usa o formato JSON ( JavaScript Object Notation) que nada mais é que um arquivo com chaves e valores:

Exemplo API

Com ela você vai enviar e receber informações do servidor, e utilizar essas informações em seu App.

Conclusão

Com as definições e materiais disponibilizados nesse artigo, você conseguirá ter uma noção de como começar a aprender React Native. É essencial ter paciência e dedicação; não pule etapas e crie metas alcançáveis para medir sua evolução. Pratique sempre e verá como React Native se torna algo fácil para aprender. O importante é não desistir, e assim chegará aonde deseja.

Espero ter ajudado.