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
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:
npm install -g expo-cli
Agora, crie um novo projeto:
npx create-expo-app meuApp
Depois, entre na pasta do projeto e execute:
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:
npx react-native init MeuApp
Android
npx react-native run-android
iOS (Mac com Xcode)
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.
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",
},
});
Esse código exibe um texto centralizado na tela!
Rodando no Celular ou Emulador
🔹 No Expo:
- No terminal, execute
npm starte 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”.
