Overview of react

Let's take an example — though a very naive one: If you have something messed up in a room in your home and you need to clean it, what will be your first step? Will you be cleaning your room which is messed up or the whole house? The answer is definitely that you will be cleaning only the room which requires the cleaning. That's what the virtual DOM does.

Ordinary JS traverses or renders the whole DOM instead of rendering only the part which requires changes.

So whenever you have any changes, as in you want to add another <div> to your DOM then the virtual DOM will be created which actually does not do any changes in the actual DOM. Now with this virtual DOM, you will be checking the difference between this and your current DOM. And only the part which is different (in this case the new <div>) will be added instead of re-rendering the whole DOM.

React Component and React Element

A React Element is what you would consider to be a basic html(dom to be precise) element. It is just a way of creating element without using the much controversial jsx format.

A React Component is what you can consider as an object. It has its methods, supports React lifecycles and is generally unreusable (at least haven't found any reuse yet, welcome to examples). It necessarily needs to have a render function.

What is JSX

JSX is a XML-like syntax extension to ECMAScript without any defined semantics. It’s NOT intended to be implemented by engines or browsers.

If you are writing a react component, you would come across a syntax like below,

class HelloWorld extends React.Component{
 render() {
  return (<h1 className="title">Hello World</h1>);
 }
}

It looks weird to write the HTML tags in JavaScript but it turn’s out to be super useful. This is JSX( JavaScript eXtension).

It is also able to write React components without html tag syntax which looks like follows

class HelloWorld extends React.Component{
 render(){
   return React.createElement("h1", { className: "title" }, "Hello World");
 }
}