Create Hello World ApplicationšŸ“±Using React Native

In this article, we will learn how to create your first application using React Native. We can create a native mobile app using JavaScript and React.

We can create native mobile apps using JavaScript and React. It uses React in order to create a rich mobile UI interface. 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, the question comes to 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 that are using React Native include Facebook, Instagram, Bloomberg, Pinterest, Uber, Skype etc.
 
Before getting started, it’s recommended that you have the basic knowledge of JavaScript and React 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.
  • NodeJS and NPM
  • Python and Java SE Development Kit (JDK)
  • Android SDK, Android Virtual Devices
  • Visual Studio Code (Editor) 
Installing and setting up the environment for React Native apps is easy. You have to download the packages from the respective site and click on Next and Next buttons:-). Be sure that you have installed all the mentioned applications needed for the React app.
 
You can find more details of the process of setting up the environment on the React Native official website. Now, open the command prompt, and run the below command.
 
Create Hello World Application Using React Native 
 
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.
 
Create Hello World Application Using React Native
 
During the installation, the npm will ask for one additional package, i.e., expo which loads and runs the 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 asks for the 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. 
 
Create Hello World Application Using React Native 
 
It will take a few minutes to extract the project files and install the dependencies.
 
Create Hello World Application Using React Native
 
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).
 
Create Hello World Application Using React Native
 
Run the npm start command so as to start the application.
 
Create Hello World Application Using React Native
 
It will start the Expo and show a QR code which can be scanned using Expo in Android devices to start a metro bundler as a server on the localhost.
 
Create Hello World Application Using React Native
 
You can directly run the application on a physical device with the Expo App. Open Play Store on your Android Device.
 
Create Hello World Application Using React Native
 
After installing the Expo app, you need to scan the QR Code.
 
Create Hello World Application Using React Native 
 
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 for a few details to provide the Device Name, select Image, Memory Size, and other options in the virtual machine.
 
Once everything is done, click on "Start". It will take some time to start the Virtual Machine. 
 
Create Hello World Application Using React Native
 
After the virtual device starts, you will see something like below.
 
Create Hello World Application Using React Native 
 
In Metro Bundler, click "Run on Android device/emulator" and the application will be loaded in the Android Virtual Device.
 
Create Hello World Application Using React Native
 
An application will be loaded or started in the Android Virtual Device.
 
Create Hello World Application Using React Native
 
Let’s open the application in Visual Studio Code and click on App.js file to edit.
 
Create Hello World Application Using React Native
 
To show a simple message, like “Hello World”, we need to change the text between the Text tags. Change the text to "Hello World" and run the application again. You will see Hello World on the application.
 
Create Hello World Application Using React Native
 
On scanning the QR Code with the Android device, you will see the desired output as well.
 
Create Hello World Application Using React Native
In my next article, we will understand the project structure of React Native. Hope this will help you.
 
Thanks.