React Core Concept

Though I am not an expert, I will try my best to share React Intro and as much as possible detailed guidelines with you. Let’s begin a new journey with React.

Is React a Framework?
No, React is a JavaScript library, and it's not a complete solution, cause you need more libraries to complete a solution. Some framework comes with a complete solution but they have disadvantages too. In a big project, people face the problem but we are not going to discuss the framework here.

How Virtual DOM works?
Virtual DOM generates all the elements that look like a tree and starts processing them. And the crazy thing is that Virtual DOM is always faster than real browser DOM. React does this magic with Virtual DOM and converts all attributes to elements. And manipulate them to work faster.

JSX
First of all, we have to know about JSX. It's a combination of JavaScript and HTML elements call JavaScript XML and in short, we say JSX.

JSX Code:

<MyButton color=”blue”>
Click Me
</MyButton>

Compiles into:

React.createElement( 
MyButton,
{color: ‘blue’},
‘Click Me’ 
)

We can also use self-closing tags when there are no children.

<div className=”sidebar” />

Compiles into:

React.createElement(
‘div’, 
{className: ‘sidebar’}
)

React Components
We can use and reuse react components again and again. All the components smaller or bigger are reusable.

Class Components vs Functional Components
Functional components require less code than class components. And it is proved that functional components are faster than class components.

Hooks
All hooks function in react is used the word “use” . As we like to use state we call useState() and to call data API and changes we use useEffect().

Parent Component
In react we can say the main component as parent and data shares to another component should call child component as well.

Props
Props are used to share data between components.