Instalando Node, Expo CLI e simuladores
Configure Node.js, o Expo CLI e o iOS Simulator ou Android Emulator para poder executar aplicativos React Native localmente.
Instalando Node, Expo CLI e simuladores é uma aula grátis de React Native Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Native Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Native Academy inclui 4 aulas no total.
Por que o Node.js movimenta o React Native
O React Native roda no Node.js — ele alimenta o empacotador Metro que transforma seu JSX em um aplicativo. Instale a versão LTS para maior estabilidade, idealmente através do gerenciador de versões nvm.
# Install nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# Then install the latest LTS Node
nvm install --lts
nvm use --lts
# Verify installation
node --version # e.g. v20.12.0
npm --version # e.g. 10.5.0Instalando o Expo CLI
O Expo CLI permite que você crie, execute e compile aplicativos sem tocar em código nativo. Combine-o com o aplicativo Expo Go para ler um QR code e ver seu aplicativo em um telefone real instantaneamente.
# Install Expo CLI globally
npm install -g expo-cli
# Verify the installation
expo --version
# Alternatively, use npx (no global install needed)
npx create-expo-app --versionConfigurando o Simulador iOS no macOS
Para o iOS Simulator, você precisa de um Mac com o Xcode instalado. Abra o Xcode uma vez para aceitar a licença e, em seguida, adicione as ferramentas de linha de comando. O Expo pode iniciar um simulador com o pressionar de uma tecla.
# Install Xcode Command Line Tools
xcode-select --install
# Open a simulator from the terminal
open -a Simulator
# List available simulator devices
xcrun simctl list devicesConfigurando o Emulador Android
Para o Android, você precisa do Android Studio. Instale o SDK e o emulador, crie um dispositivo Pixel virtual e defina a variável ANDROID_HOME para que o Expo possa encontrar tudo. Veja o código.
# Add to ~/.zshrc or ~/.bashrc
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
# Reload shell config
source ~/.zshrc
# Verify adb is found
adb --versionEntendendo o Metro Bundler
Iniciar um projeto inicia o Metro, o empacotador que monitora seus arquivos e recarrega instantaneamente com o Fast Refresh. Se as coisas ficarem desatualizadas, limpe o cache com a flag --clear.
# Start Metro and clear cache
npx expo start --clear
# Metro outputs a QR code and key shortcuts:
# i → open iOS Simulator
# a → open Android Emulator
# r → reload the app
# m → toggle the developer menuJava Development Kit para Android
As compilações para Android precisam de um Java Development Kit — o Expo recomenda o JDK 17. Instale-o e, em seguida, execute java --version para confirmar que ele está no seu PATH. O código instala-o via Homebrew.
# Install JDK 17 via Homebrew (macOS)
brew install --cask temurin@17
# Verify Java version
java --version
# Expected: openjdk 17.x.x
# On Windows: download installer from
# https://adoptium.net/temurin/releases/Verificando sua Configuração Completa
Assim que tudo estiver instalado, execute npx expo-env-info (ou react-native doctor) para verificar sua configuração. A ferramenta sinaliza qualquer item ausente, portanto, corrija esses problemas antes do seu primeiro projeto.
# Check your environment with Expo
npx expo-env-info
# Or use the React Native community CLI doctor
npx react-native doctor
# Install Watchman for better file watching (macOS)
brew install watchmanWatchman: Monitoramento Rápido de Arquivos
O Watchman é um observador de arquivos do Facebook que faz com que o Metro detecte alterações muito mais rápido, especialmente no macOS. Instale-o via Homebrew antes de começar a compilar.
# Install Watchman on macOS
brew install watchman
# Verify installation
watchman version
# If Metro has stale Watchman state, reset it
watchman watch-del-allVariáveis de Ambiente e PATH
Muitas dores de cabeça de configuração se resumem a uma entrada PATH ausente — seu shell não consegue encontrar o adb ou o emulador. Adicione os caminhos ao ~/.zshrc e recarregue-o. O código mostra exatamente o quê.
# Example ~/.zshrc additions for React Native
export JAVA_HOME=$(/usr/libexec/java_home -v 17)
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
# Apply changes
source ~/.zshrcAplicativo Expo Go em um Dispositivo Real
A maneira mais rápida de testar em um telefone real é o aplicativo Expo Go. Execute o expo start, escaneie o código QR e seu aplicativo será carregado via Wi-Fi. Perfeito para desenvolvimento rápido. 📱
# Start Expo development server
npx expo start
# Expo prints a QR code in the terminal.
# Scan it with:
# iOS: Camera app → tap the banner
# Android: Expo Go app → Scan QR Code
# Or press 's' to switch to Expo Go mode
# if using a dev build by defaultSolucionando Problemas Comuns de Instalação
A maioria dos problemas de configuração é previsível: uma porta 8081 ocupada, um cache do Metro desatualizado, a versão errada do Node ou um ANDROID_HOME ausente. E leia sempre a tela de erro vermelha com atenção.
# Common fixes
# Clear Metro cache
npx expo start --clear
# Kill process on port 8081
lsof -ti:8081 | xargs kill -9
# Check connected Android devices
adb devices
# Restart adb server if devices not showing
adb kill-server
adb start-serverVerificação Rápida
Teste a sua compreensão dos conceitos de Desenvolvimento Mobile com React Native desta aula.
Resumo da Lição
Você construiu sua cadeia de ferramentas: o Node e o nvm executam o JavaScript, a Expo CLI cria a estrutura e serve seu aplicativo, e o Watchman junto com os SDKs alimentam os simuladores. Próximo passo: seu primeiro projeto! 🎉
Perguntas Frequentes
A aula “Instalando Node, Expo CLI e simuladores” é grátis?
Sim — o texto completo de “Instalando Node, Expo CLI e simuladores” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Native Academy, atualize para CoddyKit PRO. O curso de React Native Academy inclui 4 aulas no total.
O que vou aprender em “Instalando Node, Expo CLI e simuladores”?
Configure Node.js, o Expo CLI e o iOS Simulator ou Android Emulator para poder executar aplicativos React Native localmente. Você pratica React Native Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Native Academy?
Nenhuma experiência prévia é necessária. React Native Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Instalando Node, Expo CLI e simuladores”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Native Academy?
Sim. Cada aula de React Native Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Instalando Node, Expo CLI e simuladores
- Criando seu primeiro projeto Expo
- Executando no dispositivo e no emulador
- Entendendo a estrutura do projeto