How to Create React Native app with React Native CLI or Expo CLI

The present article guides on how to create a React Native project. It also installation of all the needed software and dependencies to make sure your created React Native app works flawlessly. It is possible to create a React Native app through React Native CLI or Expo CLI. In the Reactjs Certification, you may get knowledge on all the fundamentals of React Native. However, the React tutorial may not be perfectly aligned to teach you how to create a React Native app. Before learning how to create it, you need to first be familiar with what is React Native, so let’s get started:

What is React Native?

React Native is an open-source cross-platform based mobile application development framework. It was introduced in 2015 by Facebook. Moreover, React Native is regarded as a favored alternative of an open-source cross-platform based mobile application development framework which is developed by Google. It is known that React Native uses messages from the JavaScript thread and not from CSS or HTML. The react learning path highlights the fundamentals as well advanced concepts of React Native.

Installation of React Native with Expo CLI or React Native CLI:

When you intend to Learn Reactjs Step By Step, how to install it is also an important part. To get started with the installation of React Native, you can either use Windows or Linux, or Mac OS. On macOS, both the Android and iOS environments are available. But Windows and Linux only support the Android environment. In this guide, for installation, it is assumed that we would use macOS. However, you can follow the identical instructions for Linux and Windows too.

The expo CLI is a recommended way for creating the new React Native app for beginner developers since it has a collection of tools built around the React Native so we only need to have a recent version installed of the nodejs and a mobile phone or emulator device to get started within minutes along with the real-time app testing. On the other hand, when we use expo CLI to develop our application you are limited to the Expo ecosystem, and it comes to rescue the newbie that resolves the issues such as manual project setup, file system management, etc.

Now let’s look at each of these two methods for installation:

i. Installation of Expo CLI:

For Windows OS, initially, use npm for installation of the Expo CLI command-line utility:

npm install  -g expo-cli

ii. Installation of React Native CLI:

For Mac OS:

Firstly, install the React Native command line interface. It is recommended to install Watchman and Node using the following commands. Make sure to run the following commands in a Terminal after you install Homebrew:

brew install node

brew install watchman

The majority of the tools are equipped with Xcode. If you already installed Node over your system, ascertain that it is Node 8.3 or newer. For optimal performance, it is recommended to install Node which is a tool by Facebook for observing changes within the file system.

For Windows and Linux:

You require the Node, the React Native command line interface, a JDK, Python, and Android Studio. Though you can use any editor you like for developing your app, it is mandatory to install Android Studio for setting up the required tools. These tools ultimately help you build your React Native app for Android.

There is a built-in command line interface available in React Native. Instead of installing and managing a particular version of the CLI globally, you should access the existing version at runtime through npx. This version comes along with Node.js.

Through the ‘npx react-native <command>’, the existing stable version of the CLI gets downloaded and operated whenever the command is run. If you already installed a global ‘react-native-cli’ package then you need to remove it. This is because it can lead to unnecessary issues.

iii. Installation of Xcode:

 For Mac OS, the simplest way to install Xcode is through the Mac App Store. 

Click this link to install Xcode.

When you install Xcode, it also installs the iOS Simulator along with all vital tools necessary to build your iOS app. In case you earlier installed Xcode, ascertain that its version is 9.4 or newer.

It is mandatory to install the ‘Command Line Tools for Xcode. For that open Xcode and select ‘Preferences…’ from the Xcode menu. Now navigate to the ‘Locations’ panel and install the tools after choosing the newest version within the ‘Command Line Tools’ dropdown.

It is also necessary to install ‘CocoaPods’. For that, use the below command:

sudo gem install cocapods

iv. Installation of Android Studio:

First of all, download and install Android Studio from the below link

Download and Install Android Studio

Select a Custom setup when asked to choose an installation type. Confirm that the boxes beside all of the below are checked:

• Android Virtual Device

• Android SDK

• Android SDK Platform

In case the checkboxes are grayed out, there is a chance to install such components in the future. Also, you can install and set up a device or even an emulator for Android development.

v. Installation of IDEs:

On any editor or IDE you like, you can accomplish app development through React Native. For that, you can use Visual Studio Code, IntelliJ, Atom, Sublime Text, and more. You are independent to choose any IDE or editor. After you have set up your favorite editor, you can begin with the development of apps through React Native.

1. Create React Native app through Expo CLI:

Execute the below commands to create a React Native project entitled ‘MyFirstProject’ through Expo CLI:

expo init MyFirstProject

cd MyFirstProject

npm start

This will begin a development server. For running this app, install the Expo client app on your Android or iOS phone. 

Click here to install the Expo client app.

Now connect to the same wireless network like that on your computer. If you are using Android OS then you need to use the Expo app for scanning the QR code directly from your terminal to open that project. If you are using iOS then use the inbuilt QR code scanner of the Camera app.

After you are done with the setup of Xcode or Android Studio, it is allowed to launch your app on a real device or an Android virtual device. Run the following commands for that:

npm run android

If you use the iOS simulator then run the following command:

npm run ios

2. Create React Native app through React Native CLI:

Execute the below commands to create a React Native project entitled ‘MyFirstProject’ through React Native CLI:

npx react-native init MyFirstProject

cd MyFirstProject

npx react-native start

Executing the above commands will initiate a Metro Bundler development server. After you have set up Xcode or Android Studio, it is possible to launch your app on a real device or an Android virtual device through USB. For that, run the following command

npx react-native run-android

On the iOS Simulator, run the following command:

npx react-native run-ios

After that, you will notice the app running in the simulator or emulator or a real device.

Summary

React-native is getting much popularity in the domain of cross-platform application solutions, and the react-native continues to leave its mark for the developers and industries to make use of it with every aspect. I hope that this article helps you get started quickly with React Native by learning and publishing cross-platform apps in no time, Keep learning.

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

GET TEST NOW