React Native Hello World Application

In this tutorial you will learn about the React Native Hello World Application and its application with practical example.

React Native Hello World Application

We will start learning React Native by creating a simple “Hello world!” application. The “Hello world!” application is a simple yet complete example for beginners that illustrates the basics of React native. The “Hello world!” application will also gives you a way to test systems and development environment. This tutorial will guide you through writing a simple “Hello World!” application in React Native.

Table Of Contents−

In order to start with this tutorial, you must have React Native and React Native CLI installed, so if you don’t have it installed, follow React Native Installation to have it installed.

Installing React Native CLI

To start quickly, you must have installed the React Native CLI utility which lets you setup your project quickly. Let’s open the terminal and use the following command to get React Native CLI installed.

Create Hello World Project with React Native

Step 1:- Start your Android Emulator and make it live to view the output.

Step 2:- Let’s open the terminal and switch to the project folder and type the following command to initialize a HelloWorld application.

Step 3:- Now, switch to the newly created project directory and run the following command to start the server and launch application on your preferred device/emulator. Since I want to launch it on an Android Device I will use the following command.

If you are on a Mac device and you can use following command.

Since you are running any of the above command for the first time, it takes some time for the app show up in an emulator. If everything runs successfully, you will see the following out in your emulator.

Output 1:-

react-native-hello-world-application-1

Step 4:- Now, when you go to the project folder you will see the following directory structure.

react-native-project-directory-structure

Step 5:- Lets open App.js file in editor of your choice, you will see following lines of code in it.

Step 6:- Now, replace the lines of code in App.js file with following lines of code.

Now, save the file and on reload of application you will see following output –

Output 2:-

react-native-hello-world-application-2

Step 7:- Now, we will add some styling to text. Replace the lines of code in App.js file we just updated with following lines of code.

Now, save the file and on reload of application you will see following output –

Output 3:-

react-native-hello-world-application-3

Lets understand the App.js code line by line –

import React, {Component} from ‘react’:- This is an import statement that imports required component module from the react library and then assign it to React variable.

const instruction: sets to display the platform-specific message.

export default class App extends Component: It defines the default App class that extend the React Component.

render(): It is a function that returns a React element.

return(): This returns the result of layout and UI components.

View: It is the root element container that is used for building the UI.

Text: React element used for displaying text.

style: This is used define a stylesheet or styling classes for components.

styles: It is used to for styling an individual components.

{styles.instructions}>{instructions}:

const styles = StyleSheet.create({}): The StyleSheet class creates the style object that controls the layout and styling of components.

In this tutorial we have learn about the React Native Hello World Application and its application with practical example. I hope you will like this tutorial.