React uses the concept of virtual dom to present contents to the user.

So, What is this Virtual DOM ?

You can think of it as the skeleton of the webapp. It helps react push updated in a faster and optimised manner without disturbing the existing components of the actual dom.

For every update, React first updates the virtual dom. Everything is in JavaScript, so, it's much more faster and efficient that way. It then compares the previous virtual dom with the updated version and only updates the components that are actually changes and doesn't disturb the others.

This makes it extremely efficient.

*Components : *

oh Okay, I forgot to tell you about React Components .
So, What are they ?

These are the building blocks of the React. Every react app is a collection of components arranged in a hierarchy. All kinds of branching and chaining takes place here. And everything is highly customisable.

React Components consist of business login with some UI rendering code.

function ReactComp(props) { 
    // some business logic goes here

    return (
        <div>component content goes here... ui codes.</div>
    )
}

Key Points about Components :

• Every Component starts with a Capital Letter
• <></> this represents an empty component.
• You cannot chain two elements without a parent element inside (). i.e.

(
  <div>hello</div>
  <div>world</div>
)

is not allowed. It will throw you an error. You can at least enclose them with <></> this.

• You can enclose other components in another component. Like this, <TestComponent <- you can pass props here -> />. For example, <TestComponent name={'sidhartha'} age={22} />

How Props Work ? , we will learn more about that in the next blog...

React out to me @mallicksidhartha7@gmail.com