React Introduction

Overview

React is a Javascript library (not a framework) for building user interfaces. React was introduced on May 29, 2013, by Facebook. React allows us to have re-usable components. React is declarative, component-based, and follows the principle DRY (Don’t Repeat Yourself).

React vs other similar technologies

• React uses a virtual DOM system instead of real DOM.
• It can be rendered on the server-side.
• It is light-weight.
• It uses the principle of unidirectional data flow.

React Advantages

• Fast, flexible, and light-weight.
• The code is easily understood because of its template orientation using JSX.
• It can be used with other technologies like Angular, Django, etc. It is the V in the MVC model.
• It has server-side rendering at its core.

Virtual DOM Concept

One of the most important concepts that made React easily acceptable was the Virtual DOM. The virtual DOM is a light object copy of the original DOM. It works in three ways:

• Whenever there is a change to the UI, the UI is re-rendered in a virtual DOM representation.
• The difference between the previous state of the UI and the changed version is recorded.
• The real DOM then only updates only the changes that occurred instead of re-rendering the whole UI again.

This makes the process seamless and faster.

About This Tutorial and Getting Started

In this tutorial, a basic understanding of front-end languages like HTML, CSS, and Javascript is required. Understanding EcmaScript 2015 (ES6) and its syntax is also a plus. If you are not comfortable with any of these, check out the Javascript tutorial.
The tutorial would introduce new concepts with simple follow-up examples to give a practical view of the topics. Make sure to try the examples to really grasp each concept.