DEV Community

Kelvin Sowah
Kelvin Sowah

Posted on

Initialize A React Native And Expo CLI Project

Welcome back, readers, to another blog where I attempt to clarify a technical issue or aid you in your effort to improve as a developer. This post will be focused on using the Expo CLI to launch a React Native project.

What is React Native?
The very popular JavaScript library React, can be used with the React Native JavaScript framework to build native applications. The ability to use JavaScript to develop applications for both iOS and Android is one of the many advantages of React Native. To build an iOS application, you don't need to know Objective-C or Swift, and to make an Android app, you don't need to know Java.

Due to its ability to create a single application that runs on two separate OS platforms, React Native helps speed up development significantly. Additionally, because it makes use of React, you may employ components and benefit from their reusable nature. I strongly advise reading the documentation for React Native, which is excellent in my opinion and offers nice and understandable examples.

Getting Started
Step #1

Make sure the recent version of Node.js is installed on your machine. Run the following command in your terminal to determine what version you are using:

node -v
Enter fullscreen mode Exit fullscreen mode

Click here for information on installing or updating to the most recent version if you don't already have Node.js installed.

Step #2

Once you have Node.js installed run the following command:

npm install -g expo-cli
Enter fullscreen mode Exit fullscreen mode

Your PC will then have the Expo CLI installed globally. If you're using Mac OS, you might need to add sudo after the aforementioned command. Then, in order to access your computer, you must enter the password;
with Windows, this is not essential.

Step #3

By executing the following command after the Expo CLI has been installed successfully, you can launch a brand-new project:

expo init <name of project goes here>
Enter fullscreen mode Exit fullscreen mode

After the project is created, you must start the development server and change directories to the newly created folder. You can do this by executing the following commands:

cd <name of project goes here>
npm start
Enter fullscreen mode Exit fullscreen mode

A new window in your browser will open after you perform these instructions and provide details about your project.

Here is an illustration of how this will function:

expo init quiz-app
cd quiz-app
npm start
Enter fullscreen mode Exit fullscreen mode

You now have a brand-new React Native project, but how can you preview it. I'll address this concern in the part that comes next.

Preview Your Project
You must install the Expo Client App on your smartphone in order to preview your newly created project. You may either do this on the App Store or the Google Play Store, depending on the phone you have.

After installing the Expo Client App, scan the QR Code that appeared when you typed npm start into the terminal. You will first need to wait a few minutes when your project first bundles and loads. A brief notice will appear in the middle of the screen after the page has finished loading. That is essentially how your application is running right now.

In the event that you only own an iPhone or an Android smartphone, you can use simulators to easily operate on both platforms. You must first download Android Studio and Xcode in order to use the simulators.

Due to Apple's restrictions, you will not be able to download Xcode if your operating system is Windows.

Please click here for thorough instructions on setting up the Android simulator.

Please click here for instructions on how to launch the iPhone simulator.

That will sum it all up, thanks for reading, and I wish you well as you work to master React Native and Expo to become a top mobile app developer.

Top comments (0)