Como instalar o React Native e criar seu primeiro app

Se você quer desenvolver aplicativos mobile usando JavaScript, o React Native é uma das melhores opções! Ele permite criar apps para iOS e Android com um único código. Venha e confira esse artigo de como instar o  react native de forma descomplicada.

E quais são seus pré-requisitos ?

Você vai precisar de algumas ferramentas, antes de começarmos.

• Node

  É recomendado a versão LTS

• GIT

• Java JDK

  Para Android

• Android Studio

  Para Android

Se você pretende testar o app no iOS, precisa de um Mac com o Xcode instalado (disponível na App Store).

Instalando o Expo CLI ou React Native CLI

Existem duas maneiras principais de iniciar um projeto React Native:

Usando Expo (mais fácil e recomendado para iniciantes)

O Expo facilita o desenvolvimento, pois não exige configuração complexa. Para instalar, execute:

Bash

npm install -g expo-cli

Copiar npm install -g expo-cli

Agora, crie um novo projeto:

Bash

npx create-expo-app meuApp

Copiar npx create-expo-app meuApp

Depois, entre na pasta do projeto e execute:

Bash

cd meuApp
npm start

Copiar cd meuApp npm start

Isso abrirá o Expo DevTools no navegador. Se você instalar o app Expo Go no celular (disponível na Play Store/App Store), pode escanear o QR Code e testar o app no seu dispositivo.

Usando React Native CLI (mais flexível, mas requer mais configuração)

Se quiser mais controle sobre o projeto, use o React Native CLI. Primeiro, instale o CLI:

Bash

npx react-native init MeuApp

Copiar npx react-native init MeuApp

Android

Bash

npx react-native run-android

Copiar npx react-native run-android

iOS (Mac com Xcode)

Bash

npx react-native run-ios

Copiar npx react-native run-ios

No Android, deixe o emulador aberto ou conecte um celular via USB antes de rodar o comando!

Criando seu primeiro componente

Agora, vamos editar o arquivo App.js para exibir uma tela básica.

App.js App.js JavaScript

import React from "react";
import { View, Text, StyleSheet } from "react-native";
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Olá, React Native! 🚀</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
  },
  text: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#333",
  },
});

Copiar import React from “react”; import { View, Text, StyleSheet } from “react-native”; export default function App() { return ( Olá, React Native! 🚀 ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: “center”, alignItems: “center”, backgroundColor: “#f5f5f5”, }, text: { fontSize: 20, fontWeight: “bold”, color: “#333”, }, });

Esse código exibe um texto centralizado na tela!

Rodando no Celular ou Emulador

🔹 No Expo:

• No terminal, execute npm start e escaneie o QR Code com o app Expo Go.

🔹 No React Native CLI:

• Para Android, ative o modo desenvolvedor no celular e habilite a Depuração USB. Conecte via USB e rode npx react-native run-android.
• Para iOS, abra o projeto no Xcode e clique em “Run”.