Create Hello World Application using React Native

In this Article, we will learn How to create the first application using React Native. We can create native mobile apps using JavaScript and React. It uses React in order to create rich mobile UI interfaces. As Stated on the React Native official Website,

“With React Native, you don’t build a “mobile web app”, an “HTML 5 app” or a “Hybrid App”. You build a real mobile app that’s indistinguishable from the app developed using Java or Objective-C. Native use the same fundamental blocks as in IOS and Android.”

Now Question comes in your mind, who’s using React Native? As per the Official website, thousands of apps are using React Native, from established fortune 500 to hot new startups. Some of the popular apps which are using react native are Facebook, Instagram, Bloomberg, Pinterest, Uber, Skype etc.
Before getting started, it’s recommended that you must have the basic knowledge of the JavaScript and React as well so that you can understand the React Native apps.

Setting Up the Environment:
In order to start, we need the below application installed in the system

• Node JS and NPM
• Python and Java SE Development Kit (JDK)
• Android SDK, Android Virtual Devices
• Visual Studio Code (Editor)

You can find more details about the Environment setup in the React Native official website. (https://facebook.github.io/react-native/docs/getting-started)
Now, open the command prompt, and run the below command.

It will download the packages required in order to create a react native app. Type create-react-native-app <name-of-the-app> and Hit Enter.

During Installation, npm will ask for one additional package i.e. expo which loads and runs CRNA project written in pure JavaScript without compiling any native code. It is free and open source toolchain built around react native to help you build iOS and Android Projects using JavaScript and React. In case, npm ask for installation of expo, select “Y” i.e. Yes. Then it will ask to choose a Template. Select the Blank template, as we are trying to keep it as simple as possible.

It will take a few minutes in order to Extract project files and installing the dependencies. 

Once the project is created successfully, change the directory to the app name provided by you during application creation (in my case it is HelloWorld)

Run npm start command in order to start the application.

It will start the Expo and shows a QR Code which can be scanned using Expo in Android Devices and starts a metro bundler as a server on localhost.

You can directly run the application on a physical device with the Expo App. Open Play Store in your Android Device.

After installing the Expo app, you need to Scan the QR Code.

Or you can run it on the Android Virtual Machines. Open the AVD Manager in your system, Create an Android Machine by clicking on the Create button. It will ask you few details to provide Device Name, Select Image, Memory Size and other option for the virtual machine. Once Everything is done, click on Start, it will take some time and starts the Virtual Machine.

In Metro Bundler, click on Run on Android device/emulator and application will be loaded in the Android Virtual Device.

An application will be loaded or Started in the Android Virtual Device.

Let’s open the application in the Visual Studio Code and click on App.js file in order to edit.

To show a Simple Message i.e. “Hello World”, we need to change the text between the Text tags. Change the Text to the Hello World and again run the application, you will see the Hello World on the application.

On scanning the QR Code with the Android Device, you will see the desired output as well.

Hope this will help you.

Thanks.