React simple discussion

 Introduction: React is a  user interfaces JavaScript library.  it is a “declarative, efficient, and flexible JavaScript library for building user interfaces”, as defined by its creators. It's Supports server-side rendering. Follows Unidirectional data flow or data binding.

Uses reusable/composable UI components to develop the view. So ReactJS has taken the web development world by storm. Now I can describe about JSX, Virtual DOM etc.

 About JSX: JSX (JavaScript XML) is a XML-like syntax extension to ECMAScript. That is allows to write HTML elements in JavaScript and place them in the DOM without any createElement()  and/or appendChild() methods.So we can easily write HTML in React.

it calls the React.createElement() function. So we need to have to React in scope for JavaScript to know what to do with the compiled code.

 Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if we use the JSX any expression, It must be in scope.

The createElement() function accepts three parameters and returns a React element.

 Virtual dom and Real dom : The virtual DOM (VDOM) is a programming concept where it is an in-memory representation of Real DOM and synced with the “real” DOM by a library such as ReactDOM.

Virtual DOM is less wastage of memory but  Real DOM in too much wastage of memory.Real DOM manipulation is very expensive but Virtual DOM has less expensive during manipulation. In Real DOM, it updates slow compare to Virtual DOM.

React Component lifecycle: Each component in React has a lifecycle. It has three main phases. Three phases are Mounting, Updating, and Unmounting.

Mounting: When we putting elements into the DOM is that Mounting. Mounting is the period of the part lifecycle when the introduction of the part is finished and the part is mounted on the DOM and delivered interestingly on the page. Presently React follows a default strategy in the Naming Conventions of these predefined capacities where the capacities containing "Will" addresses before some particular stage and "Did" addresses later the fulfillment of that stage. The mounting stage comprises of two such predefined capacities as portrayed underneath.

Updating: when the state of a component is updated and the application is repainted  whenever there is a change in the component's state or props 

This method is Updation

 React is a JS library that helps create Active web pages easily. Presently dynamic website pages are explicit pages that act as per their client. For instance, how about we take the GeeksforGeeks {IDE} page, the page acts diversely with every client. Client A might think of some code in C in the Light Theme while another User might compose a Python code in the Dark Theme all simultaneously. This powerful conduct that to some extent relies on the actual client makes the page an Active website page. Presently how could this be identified with Updation? Updation is the stage where the states and props of a part are refreshed trailed by some client occasions, for example, clicking, squeezing a key on the console, and so on Coming up next are the depictions of capacities that are summoned at various places of Updation stage.

Unmounting: Unmounting is the final step of the component lifecycle where the component is removed from the page.

It is the final phase of the lifecycle of the component. It is the phase of unmounting the component from the DOM. The following function is the sole member of Unmounting.

Hook: In React Hooks are the new feature . It allows to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components.Hook does not work inside classes. Some popular Hook are useEffect,useState Hooks,custom hook etc.

 useEffect and useState Hooks: The useState hook is a function that takes one argument, which is the initial state, and it returns two values: the current state and a function that can be used to update the state.The useEffect hook is the combination of componentDidMount, componentDidUpdate and component willunmount class lifecycle methods.

custom hook: when we want to share logic between other JavaScript functions then we create a JavaScript  function it call is custom hook.