React Native para Iniciantes: Do Zero ao Seu Primeiro App Multiplataforma (Sem Complicações!)

Se você está interessado em desenvolver aplicativos móveis que funcionem tanto em Android quanto em iOS usando uma única base de código, o React Native é uma excelente opção.

Neste artigo, vamos explorar o que é o React Native, por que ele é uma ferramenta poderosa para o desenvolvimento mobile e como você pode dar os primeiros passos.

O que é React Native?

React Native é um framework criado pelo Facebook para desenvolver aplicativos móveis nativos para Android e iOS utilizando JavaScript e React, uma biblioteca popular para desenvolvimento web. Diferentemente de outras soluções híbridas, o React Native permite que o código JavaScript seja convertido em componentes nativos reais, proporcionando melhor desempenho e experiência do usuário.

Quem usa React Native?

Grandes empresas como Facebook, Instagram, Uber Eats, Walmart e Discord utilizam o React Native em seus aplicativos. Isso demonstra a robustez, a flexibilidade e a confiabilidade da ferramenta.

Por que escolher react native?

Desenvolvimento multiplataforma

Com o React Native, você escreve código uma vez e o utiliza em várias plataformas. Isso significa que você pode criar um aplicativo que funcione perfeitamente em iOS e Android sem precisar manter duas bases de código separadas.

Reutilização de conhecimentos

Se você já está familiarizado com JavaScript e React, estará em vantagem. O React Native permite que você aplique esses conhecimentos no desenvolvimento móvel, acelerando seu processo de aprendizagem.

Comunidade ativa

O React Native possui uma comunidade vibrante e ativa. Há uma abundância de recursos, bibliotecas e ferramentas disponíveis que podem te ajudar a resolver problemas e adicionar funcionalidades ao seu aplicativo.

Acesso a componentes nativos

Ao contrário de soluções híbridas que dependem de tecnologias web, o React Native permite acesso direto às APIs nativas dos dispositivos. Isso resulta em melhor desempenho e uma experiência do usuário mais fluida.

Por onde começar?

Antes de mergulhar no React Native, é importante que você tenha uma boa base nos seguintes conceitos:

HTML e CSS: Embora o React Native não utilize diretamente HTML e CSS, compreender a estruturação de interfaces e estilos é muito útil para entender como os componentes se comportam e são estilizados.
JavaScript: Ter um conhecimento sólido em JavaScript é fundamental, já que o React Native é construído sobre essa linguagem. É importante entender conceitos como funções, objetos, arrays, ES6+ (let, const, arrow functions), promises, async/await e manipulação de dados.

JavaScript é a base do React Native, então ter um bom entendimento dessa linguagem é essencial.

Preparando o ambiente de desenvolvimento

Antes de mergulhar no código, é necessário configurar o ambiente de desenvolvimento. Existem duas principais formas de começar com React Native: Expo e React Native CLI.

Expo

O Expo é uma ferramenta que simplifica a criação de aplicativos React Native. Ele abstrai grande parte das configurações nativas, tornando-o ideal para iniciantes. Com o Expo, você pode iniciar rapidamente seu projeto e testar seu aplicativo em dispositivos reais sem complicações.

React Native CLI

O React Native CLI oferece mais controle sobre o projeto, permitindo personalizações avançadas e acesso ao código nativo. Ela é recomendada para desenvolvedores que já têm um pouco mais de experiência ou que precisam de funcionalidades nativas específicas que o Expo não oferece.

Instalando o Expo

Para começar com o Expo, basta seguir os seguintes passos:

Instale o Node.js (necessário para executar o React Native).
Instale a CLI do Expo com o comando:

npm install -g expo-cli

Crie seu primeiro projeto com o comando:

expo init MeuApp

Inicie o projeto:

cd MeuApp
expo start

Com esses passos, você já estará pronto para começar a desenvolver seu aplicativo. Se precisar de mais detalhes ou opções avançadas, você pode conferir a documentação oficial de configuração de ambiente para garantir que tudo esteja funcionando corretamente.

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


const App = () => (
<View>
  <Text>Olá, mundo!</Text>
</View>
);


export default App;

Componentes básicos

No React Native, você utilizará componentes para construir sua interface. Alguns dos principais componentes são:

View: Equivale a uma <div> no HTML, é o contêiner básico.
Text: Usado para exibir textos.
Image: Exibe imagens na interface.
TextInput: Um compo de entrada de texto.
ScrollView: Um contêiner com suporte à rolagem para quando o conteúdo excede o tamanho da tela.

Exemplo básico de uso de componentes:

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


const MeuApp = () => {
  return (
      <View>
          <Text>Seja bem-vindo ao meu primeiro app!</Text>
          <Image source={{ uri: 'https://images.unsplash.com/photo-1517841905240-472988babdf9' }}
      </View>
  );
};


export default MeuApp;

O Expo Snack é uma ferramenta online que permite que você crie, teste e compartilhe aplicativos React Native diretamente no navegador, sem a necessidade de configurar um ambiente de desenvolvimento. Isso facilita muito para quem está começando a aprender, já que você pode ver as mudanças no código sendo aplicadas em tempo real, tanto em dispositivos Android quanto iOS. Agora que você sabe o que é o Expo Snack, quer testar o código e explorar os conceitos básicos?

Basta acessar, modificar o código e ver as atualizações.

Estilização de componentes

No React Native, a estilização é feita utilizando o StyleSheet, que funciona de forma semelhante ao CSS.

Aqui está um exemplo de como estilizar um componente:

import { Text, SafeAreaView, StyleSheet } from 'react-native';
import { Card } from 'react-native-paper';


export default function App() {
return (
  <SafeAreaView style={styles.container}>
    <Text style={styles.heading}>
      Olá Dev!
    </Text>
    <Card style={styles.card}>
      <Text style={styles.paragraph}>
        Mergulhe no mundo da estilização com React Native e construa interfaces modernas e intuitivas! 🚀
      </Text>
    </Card>
  </SafeAreaView>
);
}


const styles = StyleSheet.create({
container: {
  flex: 1,
  justifyContent: 'center',
  backgroundColor: '#121214',
  padding: 16,
},
heading: {
  fontSize: 24,
  fontWeight: 'bold',
  color: '#04D361', 
  textAlign: 'center',
  marginBottom: 16,
},
card: {
  backgroundColor: '#202024', 
  padding: 20,
  borderRadius: 8,
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.8,
  shadowRadius: 2,
},
paragraph: {
  fontSize: 16,
  color: '#E1E1E6', 
  textAlign: 'center',
  marginBottom: 12,
},
});

Você pode acessar o exemplo completo diretamente no Expo Snack e testar as mudanças em tempo real. Clique no link abaixo para abrir o código e começar a explorar!

Acesse o código no Expo Snack

Propriedades e estado (props & state)

No React Native, as props (propriedades) e o state (estado) são fundamentais para controlar o comportamento e a aparência dos componentes. Imagine que você queira exibir o nome de diferentes alunos em um aplicativo. Utilizando as props, podemos passar o nome de cada aluno para um componente que será responsável por exibir essa informação.

import { SafeAreaView, Text, StyleSheet } from 'react-native';


// Componente que recebe a prop 'nome' e exibe uma saudação
const Saudacao = ({ nome }) => {
return <Text style={styles.saudacao}>Olá, {nome}! 🚀</Text>;
};


export default function App() {
return (
  <SafeAreaView style={styles.container}>
    {/* Passando diferentes nomes como props para o componente Saudação */}
    <Saudacao nome="José" />
    <Saudacao nome="Alexandre" />
    <Saudacao nome="Maria" />
  </SafeAreaView>
);
}


const styles = StyleSheet.create({
container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#202022',
},
saudacao: {
  fontSize: 24,
  color: '#CCCCCC',
  margin: 10,
  fontWeight: 'bold',
},
});

Clique no link abaixo para abrir o código e teste seu conhecimento sobre componentes e propriedades no React Native:

Acessa o código no Expo Snack

Hooks

Assim como no React para web, você pode utilizar os hooks no React Native. Os hooks permitem que você adicione estados e efeitos colaterais em componentes funcionais e são amplamente utilizados para criar lógicas mais dinâmicas em aplicativos React Native. Os hooks mais comuns que você usará no React Native são:

useState: Para gerenciar o estado local de um componente.
useEffect: Para lidar com efeitos colaterais, como chamadas a APIs ou execução de código após o componente ser renderizado.
useContext, useReducer e outros hooks também estão disponíveis no React Native da mesma forma que no React.

Aqui está um exemplo que usa os hooks useState e useEffect no React Native:

import React, { useState, useEffect } from 'react';
import { SafeAreaView, Text, Button, StyleSheet } from 'react-native';


export default function App() {
const [contador, setContador] = useState(0); // Estado local
const [mensagem, setMensagem] = useState(''); // Estado para armazenar mensagem de API fictícia


// Hook useEffect para simular uma chamada de API
useEffect(() => {
  // Simulando uma chamada de API com setTimeout
  setTimeout(() => {
    setMensagem('Aqui está sua mensagem da API!');
  }, 2000);
}, []); // O array vazio [] faz com que o efeito seja executado apenas uma vez


return (
  <SafeAreaView style={styles.container}>
    <Text style={styles.paragraph}>
      Você clicou {contador} vezes!
    </Text>
    <Button title="Clique aqui" onPress={() => setContador(contador + 1)} />


    {/* Exibindo a mensagem recebida pela "API" */}
    <Text style={styles.mensagem}>{mensagem}</Text>
  </SafeAreaView>
);
}


const styles = StyleSheet.create({
container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#121214',
  padding: 16,
},
paragraph: {
  fontSize: 18,
  color: '#E1E1E6',
  margin: 10,
  textAlign: 'center',
},
mensagem: {
  fontSize: 16,
  color: '#04D361',
  marginTop: 20,
  textAlign: 'center',
},
});

Quer estar suas habilidades com os hooks? Explore e faça seus testes usando o link:

Acesse o código no Expo Snack

Próximos passos

Tornar-se um desenvolvedor profissional de React Native vai muito além de dominar o framework. O caminho envolve aprimoramento contínuo, especializações e estar conectado com a comunidade.

Como se tornar um desenvolvedor React Native profissional

Certificações: Adquirir uma certificação em React Native é um diferencial importante no mercado.
Contribuição para Open-Source: Participar de projetos open-source no GitHub não só amplia suas habilidades, como também aumenta sua visibilidade e te conecta com outros desenvolvedores da comunidade.
Cursos Avançados: Aprofunde seu conhecimento com cursos que abrangem desde o uso de APIs e gerenciamento de estado com Redux, até o domínio do TypeScript.

Certificações e mercado de trabalho

O mercado de trabalho para desenvolvedores React Native está aquecido, com demanda por profissionais capazes de construir aplicativos multiplataforma. Possuir certificações relevantes e um portfólio forte pode fazer toda a diferença para se destacar.

Construindo seu portfólio

Um portfólio sólido é a melhor forma de mostrar suas capacidades para potenciais empregadores. Inclua projetos pessoais, contribuições para open-source e qualquer experiência relevante que demonstre suas habilidades técnicas e criativas.

Conclusão

Aprender React Native abre as portas para um mercado em crescimento, permitindo que você construa aplicativos móveis eficientes para Android e iOS com uma única base de código. Com dedicação e estudo, você estará bem encaminhado para se tornar um desenvolvedor React Native de sucesso.