ReactJS Hello World Application

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

In this tutorial we will use the same application that we created in ReatcJS Installation.

Creating ReactJS Hello World Component

In this example we will create a component that will print “Hello World!” string.

Step 1:- Let’s open src/App.js, that we created in helloworld application.

Step 2:- Now, delete the existing code and put the following code in it and save it-

src/App.js will now look like this –

Here, the first statement is used to include the react module, next we are creating a “App” Component by creating a “App” class that extends the Component class.

Inside of “App” class we have created a render method which is a part of React.Component class, it return a “W3Adda – Hello World!” message enclosed in <h1></h1> tag.

Next, we have following statement –

here, we are App component to be mounted to a DOM Element that we have available in public/index.html file –

Step 3:- Let’s open the terminal again, change directory to your project folder and type the following command in order to run the server.

Step 4:- Now open the following URL in browser to view the output

http://localhost:3000

Step 5:- You will see the following screen.