Beginners Guide: 5 Steps To Start A New React Native Project in 2023

React Native is a popular framework for building cross-platform mobile apps using JavaScript and React. If you’re new to React Native and want to get started with building your first app, this article will walk you through the process of creating and starting a new project in React Native.

Before we begin, make sure that you have Node.js and npm installed on your machine. You can download and install them from the official website if you haven’t already.

Step 1: Installing the React Native CLI

The first step in creating a new React Native project is to install the React Native CLI (Command Line Interface). This tool allows you to create and manage React Native projects from the command line.

To install the React Native CLI, open your terminal or command prompt and run the following command:

npm install -g react-native-cli

This command will install the React Native CLI globally on your machine, so you can use it to create new projects from anywhere on your computer.

Step 2: Creating a new React Native project

Once you have installed the React Native CLI, you can create a new React Native project by running the following command:

react-native init MyProject

Replace “MyProject” with the name of your project. This command will create a new directory with the specified project name and all the necessary files and folders for a React Native project.

Note: If you’re using React Native version 0.60 or later, you can use the “npx” command instead of the “react-native” command to create a new project.

For example:

npx react-native init MyProject

Step 3: Understanding the project structure

After running the “react-native init” command, you should see a new directory with the name of your project. This directory contains all the files and folders necessary for a React Native project, including:

• node_modules: This folder contains all the third-party libraries and dependencies used in your project.
• ios: This folder contains the Xcode project files for building and running your app on iOS devices.
• android: This folder contains the Android Studio project files for building and running your app on Android devices.
• index.js: This is the entry point of your React Native app. It contains the code that initializes your app and registers your root component.
• App.js: This is the default root component of your app. It contains some sample code to get you started.

Step 4: Starting the development server

Now that you have created a new React Native project, you can start the development server by running the following command in your project directory:

npm start

This command will start the development server and open a new window in your default browser, showing the Metro Bundler interface. The Metro Bundler is a tool that builds and packages your JavaScript code and serves it to your app when it runs.

Note: If you’re using Expo to develop your React Native app, you can use the “expo start” command instead of “npm start”. This command will start the development server and open the Expo client in your browser, allowing you to run your app on a physical device or simulator.

Step 5: Running your app on a simulator or device

Once the development server is running, you can run your app on a simulator or device by following these steps:

For iOS:

1. Open the “ios” folder in your project directory using Xcode.
2. Select your device or simulator from the list of available devices.
3. Press the “Run” button to build and run your app on the selected device or simulator.

For Android:

1. Open the “android” folder in
2. your project using Android Studio. You may need to download and install the required Android SDKs and build tools if they haven’t been installed yet.
3. Next, open the Android Virtual Device Manager and create a new virtual device if you don’t have a physical device to test on. You can choose from various device configurations, such as screen size, Android version, and more.

Once you have a device set up, you can start debugging your app using Android Studio’s debugging tools. You can set breakpoints, step through code, inspect variables, and more, just like in Xcode. Additionally, Android Studio also provides various profiling tools for tracking performance, such as the CPU profiler and the memory profiler.

Aside from these platform-specific tools, there are also various third-party debugging tools that you can use to debug your React Native app, such as Flipper, Bugsnag, and Sentry. These tools provide additional functionality for debugging and monitoring your app, such as crash reporting, network tracing, and more.

In conclusion, debugging is an essential part of the development process, and it’s important to be familiar with the various debugging tools and techniques available for React Native. By using these tools effectively, you can identify and fix bugs in your app more efficiently, leading to a smoother development process and a better end product.