React

1.React:

React is a JavaScript library for building user interfaces.
React follows the Unix philosophy because it is a small library that focuses only one thing. That "one thing" is building user interfaces.
A user interface(UI) is a thing that put in front of users to have them interact with a machine. Though JavaScript, we can use React to describe Web UIs.
The most popular thing in react is that it uses virtual DOM that can be used to reconcile the actual DOM. DOM is Document Object Model. It's the browsers' programming interface for HTML. The DOM API is used to change a document structure, style, and content.

2.React's tree reconciliation:

when React renders a tree of elements in the browser, it first generates a virtual representation of that tree and keeps it in its memory for later. When we tell react to update the tree of elements it previously rendered, it generates a new virtual representation of the updated tree. It will compare the the two versions of the tree that it has in memory and compute the difference between them and update only the changes. This process is known as the tree reconciliation algorithm.

3. React Components:

In react, components are used to describe UIs. React components are reusable, composable and stateful.
The basic form of a react component is a plain-old javascript function. Functions are reusable and they can be used in another functions.
When the state of a React component changes, its output changes as well. React component's name has to start with a capital letter.

4.JSX:

JSX is a JavaScript extension that is a representation of React's tree of objects. JSX uses syntax that are similar to HTML template. In React application we use JSX.

<div>
{array.map(x => <div>{x.body}<div>)}
</div>

Before being used in the browser, gets translated to:

React.createElement(
"div",
null,
array.map(x => 
React.createElement("div", null, x.body)
),
);

React takes this tree of objects and transforms it into a tree of DOM elements.

5.React Hooks:

A hook is a call to a special function in a component. all hooks begins with the word "use". They are many usefull things that we can do with react hooks.
React hooks can only be used in function components.There are many hooks like: useState, useEffect, useCallBack.

const Hook = () => {
const [count, setCount] = useState(0);
return(
<button onClick={() => setCount(count + 1)}>{count}</button>
);
};

6.Virtual-DOM:

Document Object Model or DOM is a representation of a tree structure. Any changes in a DOM can make the DOM re-painted which can make your app work slow.
Virtual-DOM reduces this problem by minimizing these two stages and give a better performance in a complex app. when an element changes in DOM, all the elements again created in the Virtual-DOM.
It will check if any changes is made in a component. Only changed element will be updated in the actual DOM.

7.Separate the concerns:

In react, you can put HTML, CSS, JStogether as a component. For many years, we split JS, CSS, HTMl in different files. And it shouldn't be confused with separation of concerns.

8.Data goes down:

In react, data goes down the tree of the components. For this reason, when a data is passed from parent to child component you need to use props. From JSX point of view props are HTML attributes.

9.Events go up:

In react, parent component can get data from its child component. let's say a perent component that needs data from the child input box. it will pass down a function as a prop to that child to push some data up. Then the parent component can save the data in its own state or can pass it down to a different components.

10.How rendering works:

Every state change inform react about state changes. Then, react calls render() method to update the components representation in memory and compares it with actual DOM. Then React will only update the changes to the DOM. Child components know that they need to re-render because their props changed.