ReactJs Step-By-Step Tutorial Series for Absolute Beginners — Part 1

Hello Readers,

Welcome to the ReactJs tutorial series for absolute beginners!!

Our series of these articles will give you complete knowledge about how to start with ReactJs up to how you can deploy ReactJs application to Github.

Quick links for our ReactJs Series:

Tutorial #1 — Introduction and Installation of ReactJS (This Tutorial)

Tutorial #2 — ReactJS Components

Tutorial #3 — ReactJS Components Communication

Tutorial #4 — Build ToDo Application Using ReactJS

Tutorial #5 — Deploy ToDo Application to Github pages


  • As you can see, We will start with installations — all the setups and tools required for ReactJs.

What is React?

  • React is a JavaScript library — one of the most popular.

ReactJS is a JavaScript library used for building reusable UI components. This means it is a view library that uses components to change content on the page without refreshing which is the core principle behind single-page applications.

React Features

  • JSX − JSX stands for JavaScript XML. JSX is JavaScript syntax extension. JSX allows us to write HTML in React. It isn’t necessary to use JSX in React development, but it is recommended. With JSX you can write expressions inside curly braces { } including variables, functions, and properties.

Setup and Installation

1) Install Node.js and npm globally on your machine. (we are using node.js version 12.16 currently, you can have any version >10.x and for npm, it should be > 5.2)

2) Facebook has created Create React App environment that will create a live development server and automatically compile React and all other things. To create any React application, run the following code in your terminal:

npx create-react-app todoappcd todoappnpm start

(Note: If you’ve previously installed create-react-app globally via npm install -g create-react-app, we recommend you to uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version)

The create-react-app will set up everything you need to run a React application. And make sure you should not use uppercase letters for your application name.

So let’s check out our browser and we can see our application is up and running on http://localhost:3000 locally.

3) Visual Studio Code — as an IDE (you can use any).

Introduction to the directory structure

Let’s walk through the directory structure that React CLI created for us.

Open this newly created application in VS Code.

Image of Directory Structure of React Application
Image of Directory Structure of React Application
Directory Structure of React Application
  • As you can see the very first directory is node_modules and this is having all the library dependency of package.json.

In this directory our important file is index.html. As you know React is a single page application so it is the only one Html or you can say a single file that gets rendered when we run the application. Also, focus on the line no. 31, where this is the <div> with id=”root”.

<div id=”root”></div>

This <div> will be replaced with the root component.

Inside this directory, you will also find manifest.json. This file is for PWAs — Progressive Web Apps.

  • The next one is the src directory. This will contain all our React code. This is having App.js, which is the first component, which will get rendered when we run our application. But who is rendering this app component? The answer is index.js. You can see this index.js is having ReactDOM.render() method.
ReactDOM.render(<App />, document.getElementById(‘root’));

This render method will actually render the index.html’s root div.

It will replace this root div with the app component. This is how your first component will work.

  • In this src directory, we will also have index.css and serviceWorker.js. And this service worker is for PWAs — Progressive Web Apps.

So, this was all about the structure of the React application.

Now let’s move to our Part-2 of this article series, where we will understand the concept of components and will create different types of components too.

Jinal Shah is corporate trainer on different technology like node.Js, Angular,Ionic 2, BOT Framework etc.