i wanna learn react native cli
I'll help you learn React Native CLI! React Native CLI is the command-line interface for creating and managing React Native projects. Let me break down the key concepts and commands you need to know.
What is React Native CLI?
React Native CLI is a tool that helps you:
- Create new React Native projects
- Run your app on devices/simulators
- Build and bundle your application
- Manage dependencies and configurations
Installation
First, you'll need to install React Native CLI globally:
npm install -g @react-native-community/cliKey Commands
1. Creating a New Project
# Create a new React Native project
npx react-native@latest init MyAwesomeProject
# Navigate to your project
cd MyAwesomeProject2. Running Your App
# Start the Metro bundler
npx react-native start
# Run on Android (in a separate terminal)
npx react-native run-android
# Run on iOS (macOS only)
npx react-native run-ios
# Run on specific iOS simulator
npx react-native run-ios --simulator="iPhone 15 Pro"3. Development Commands
# Clean build cache
npx react-native clean
# Link native dependencies (for older RN versions)
npx react-native link
# Get device/simulator info
npx react-native info
# Log Android device logs
npx react-native log-android
# Log iOS device logs
npx react-native log-iosDevelopment Environment Setup
Prerequisites
- Node.js (version 18 or newer)
- Java Development Kit (JDK 17)
- Android Studio (for Android development)
- Xcode (for iOS development, macOS only)
Android Setup
- Install Android Studio
- Configure Android SDK
- Set up environment variables (ANDROID_HOME)
- Create/start an Android Virtual Device (AVD)
iOS Setup (macOS only)
- Install Xcode from App Store
- Install Xcode Command Line Tools
- Install CocoaPods:
sudo gem install cocoapods
Project Structure
When you create a new project, you'll see:
MyAwesomeProject/
├── android/ # Android-specific code
├── ios/ # iOS-specific code
├── src/ # Your React Native code
├── App.tsx # Main app component
├── index.js # Entry point
├── package.json # Dependencies
└── metro.config.js # Metro bundler configCommon Workflow
- Start Metro bundler:
npx react-native start - Run on device:
npx react-native run-androidornpx react-native run-ios - Make changes to your code
- Reload app: Press
rin Metro terminal or shake device - Debug: Use React Developer Tools or Flipper
Debugging Tips
- Enable Fast Refresh: Automatically reloads when you save files
- Use console.log(): View logs in Metro terminal
- React DevTools: Install browser extension for component inspection1
- Flipper: Facebook's debugging platform for React Native
React Native vs Expo CLI
React Native CLI:
- Full control over native code
- Can add custom native modules
- Requires native development setup
- More complex but more flexible
Expo CLI (now recommended for beginners2):
- Easier to get started
- Managed workflow
- Limited native module access
- Can "eject" to React Native CLI when needed
Next Steps
Once you're comfortable with the basics:
- Learn about navigation (React Navigation)
- Explore state management (Redux, Zustand)
- Add native modules and libraries
- Learn about performance optimization
- Understand the new React Native architecture2
The React Native team now recommends starting with Expo for new projects2, but learning React Native CLI gives you deeper understanding of how React Native works under the hood.
Set up a new React Native CLI project and run it on a simulator
I'll guide you through setting up a new React Native CLI project and running it on a simulator step by step!
Prerequisites Check
Before we start, make sure you have these installed:
# Check Node.js version (should be 18+)
node --version
# Check if you have React Native CLI
npx react-native --versionStep 1: Create a New Project
# Create a new React Native project
npx react-native@latest init MyFirstApp
# Navigate to the project directory
cd MyFirstAppThis will create a new React Native project with the latest version and set up all the necessary files.
Step 2: Start the Metro Bundler
Open a terminal in your project directory and start Metro (the JavaScript bundler):
# Start Metro bundler
npx react-native startKeep this terminal window open - Metro needs to run continuously while developing.
Step 3: Run on Android Simulator
Android Setup (if not done already):
- Install Android Studio from developer.android.com
- Set up environment variables (add to your shell profile):
# For macOS/Linux - add to ~/.bash_profile or ~/.zshrc
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
# For Windows - add to system environment variables
ANDROID_HOME = C:\Users\YourUsername\AppData\Local\Android\SdkCreate an Android Virtual Device (AVD):
- Open Android Studio
- Go to Tools → AVD Manager
- Click "Create Virtual Device"
- Choose a device (e.g., Pixel 7)
- Select a system image (API 33+ recommended)
- Click "Finish"
Run the App:
# In a NEW terminal window (keep Metro running in the first one)
npx react-native run-androidStep 4: Run on iOS Simulator (macOS only)
iOS Setup:
- Install Xcode from the Mac App Store
- Install Xcode Command Line Tools:
xcode-select --install- Install CocoaPods:
sudo gem install cocoapods- Install iOS dependencies:
cd ios
pod install
cd ..Run the App:
# Run on default iOS simulator
npx react-native run-ios
# Or specify a specific simulator
npx react-native run-ios --simulator="iPhone 15 Pro"
# List available simulators
xcrun simctl list devicesStep 5: Verify Everything Works
Once your app is running, you should see:
- Metro bundler running in terminal showing bundle progress
- Simulator/Emulator opens with your app
- Welcome screen with React Native logo and "Welcome to React Native" text
Common Commands While Developing
# Reload the app (in Metro terminal)
r
# Open developer menu (in simulator)
# iOS: Cmd + D
# Android: Cmd + M (Mac) or Ctrl + M (Windows/Linux)
# Clear Metro cache if you encounter issues
npx react-native start --reset-cache
# Clean build if you encounter native issues
npx react-native cleanTroubleshooting Common Issues
Android Issues:
# If build fails, try cleaning
cd android
./gradlew clean
cd ..
# If emulator doesn't start
emulator -list-avds
emulator -avd YourAVDNameiOS Issues:
# Clean iOS build
cd ios
xcodebuild clean
cd ..
# Reinstall pods
cd ios
pod deinstall
pod install
cd ..Metro Issues:
# Reset Metro cache
npx react-native start --reset-cache
# Kill any existing Metro processes
npx react-native start --port=8082Project Structure Overview
Your new project will have this structure:
MyFirstApp/
├── android/ # Android native code
├── ios/ # iOS native code
├── App.tsx # Main React component
├── index.js # App entry point
├── package.json # Dependencies
├── metro.config.js # Metro bundler config
└── babel.config.js # Babel configurationNext Steps
Once your app is running successfully:
- Edit App.tsx to see live changes
- Enable Fast Refresh (should be on by default)
- Try the developer menu (Cmd+D on iOS, Cmd+M on Android)
- Install React DevTools browser extension for debugging
Your React Native development environment is now ready! The app should automatically reload when you make changes to your code.
in roman languague