React js is a Javascript library

All the fundamental React.js

React is a JavaScript “library”. It is not exactly a “framework”. It is not a complete solution and you will often need to use more libraries with React to form any solution. React does not assume anything about the other parts in any solution.

Frameworks serve a great purpose, especially for young teams and startups. When working with a framework, many smart design decisions are already made for you, which gives you a clear path to focus on writing good application-level logic. However, frameworks come with some disadvantages. For experienced developers working on large codebases, these disadvantages are sometimes a deal breaker.

Creating components using functions:
const Items =() =>{
const num = 20;
const num2 = 10;
const nums = num + num2;

Virtual-DOM in react:

I have been trying to understand how virtual DOM works and though on an high level it was clear. I was looking for something that could explain to me in more detail.

The next section will summarize on how DOM is created and will give you idea on why React created a Virtual DOM in the first place.

Understanding the Virtual-DOM:

Now that you know how the DOM is build, let us now look more into Virtual DOM.
So here I will use a small app and explain how virtual DOM works. So that it becomes easy for you to visualize it.

Props Default to “True”
If you pass no value for a prop, it defaults to true. These two JSX expressions are equivalent:

in general, we don’t recommend not passing a value for a prop, because it can be confused with the ES6 object shorthand {foo} which is short for {foo: foo} rather than {foo: true}. This behavior is just there so that it matches the behavior of HTML.

JSX Children
You can provide more JSX elements as the children. This is useful for displaying nested components:

<MyFirst />
<MySecond />