1. Introduction

Before developing mobile applications with React Native, we need to configure a proper development environment.

React Native uses JavaScript or TypeScript to build mobile applications. Therefore, developers need tools that can execute JavaScript, manage project dependencies, edit code, and run the application.

In this tutorial, we will install and configure:

1. Node.js

2. npm

3. Visual Studio Code

4. Expo development tools

5. React Native project environment

By the end of this tutorial, you will be able to create and run a basic React Native project.

2. What Is Node.js?

Node.js is an open-source JavaScript runtime environment.

It allows developers to execute JavaScript outside a web browser.

React Native development tools use Node.js to run development servers, build tools, and other JavaScript-based utilities.

Features of Node.js

• Executes JavaScript outside browsers.

• Uses the V8 JavaScript engine.

• Supports asynchronous operations.

• Provides access to a large package ecosystem.

• Supports modern JavaScript development tools.

Why Do We Need Node.js for React Native?

Node.js is required by many React Native development tools.

For example:

• Expo development server.

• Project creation tools.

• JavaScript package management.

• Development and build utilities.

3. What Is npm?

npm stands for Node Package Manager.

It is commonly installed automatically with Node.js.

npm helps developers install, update, and manage packages required by their applications.

For example, a React Native project may contain dependencies for navigation, networking, user interfaces, and other features.

Common npm Commands

Check npm version:

npm -v

Install a package:

npm install package-name

Install project dependencies:

npm install

Update packages:

npm update

Start a project script:

npm start

4. Difference Between Node.js and npm

Node.js	npm
JavaScript runtime	Package manager
Executes JavaScript outside browsers	Installs and manages packages
Provides runtime environment	Manages project dependencies
Used by development tools	Used to install development tools

Node.js provides the environment, while npm helps manage the packages used in that environment.

5. System Requirements

Before installing the development tools, check your computer.

Recommended basic setup:

• Operating System: Windows, macOS, or Linux.

• RAM: 8 GB or more recommended.

• Storage: Sufficient free disk space.

• Internet: Required for downloading tools and dependencies.

• Code Editor: Visual Studio Code.

• Terminal: Command Prompt, PowerShell, or a compatible terminal.

For Android emulator development, additional system resources may be required.

6. Step-by-Step Node.js Installation

Step 1: Open the Official Node.js Website

Open:

https://nodejs.org/

Download an appropriate supported LTS version for your operating system.

The LTS version is generally recommended for beginners and stable development environments.

Step 2: Run the Installer

After downloading the installer:

1. Open the downloaded installer.

2. Accept the license agreement.

3. Select the installation location.

4. Keep the recommended installation components.

5. Complete the installation.

On Windows, keep the option that adds Node.js to the system PATH enabled.

Step 3: Verify Node.js Installation

Open Command Prompt or PowerShell.

Run:

node -v

If Node.js is installed correctly, the terminal displays its version.

Example:

v22.x.x

The exact version may differ depending on the installed release.

Step 4: Verify npm Installation

Run:

npm -v

The terminal should display the installed npm version.

If both commands work, Node.js and npm are ready.

7. Install Visual Studio Code

Visual Studio Code is a lightweight code editor used for writing and managing React Native projects.

Step 1: Download VS Code

Open:

https://code.visualstudio.com/

Download the version suitable for your operating system.

Step 2: Install VS Code

1. Open the downloaded installer.

2. Follow the installation instructions.

3. Complete the installation.

4. Launch Visual Studio Code.

Step 3: Install Useful Extensions

Open the Extensions panel in VS Code.

You can install:

• Prettier – Code formatter.

• ESLint – JavaScript code quality.

• React Native Tools – React Native development assistance.

These extensions provide useful development support. They are not all mandatory for running a React Native project.

8. Set Up React Native Development Using Expo

Expo provides tools and services that simplify React Native application development.

For beginners, Expo is a convenient way to create and run a React Native application.

Step 1: Open the Terminal

Open the terminal inside Visual Studio Code.

You can also use Command Prompt or PowerShell.

Step 2: Check Node.js and npm

Run:

node -v
npm -v

Make sure both commands work before proceeding.

Step 3: Create a React Native Project

Run:

npx create-expo-app@latest MyFirstReactNativeApp

Explanation:

• npx executes a package command.

• create-expo-app creates an Expo project.

• MyFirstReactNativeApp is the project name.

Wait until the project creation process finishes.

Step 4: Open the Project Folder

Run:

cd MyFirstReactNativeApp

This command moves the terminal into the project directory.

Step 5: Open the Project in VS Code

Run:

code .

If the code command is not available, open VS Code manually and select the project folder.

Step 6: Start the Development Server

Run:

npx expo start

Expo starts the development server and displays a QR code in the terminal or development interface.

9. Run Your React Native Application

There are multiple ways to run your application.

Option 1: Using Expo Go

1. Install Expo Go on your Android or iOS device.

2. Connect your phone and computer to a suitable network.

3. Start the Expo development server.

4. Scan the displayed QR code.

5. Open the project in Expo Go.

The application should load on your mobile device.

Option 2: Using Android Emulator

If Android Studio and an Android Virtual Device are configured:

1. Start your Android emulator.

2. Open the Expo project terminal.

3. Run:

npx expo start

1. Press a in the Expo terminal when the development server is ready.

Expo will attempt to open the application in the Android emulator.

10. Understanding the React Native Project Structure

An Expo project may contain the following files and folders:

MyFirstReactNativeApp/
│
├── app/
│   ├── _layout.tsx
│   └── index.tsx
│
├── assets/
│
├── components/
│
├── node_modules/
│
├── app.json
├── package.json
├── package-lock.json
└── tsconfig.json

The exact structure depends on the Expo template you select.

Important Files and Folders

app/

Contains application screens when using Expo Router.

assets/

Stores images, fonts, and other static resources.

components/

Contains reusable UI components when included or created in the project.

node_modules/

Contains installed project dependencies.

app.json

Contains Expo application configuration.

package.json

Contains project information, scripts, and dependency declarations.

package-lock.json

Records the resolved npm dependency versions.

tsconfig.json

Contains TypeScript configuration.

11. Practical Example: Create Your First React Native Screen

For a project using Expo Router, open the main route file, commonly app/index.tsx, and replace its contents with:

import { View, Text, StyleSheet } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>

      <Text style={styles.title}>
        Welcome to React Native
      </Text>

      <Text style={styles.subtitle}>
        Development Environment Ready!
      </Text>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f7ff',
    padding: 20
  },

  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 12,
    color: '#1e40af'
  },

  subtitle: {
    fontSize: 16,
    color: '#333333'
  }
});

If your project uses JavaScript, the same component can be saved in the appropriate route file with the TypeScript annotations removed.

Expected Output

Your mobile screen should display:

Welcome to React Native

Development Environment Ready!

This confirms that your basic application screen is running.

12. Useful npm Commands for React Native Developers

Command	Purpose
node -v	Check Node.js version
npm -v	Check npm version
npm install	Install dependencies
npm install package-name	Install a package
npm uninstall package-name	Remove a package
npm update	Update dependencies
npm start	Run the configured start script
npm run	Display available project scripts

13. Common Installation Errors and Solutions

Problem 1: 'node' Is Not Recognized

Reason: Node.js may not be installed correctly or its installation directory may not be included in PATH.

Solution:

1. Confirm that Node.js is installed.

2. Check the system PATH.

3. Restart the terminal.

4. Reinstall Node.js if necessary.

Problem 2: npm Command Is Not Working

Reason: npm may not be installed correctly or the terminal may not recognize its PATH.

Solution:

1. Verify Node.js installation.

2. Restart the terminal.

3. Run npm -v again.

4. Repair the Node.js installation if necessary.

Problem 3: Expo Project Is Not Starting

Reason: Dependencies may be incomplete, the terminal may be in the wrong directory, or the development server may encounter a configuration issue.

Solution:

1. Open the correct project folder.

2. Run npm install if dependencies are missing.

3. Run npx expo start again.

4. Read the error message displayed in the terminal.

Problem 4: QR Code Is Not Connecting

Reason: The mobile device and computer may not be able to communicate over the current network.

Solution:

1. Check the network connection.

2. Make sure Expo Go is installed.

3. Try the tunnel connection option if the local network blocks device communication.

4. Scan the newly displayed QR code.

14. Development Environment Checklist

Before starting React Native development, confirm the following:

• Node.js installed successfully.

• npm working correctly.

• VS Code installed.

• Expo project created.

• Project dependencies installed.

• Expo development server started.

• Application opened on a mobile device or emulator.

15. Best Practices

• Prefer a supported Node.js LTS release.

• Keep Node.js and npm versions compatible with project requirements.

• Use npm for dependency management.

• Avoid installing unnecessary global packages.

• Keep project dependencies updated carefully.

• Use the official Expo documentation.

• Keep your project structure organized.

• Test applications on real devices and emulators.

16. Conclusion

Setting up the development environment is the first important step in React Native development.

Node.js provides the JavaScript runtime required by development tools, npm manages project dependencies, and Visual Studio Code provides an environment for writing application code.

Expo simplifies the process of creating and running React Native applications.

After completing this tutorial, you should have a working React Native development environment and a basic mobile application running on your device or emulator.

17. Frequently Asked Questions (FAQs)

Q1. What is Node.js?

Node.js is a JavaScript runtime that allows JavaScript to execute outside a web browser.

Q2. What is npm?

npm is a package manager used to install and manage JavaScript project dependencies.

Q3. Is Node.js required for React Native development?

Node.js is required by the standard React Native and Expo JavaScript development toolchains.

Q4. Is npm installed with Node.js?

Yes. npm is normally included with the Node.js installer.

Q5. Which Node.js version should beginners install?

A supported LTS version is generally recommended.

Q6. Is Visual Studio Code necessary?

No. Other code editors can be used, but Visual Studio Code is a popular choice.

Q7. What is Expo?

Expo is a framework and set of tools that simplifies React Native application development.

Q8. Can I run React Native applications without Android Studio?

Yes. You can use Expo Go on a physical device without installing Android Studio.

Q9. What is node_modules?

It is the directory containing the installed dependencies used by a JavaScript project.

Q10. What is package.json?

It is a project configuration file containing metadata, scripts, and dependency declarations.

Q11. What is npx?

npx is an npm command-line tool that can execute package commands without requiring a permanent global installation.

Q12. Can I develop React Native applications on Windows?

Yes. Windows supports React Native Android development. Native iOS builds require Apple's macOS and Xcode environment.