React concepts#

In the last lesson, we saw why React has become the most popular web framework. In this lesson, let's study all the concepts which made React what it is right now. This course assumes you have some prior React knowledge, but just to make sure we all are on the same page, let's discuss the React core concepts.

Virtual DOM#

Let's talk about why React is so fast. Actually, React uses virtual DOM to enhance its performance which is nothing but the Replica of the Real DOM (i.e. the Document Object Model) in form of a Javascript object. It uses the observable to detect state and prop changes. React uses an efficient diff algorithm to compare the versions of virtual DOM. It then makes sure that batched updates are sent to the real DOM for re-rendering of the UI. It prevents us from changing the Real DOM every time some event occurs, which saves lot of memory and makes React so much faster.

JSX#

Another important React concept is the JSX. It is a syntax extension to JavaScript. JSX is also very easy to read. Most importantly, by using JSX, you can write HTML code in JavaScript, then Babel which is a JavaScript compiler, transforms these expressions into actual JavaScript code. However, there are some differences to HTML. For example, to give it a class, JSX uses className instead of class. You can also use inline tag styling by using a curly bracket and using it inside an object. We are going to use JSX the whole time, so let's discuss another important React concept.

Components#

We can't talk about React without talking about Components. They are building blocks of React applications. Don't be confused, they are just usual React functions and classes which return the JSX. They are so popular because they are reusable and also easier to maintain. Let's suppose we have two pages, and each page has a unique header and a footer, but the form is same. Rather than creating two different forms, we can create a single component and use it in both pages. By doing this, you have to write less code and also it's easier to maintain because changes can be made to the form component, rather than changing code in two pages.