JavaScript JSX, Element, Component, Virtual DOM

1. JSX-JavaScript XML

JSX provides a facility that helps us to write JavaScript elements in a markup style. And babel turns it into react elements.

If we want to create a react element the basic syntax is React.createElement(component, props, …children)

It is very tough to write this syntax every time if our program has many elements. JSX makes it easier for us. We can write our code in a markup style then JSX converts it valid JavaScript object which is the only way that JavaScript can recognize.

react element write in a markup style

<div className= “bn-BD”> Hello world! </div>

That is in JSX form and babel does the following.

React.createElement(“div”, { className: “bn-BD”}, “Hello world!”)

2. React Element

React elements are written in JSX format which is powered by JavaScript that is mainly rendered in the browsers. It is written in JSX format and babel converts into the object.

const element= <div> <h1> this is heading</h1> </div>

3. React Components

Due to react element is not changeable which is like a string. So, react elements will not help us as we want dynamic things. React component helps us in that case because components are functional-based and able to change the component that is why we can make our applications dynamic. React components return elements.

const component= () =>{
return (
<div> <h1> this is heading</h1> </div>
)}

4. Virtual DOM

Every change in reacts element needs re-render and if there are many elements on the same page and are changed then it needs to be re-rendered. The huge numbers of re-render increase the complexity and make the application slower. Virtual DOM solves the problem. At the time of re-render, a copy of DOM elements is kept and it is compared to the next re-render DOM and find out which are actually changed and where the changes have occurred in DOM element and finally change the element at where the changes have occurred. In this way, virtual DOM prevents to re-render whole the element on the web page.