React – Hello World example

In this article we will learn how a react UI wired in an HTML page (an index page) and display Hello World text in a paragraph. We had already learned about basic setup, JSX and ES6 concept in earlier tutorial. This tutorial is very basic and don’t expect much here in terms of advance features, we will learn progressively further in this tutorial series.

Tools & Libraries used:

  1. React 16.x
  2. NodeJS 6.x
  3. NPM 5.x

Get the source code for this tutorial using any one of the way defined below:

  1. Download React tutorial series source code zip. Unzip it. You can find this tutorial source code in 01-hello-world folder.
  2.  git clone

Note: This tutorial tested on a Mac OS V10.13 machine. For developers using windows machine, command syntax will change a bit.

Files & Folders Structure

Hello World project folder structure

Hello World project folder structure

In our project structure we have abstraction between how we keep source code for development and they actually get distributed for deployment on web servers using build tool.

NPM dependency and build file

We are using NPM for client side libraries dependency management and package.json source is given below:

  "name": "01-hello-world",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-scripts": "1.0.17"
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"

index HTML file

index.html file which is initialisation point for Single Page App which have one div with id root within body.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    <title>React App</title>
      You need to enable JavaScript to run this app.
    <div id="root"></div>
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.

index JS file

index JS file is starting point for React application.

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<p>Hello world</p>, document.getElementById('root'));

We had included React and ReactDOM .

We are using ReactDOM.render method which takes two arguments, first JSX expression for simple UI code and second HTML DOM element where React will place the UI.

Running the application in development mode

In a terminal, go to project folder 01-hello-world and run following commands

$ npm start

Compiled successfully!

You can now view 01-hello-world in the browser.

  Local:            http://localhost:3000/
  On Your Network:

Note that the development build is not optimized.
To create a production build, use yarn build.

Note: IP in On Your Network will be your system IP.

You will see page like below when you access the URL:

Hello World Project Web Page

Hello World Project Web Page

Build application for deployment on web server

In a terminal, go to project folder 01-hello-world and run following commands:

$ npm run build

> [email protected] build /Volumes/Drive2/projects/project_workspace/github/react-examples/01-hello-world
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  39.08 KB  build/static/js/main.12cfb16d.js

The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "",

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Build folder contain web server deployable package and it looks like below:

Node app production build folder structure

Node app production build folder structure

Build script created a package optimised for production deployment. It joins many js files in one and minified them for better performance. So, you can serve it from any web server.

And that’s it. Enjoy.

Download Icon SmallDownload the source codeGithub IconFollow Project On Github


  1. React Setup and getting started 
  2. NPM & Front End Packaging
  3. Webpack module bundle concepts
  4. NodeJS and NPM installation guide
  5. Babel for enabling ES6
  6. Hello World Example At React JS documentation

Leave a Reply

Your email address will not be published. Required fields are marked *