Skip to main content

React - Hello World example

In this article, we will learn how a react UI is 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 concepts in an earlier tutorial. This tutorial is very basic and doesn't expect much here in terms of advanced 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 ways 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 was tested on a Mac OS V10.13 machine. For developers using windows machines, command syntax will change a bit.

Files & Folders 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 the 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 the initialization point for Single Page App which has one div with id root within the 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 the 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 the 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 the following commands

$ npm start

Compiled successfully!

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

Local: https://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 a page below when you access the URL:

 Hello World Project Web Page

Build application for deployment on a webserver

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

$ npm run build

> 01-hello-world@0.1.0 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

The build folder contains a web server deployable package and it looks like the below:

Node app production build folder structure

Build script created a package optimized 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.


  1. Download the source code

  2. Follow Project On Github

  3. React Setup and getting started

  4. NPM & Front End Packaging

  5. Webpack module bundle concepts

  6. NodeJS and NPM installation guide

  7. Babel for enabling ES6

  8. Hello World Example At React JS documentation

Note: While writing this article, I am working as a Senior Technical Architect with Magic Software Inc.


Popular posts from this blog

Working with request header in Jersey (JAX-RS) guide

In the  previous post , we talked about, how to get parameters and their values from the request query string. In this guide learn how to get request header values in Jersey (JAX-RS) based application. We had tested or used the following tools and technologies in this project: Jersey (v 2.21) Gradle Build System (v 2.9) Spring Boot (v 1.3) Java (v 1.8) Eclipse IDE This is a part of  Jersey (JAX-RS) Restful Web Services Development Guides series. Please read Jersey + Spring Boot getting started guide . Gradle Build File We are using Gradle for our build and dependency management (Using Maven rather than Gradle is a very trivial task). File: build.gradle buildscript { ext { springBootVersion = '1.3.0.RELEASE' } repositories { mavenCentral() } dependencies { classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}") } } apply plugin: 'java' apply plugin: 'eclipse' a

Ajax Cross Domain Resource Access Using jQuery

Some time back in our project we faced a problem while making an Ajax call using jQuery. Chrome Browser console had given some weird error message like below when we try to access one of our web pages: When we try to access the same web page in the Firefox browser, it doesn't give any error in the console but some parsing error occurred. In our case, we were accessing XML as an Ajax request resource. I was curious to check if the non-XML cross-domain resource was successfully loading or not. But finally, I realized that it is not going through. jersey-spring-boot-quick-starter-guide In our Ajax call, requesting domain was not the same as the requested URL domain. $.ajax({ url: "" , type : "get" , success: function (response) { alert( "Load was performed." ); }, error : function (xhr, status) {

FastAPI first shot

Setup on my Mac (Macbook Pro 15 inch Retina, Mid 2014) Prerequisite Python 3.6+ (I used 3.7.x. I recently reinstalled OS after cleaning up disk, where stock Python 2.7 was available. I installed Pyenv and then used it to install 3.7.x). I already had a git repo initialized at Github for this project. I checked that out. I use this approach to keep all the source code safe or at a specific place 😀. I set the Python version in .python-version file. I also initialize the virtual environment using pyenv in venv folder. I started the virtual environment. FastAPI specific dependencies setup Now I started with basic pip commands to install dependency for the project. I saved dependencies in requirements.txt  the file. Minimal viable code to spin an API Server FastAPI is as cool as NodeJS or Go Lang (?) to demonstrate the ability to spin an API endpoint up and running in no time. I had the same feeling for the Flask too, which was also super cool. app/ from typing i