Before creating React Native mobile applications, we need to prepare our development environment. This includes installing the required software, creating a React Native project, and running the application on a development device or emulator.
A development environment is the collection of software and tools required to create, run and test applications.
For React Native development, this can include Node.js, a code editor, React Native or Expo tooling, and a device or emulator for testing.
A basic React Native development setup commonly includes:
Node.js provides the JavaScript runtime used by many React Native development tools.
After installing Node.js, open a terminal and check the installation.
node --versionIf a version number is displayed, Node.js is available from the terminal.
npm is the package manager that comes with Node.js installations.
Check whether npm is available:
npm --versionA version number should be displayed when npm is installed correctly.
React Native development uses JavaScript tooling and packages that are managed through the Node.js ecosystem.
Commands such as npm install and
npx are commonly used during project development.
npm is a package manager used to install and manage JavaScript packages.
For example:
npm installThis command installs the packages defined by the project.
npx allows developers to execute packages and command-line
tools without necessarily installing those tools globally.
For example, Expo projects can be created using:
npx create-expo-app@latestVisual Studio Code is a popular code editor that can be used for React Native development.
You can use it to:
The terminal is used to execute React Native development commands.
In VS Code, you can open the integrated terminal from the Terminal menu.
Terminal → New TerminalYou can then run commands directly inside the project.
There are different ways to start React Native development.
For this course, we will start with Expo because it provides a beginner-friendly development workflow.
React Native
↓
Expo
↓
Mobile ApplicationCreate a new Expo React Native project using:
npx create-expo-app@latest my-first-app
This command creates a new project named
my-first-app.
After creating the project, move into its directory.
cd my-first-appThe terminal is now working inside your React Native project.
If dependencies have not already been installed, use:
npm installThis installs the packages required by the project.
Start the development server using:
npx expo startExpo will start the development environment and display available options for running the application.
The Expo development server manages the development session and provides ways to open the application on a compatible device or development environment.
npx expo startThe terminal will display information and development options.
An Expo application can be tested on a physical Android device using a compatible development workflow.
Make sure the computer and device can communicate as required by the selected Expo development method.
For compatible projects, Expo Go can provide a convenient way to run the application during learning and development.
Expo Go is a development application that can run compatible Expo projects on a physical device.
It is useful for beginners because it reduces the initial setup required to test many React Native applications.
An Android emulator is a virtual Android device that runs on your computer.
It allows developers to test mobile applications without always using a physical Android device.
Android Studio provides the tools needed to create and manage Android virtual devices.
Android Studio is the official development environment for Android platform development.
It provides tools such as:
For native Android development and emulator-based testing, these tools are important.
The Android SDK provides tools and platform components required to build and test Android applications.
When working with native Android projects, React Native uses the Android development environment to build and run the Android application.
Android development tooling requires a compatible Java Development Kit (JDK).
The required JDK version depends on the React Native and Android Gradle tooling versions being used.
Native iOS development requires macOS and Apple's Xcode development tools.
Xcode provides the iOS SDK, simulator and tools required to build and test native iOS applications.
After creating your project, open it in VS Code.
code my-first-appYou can also open the project folder manually in VS Code.
Explore files such as package.json and the application's
source files.
The package.json file contains important information
about the JavaScript project.
It can contain:
{
"name": "my-first-app",
"version": "1.0.0"
}Install Node.js
↓
Check Node & npm
↓
Install / Use Expo
↓
Create Project
↓
Open Project
↓
Install Dependencies
↓
Start Development Server
↓
Run on Device / EmulatorThis is the basic workflow you will use repeatedly while learning React Native.
If the terminal displays an error such as:
'node' is not recognized...Node.js may not be installed correctly or its executable may not be available in the system PATH.
Restarting the terminal after installation can also be necessary.
If project packages are missing, run:
npm installThen start the development server again.
Also make sure the terminal is opened inside the correct project folder.
If an Android emulator does not start, check that:
For this course, students can start with the following setup:
Computer
↓
Node.js
↓
npm / npx
↓
VS Code
↓
Expo
↓
React Native Project
↓
Android Device / EmulatorAs the course progresses, students will learn additional native development concepts and production build workflows.
Before moving to the next lesson, make sure you understand the following:
node --version
npm --version
npx create-expo-app@latest my-first-app
cd my-first-app
npm install
npx expo startOnce the development environment is ready, you can create and run your first React Native application.
npx expo start starts the Expo development server.Question: Which command is used to start the Expo development server?