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.


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:

```npm install -g create-react-app ```

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

create-react-app hello-react

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

cd hello-react
code .
npm start

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

React Hello World Application-1

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 React Hello World by w3resource (@w3resource) on CodePen.

On your browser, the following screen should be seen

React Hello World Application-2

Previous: Introducing JSX
Next: State and Lifecycle