Introdução: Do Navegador para o Celular

Se você chegou até aqui, já entende como o React domina a web, transformando a maneira como construímos interfaces. Agora, vamos levar todo esse poder para o bolso dos usuários. Nesta seção, vamos entender como usar a mesma lógica de componentes, estado e props para criar aplicativos que rodam em iOS e Android, partindo do zero até ter o famoso "Hello, World" na tela do seu celular.

O que é React Native?

A resposta curta: é o React, mas para aplicativos.

A resposta longa: o React Native é um framework que permite usar JavaScript e React para criar aplicativos para celular. A grande mágica acontece por baixo dos panos: em vez de gerar tags HTML como <div> e <p>, seu código React comanda os componentes de interface nativos do sistema operacional. Isso significa que quando você escreve <View>, o React Native a transforma em uma UIView no iOS e em uma View no Android. O resultado é um aplicativo com performance e aparência nativas, sem que você precise escrever uma linha sequer de Swift/Objective-C (para iOS) ou Java/Kotlin (para Android).

É a mesma filosofia do React que você já conhece — criar interfaces a partir de pequenos blocos reutilizáveis — aplicada a um novo ambiente.

Por que usar Expo?

Se o React Native é o motor do carro, o Expo é todo o resto: o chassi, o painel, o GPS e o ar-condicionado. Expo é um conjunto de ferramentas e serviços construído em cima do React Native que simplifica drasticamente o desenvolvimento.

Pense no Expo como o "Next.js" do mundo mobile. Ele resolve os principais pontos de dor:

Configuração Zero: Você não precisa instalar Xcode (para iOS) ou Android Studio (para Android) para começar. O Expo cuida de toda a complexidade.
Desenvolvimento Rápido: Com o aplicativo Expo Go, você pode rodar seu projeto no seu próprio celular em segundos, apenas escaneando um QR Code.
APIs Nativas Simplificadas: Quer usar a câmera, o GPS, os contatos ou o acelerômetro? O Expo oferece bibliotecas JavaScript fáceis de usar que dão acesso a esses recursos, sem que você precise se preocupar com o código nativo por trás delas.

Para quem está começando (e até para muitos projetos em produção), usar o Expo é a forma mais rápida e produtiva de construir um app com React Native.

Ambiente de Desenvolvimento: Primeiros Passos

Aqui a prática é um pouco diferente da web. Vamos deixar o ambiente pronto para rodar nosso primeiro app. Siga os passos com atenção.

Passo 1: Instalar as ferramentas (se necessário)

O EAS CLI é a ferramenta de linha de comando do Expo para fazer o "build" do seu aplicativo (o passo final para enviá-lo para as lojas). É bom já deixá-lo instalado. Abra seu terminal e rode:

npm install -g eas-cli

Este comando instala o EAS CLI globalmente no seu computador. Você só precisa fazer isso uma vez.

Passo 2: Criar o projeto

Agora, vamos criar a pasta e os arquivos iniciais do nosso app. É o equivalente ao `create-react-app`.

npx expo init meu-primeiro-app

O `npx` garante que estamos usando a versão mais recente do `expo`. O comando vai perguntar qual template você quer usar. Para começar, escolha o template "blank", que é o mais limpo.

Passo 3: Entrar na pasta do projeto

Um passo simples, mas que muitos esquecem! O terminal não entra na pasta nova sozinho.

cd meu-primeiro-app

Passo 4: Iniciar o servidor de desenvolvimento

Este é o comando que você mais vai usar. Ele inicia o "Metro Bundler", um servidor que compila seu código JavaScript e o disponibiliza para o aplicativo.

npx expo start

Ao rodar esse comando, seu terminal vai mudar e exibir um grande QR Code. É aqui que a mágica acontece.

Passo 5: Ver o app no seu celular

Pegue seu celular (Android ou iPhone).
Baixe o aplicativo "Expo Go" na Play Store ou na App Store.
Abra o Expo Go e use a opção de escanear o QR Code que apareceu no seu terminal.

Em segundos, o aplicativo que você acabou de criar será carregado no seu celular. Qualquer alteração que você fizer no código será refletida quase que instantaneamente. Bem-vindo ao desenvolvimento mobile com React Native e Expo!