Hello World Application in React

Hello World Application in React

In the   past tutorials, we learnt the various ways of using the ReactJS library in our project, that is: by adding React directly from the CDN  to our HTML website or by using create-react-app command via the terminal.

In this tutorial, we will create a simple hello world application in react. We will be creating our application via the command prompt using the create-react-app command.

Prerequisites

To follow along with this tutorial, you need to have NodeJS installed and running on your system. This you can download from its official website here.

Once you have this properly installed, you can head over to your command prompt and start running NPM commands.

Creating the Application

To create our hello world application, open the command prompt of your local machine and type the following command:

This command will install the react create-react-app package globally in our system, enabling us to run commands using the key word `create-react-app`

After this installation, simply create your react application with the desired name of choice. In this tutorial, our application name will be “hello-react”. Hence to create this application use the following command

This will take some time to bundle and download all the required files depending on your internet speed.

Running the Application

When the application creation is complete, use the following command to open the application on an editor (visual studio code in this case) and the run the application to see it live on your browser

The command above will open the application on the visual studio code editor, and run the application live on port 3000.

Form the visual studio code text editor, edit the src/App.js file to say hello world to the react world. Your src/App.js file should be similar to the code snippet below.

See the Pen Hello World React by Ogbonna Vitalis (@agavitalis) on CodePen.

On your browser, the following screen should be seen.

Hello react application

Congratulations, you have successfully created your first application in React, In the next tutorial, we will explore the amazing features of react.

Join the discussion

1 comment
  • I’ve been surfing on-line more than 3 hours these days, yet I by no means found any interesting article like yours. It’s pretty worth sufficient for me. In my view, if all website owners and bloggers made just right content as you probably did, the internet can be much more useful than ever before.

Vivvaas’ Corner

Learn skills that matters from a community of talented developers and writers whose joy is to write in a way that you will understand.