I am trying to tell about React.js fundamental topic. So let’s started..

Many people confused what is React, a library or framework? So at first I want to clear what is it. React is a JavaScript library. Framework is a complete solution. It has everything for a application.so no need to another help. On the other hand library’s size is tiny. It’s not a complete solution , it will need to help more library. We know React use more library , so it’s clear React.js is a JavaScript library.

Virtual DOM: before React we need to use bowser API . That is called DOM API. Any operation done on the DOM . Ease time any change on the DOM , the DOM is represent as a tree structure. It means slow and junky experience for the users. React help us with an unique idea.

when react render a tree elements , it’s first generate a new virtual representation and keeps it memory for letter. When we tell React to update the tree of elements it previously rendered, it generates a new virtual representation of the updated tree. Now React has 2 versions of the tree in memory! To render the update tree in Browser, it will compare 2 virtual version of the tree that it has in memory, compute the differences between them, figure out what sub-trees in the main tree need to be updated, and only update these sub-trees in the browser.

JSX: JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. It’s absolutely remember JSX is not a HTML that’s why browser can not understand JSX. When JSX is used, the syntax becomes a call to react.createElement(“tag”). this is a JavaScript extension to return function calls that create React elements (which are essentially JavaScript objects). JSX tags first letter being capital letter. This is the difference between HTML and JSX.

Component: React supports components. Here is two different ways to create a component. 1. Functional component 2. class based component. Class component create ‘stateful’ component on the other hand functional component create ‘stateless’ component.

HOOKS: Hooks is a special type of function that is use in react component. useState, useEffect, useCallback is kind of hoocks. Hooks are very powerful but it has some limit. React hook function can be used only functional component, we can’t use class component.

State: It’s needed to create a stateful component where the state is changing over time. React can create stateful component. setState() method is a special type of function. that can update the state information.

Conditional rendering: The list was rendered depending on some conditional logic. It’s often needed to render one part of the markup if some conditions are met, and the other if they are not. In React there are a few ways to do that.

declarative: In React you use declarative style to write your components. Let’s look at the previous example with <select>

<select value={this.state.value} onChange={this.handleChange}>
{somearray.map(element => <option value={element.value}>
{element.text}
</option>)}
</select>

In this <select> example you are not using for loop to manually create a mapped collection. You are not saying what should be done just how it should look like.