Conheça o React Native a linguagem de programação multiplataforma

React Native é uma biblioteca de JavaScript que permite criar aplicativos nativos para Android, iOS e outras plataformas usando React. Ela combina o melhor do desenvolvimento nativo com React, uma biblioteca de JavaScript de primeira classe para construir interfaces de usuário. Você pode usar React Native em seus projetos existentes ou novos, e compartilhar código entre plataformas com componentes e primitivas específicos de cada plataforma.

Neste artigo, eu vou mostrar alguns exemplos básicos de como usar React Native para criar um aplicativo simples de café com gatos, usando os conceitos fundamentais de React, como JSX, props, state e componentes customizados.

O que é JSX?

JSX é uma sintaxe que mistura HTML e JavaScript, e que permite escrever elementos de interface de forma declarativa e concisa. Por exemplo, o código abaixo cria um elemento de texto que diz “Olá, mundo!” usando JSX:

<Text>Olá, mundo!</Text>

O elemento <Text> é um componente nativo do React Native, que renderiza um texto na tela. Você pode usar outros componentes nativos, como <View>, <Image>, <Button>, entre outros, para criar diferentes tipos de elementos de interface. Você também pode criar seus próprios componentes, como veremos mais adiante.

O que são props?

Props são propriedades que você pode passar para os componentes, para customizar seu comportamento ou aparência. Por exemplo, o código abaixo cria um elemento de imagem que mostra um gato, usando o prop source para definir a fonte da imagem:

<Image source={require('./cat.png')} />

O prop source recebe um objeto que contém a informação da imagem, que pode ser um arquivo local (usando require) ou uma URL remota (usando {uri: 'https://...'}). Você pode usar outros props, como style, resizeMode, onPress, entre outros, para alterar o estilo, o modo de redimensionamento, o evento de clique, etc. dos componentes.

O que é state?

State é o estado interno de um componente, que pode mudar ao longo do tempo, de acordo com alguma lógica ou interação do usuário. Por exemplo, o código abaixo cria um componente que mostra um contador, que aumenta ou diminui quando o usuário clica nos botões:

import React, {useState} from 'react';
import {View, Text, Button} from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0); // cria uma variável de estado chamada count, com valor inicial 0, e uma função para atualizá-la chamada setCount

  return (
    <View>
      <Text>Contador: {count}</Text> // mostra o valor de count na tela
      <Button title="+" onPress={() => setCount(count + 1)} /> // cria um botão que aumenta o valor de count em 1
      <Button title="-" onPress={() => setCount(count - 1)} /> // cria um botão que diminui o valor de count em 1
    </View>
  );
};

O componente Counter usa o hook useState para criar uma variável de estado chamada count, com valor inicial 0, e uma função para atualizá-la chamada setCount. O hook useState é uma forma de usar o state em componentes funcionais, que são componentes escritos como funções e não como classes. Você pode usar outros hooks, como useEffect, useContext, useReducer, entre outros, para adicionar outras funcionalidades aos componentes funcionais.

O que são componentes customizados?

Componentes customizados são componentes que você cria para reutilizar em seu aplicativo, ou para encapsular uma lógica ou uma interface específica. Por exemplo, o código abaixo cria um componente chamado Cat, que mostra uma imagem de um gato com um nome:

import React from 'react';
import {View, Text, Image} from 'react-native';

const Cat = (props) => {
  return (
    <View>
      <Image source={props.image} style={{width: 100, height: 100}} /> // usa o prop image para definir a fonte da imagem
      <Text>{props.name}</Text> // usa o prop name para definir o nome do gato
    </View>
  );
};

O componente Cat recebe dois props: image e name, que são usados para renderizar a imagem e o nome do gato. Você pode usar o componente Cat em outro componente, passando os props desejados. Por exemplo, o código abaixo cria um componente chamado Cafe, que mostra uma lista de gatos usando o componente Cat:

import React from 'react';
import {View} from 'react-native';

const Cafe = () => {
  return (
    <View>
      <Cat name="Miau" image={require('./cat1.png')} /> // cria um componente Cat com o nome Miau e a imagem cat1.png
      <Cat name="Fifi" image={require('./cat2.png')} /> // cria um componente Cat com o nome Fifi e a imagem cat2.png
      <Cat name="Toto" image={require('./cat3.png')} /> // cria um componente Cat com o nome Toto e a imagem cat3.png
    </View>
  );
};

O componente Cafe usa o componente Cat três vezes, passando diferentes props para cada um. Você pode usar o componente Cafe em seu aplicativo, ou em outro componente, da mesma forma que usou o componente Cat.

Espero que esses exemplos tenham sido úteis para você aprender um pouco mais sobre React Native. Se você quiser saber mais sobre essa biblioteca, você pode consultar a documentação oficial ou algum dos livros recomendados por outros programadores.

Obrigado por ler este artigo e até a próxima!