How to Create a Hello World App in React.js ? Creating your First React App

In this article we will create a simple React.js App – Hello World.

Creating React App

Create a new folder in your computer in location of your choice where you can find it easily.

Example: hello_world_app

Mac Users

CreateReact App using Terminal
Create React App using Terminal

1- Open Terminal

2- Change your current directory to the folder we created

Example: cd ~/desktop/hello_world_app

3- Now, run this command –

npx create-react-app .

This command will take some time to setup a React boiler plate app with all the initial setup included.

At the end when successful you will receive a Happy Hacking Message.

ReactJS Hello World App

At this point our app is ready to run and we can go back to our Code Editor – Visual Studio Code and work on the project.

React app
Code Editor and Folder Structure

Also note Visual Studio Code also provides a Terminal interface so its your choice if you would like to use it or Mac’s Terminal.

To keep the tutorial relevant for everyone, I will be using Mac’s Terminal.

4- Lets build the app

Use this command in the Terminal:

npm run build

npm run build
npm run build

5- Start the app

npm start

This will start a local server in your computer and you can access the app on your local host.

npm start ReactJS app hello world app
npm start

Now we can access our app in the browser, at start it looks like in the image below.

React App Example
React App

In further chapters we will be exploring this further and making changes to our hello_world_app

Windows Users

1- Open Command Line

2- Follow Step 2 to 5 from the Mac setup above.

React File Structure

package.json

package.json file contains all the app information like – name, its dependencies and scripts

Our app has 3 dependencies which are –

  • react – the library itself
  • react-dom – this helps in rendering content to the dom
  • react-script – this allows us to define shorthand commands for start and build

index.html

In React, everything is routed through a single file and index.html is that file.

The file contains very simple HTML code, but whats to notice is the <div> element, which has an id assigned to it “root”. This is where React application outputs the main App component, which is basically the primary Javascript file that deals with the rest of components/Javascript files.

So, any component we create like header or footer that will output here

Why this way ?

React is known as single page application library or SPA.

Which basically means, whole application fits on one page.

This comes with many benefits like –

  • helps keep data and view in synchronisation
  • maintain application state
  • fast navigation between application pages
  • reduces static resource loading

src folder

index.js

What it does ? here

The file imports –

  • react – the main library
  • react-dom – this helps in rendering in the browser

and then contains the App component.

ReactDom.render() is the method that allows us to render the App component and specify where to render it.

It takes 2 parameters as follows –

1- <App/> this is what we want to render

2- document.getElementById(root) – helps specify where to render the component

In this case we say render the App component in the root div (which was present in index.html file).

Default image
Navjot Singh Virk
Navjot is a Hobby Blogger from Ireland and loves to create content to help people. He makes time on weekends to work on this blog. And has a full time position at Verizon Media as Lead Technical Solutions Consultant, which he loves and thrives at. His Skills include in-depth knowledge of SEO, Javascript, Advertising, HTML and Java. And his other hobbies include Investing, Gardening and playing Table Tennis.