React Native – Setup

1. Setting Up the Development Environment

Prerequisites

Before you begin, ensure you have the following installed on your system:

• Node.js: React Native relies on Node.js, a JavaScript runtime.
• Watchman: A tool from Facebook for watching changes in the filesystem (required for macOS).

Installation Commands:

# Install Node.js (includes npm)
brew install node

# Install Watchman
brew install watchman

Installing React Native CLI

React Native provides a command-line interface (CLI) to create, build, and run React Native apps.

npm install -g react-native-cli

2. Creating a New React Native Project

Use the React Native CLI to create a new project.

npx react-native init MyNewProject

This command will create a new folder named MyNewProject with the necessary files and directories.

3. Understanding the Project Structure

A typical React Native project has the following structure:

MyNewProject
├── android         # Android-specific code and settings
├── ios             # iOS-specific code and settings
├── node_modules    # Installed npm packages
├── src             # Your application code
├── App.js          # Main application component
├── package.json    # Project metadata and dependencies
└── ...             # Other configuration files

4. Running the Application

iOS

Ensure you have Xcode installed on your macOS. Open the project in Xcode.

cd MyNewProject
npx react-native run-ios

Android

Ensure you have Android Studio installed and an Android Virtual Device (AVD) configured.

cd MyNewProject
npx react-native run-android