React Native Tutorial | Module 1: Introduction to React Native

Module 1: Introduction to React Native

Course Overview: This module introduces React Native, its purpose, advantages, and how it differs from other cross-platform frameworks. You will also learn how to set up your development environment and run your first mobile application on Android and iOS.

✅ What is React Native?

React Native is a JavaScript framework developed by Facebook for building native mobile apps using React. It allows you to write a single codebase that works on both Android and iOS platforms, giving your app a truly native look and feel.

Advantages of React Native:

• Single codebase for both Android and iOS
• Faster development cycles with Hot Reloading
• Access to native modules for device-specific functionality
• Large community support and rich ecosystem

✅ Comparison with Other Cross-Platform Frameworks

React Native differs from frameworks like Flutter or Xamarin in several ways:

• Flutter: Uses Dart and renders UI via its own engine. React Native uses JavaScript and native components.
• Xamarin: Uses C# and requires more platform-specific code. React Native allows greater code sharing.
• Performance: React Native provides near-native performance and smooth UI interactions.

✅ Setting Up the Development Environment

Proper setup is essential to start building React Native apps.

1. Install Node.js, npm, and Yarn

Node.js is the runtime environment, and npm/yarn are package managers. Install Node.js (LTS version) from nodejs.org and verify:

node -v
npm -v
yarn -v

2. Install React Native CLI or Expo CLI

Choose React Native CLI for a bare project or Expo CLI for faster prototyping.

# React Native CLI
npm install -g react-native-cli

# Expo CLI
npm install -g expo-cli

3. Set Up Android Studio & Xcode

Install Android Studio for Android development and Xcode for iOS (macOS only). Ensure environment variables are correctly set:

# Android SDK
ANDROID_HOME=path/to/android/sdk

# iOS (Xcode)
xcode-select --install

4. Running Your First React Native App

Create a new project and run it on your simulator or device:

# React Native CLI
npx react-native init MyFirstApp

# Expo CLI
expo init MyFirstApp

Run the app:

# React Native CLI (Android)
npx react-native run-android

# React Native CLI (iOS)
npx react-native run-ios

# Expo
expo start

✅ Using VS Code for React Native

Visual Studio Code is a lightweight editor that works perfectly for React Native development. Here’s how to use it effectively:

1. Open Your Project

• Launch VS Code.
• Click File → Open Folder and select your project folder (e.g., MyFirstApp).

2. Open Integrated Terminal

• Press Ctrl + ` (backtick) to open the terminal.
• Make sure you are in the project folder: cd MyFirstApp

3. Run Your App

Use terminal commands to run the app on Android, iOS, or Expo:

# React Native CLI (Android)
npx react-native run-android

# React Native CLI (iOS)
npx react-native run-ios

# Expo
expo start

4. Hot Reload / Fast Refresh

• Make changes in your code and save.
• React Native updates the app instantly.
• For Expo, press R in terminal; for CLI, enable Fast Refresh in the developer menu.

5. Debugging

• You can use console.log() statements to debug code.
• Optional: VS Code extensions like React Native Tools can add breakpoints and advanced debugging, but they are not required.

✅ Summary

This module introduces the foundation of React Native and explains how to use VS Code to write, run, and debug your applications. By the end, you can set up your environment, create a project, and run your first app on Android or iOS.