React Basic

What is JSX?
JSX is a shorthand for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML-like template syntax. This makes the HTML file really easy to understand.
An example of JSX:

render(){
    return(        

<div>

<h1> Hello World from Asif!!</h1>

         </div>

    );
}

What do you understand by Virtual DOM? Explain its working.

A virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM. It is a node tree that lists the elements, their attributes and content as Objects and their properties. React’s render function creates a node tree out of the React components. It then updates this tree in response to the mutations in the data model which is caused by various actions done by the user.This Virtual DOM works in three simple steps.

1. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation

2. Then the difference between the previous DOM representation and the new one is calculated.

3. Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

Explain the purpose of render() in React.
It is mandatory for each React component to have a render() function. Render function is used to return the HTML which want to display in a component. If need to rendered more than one HTML element, need to grouped together inside single enclosing tag (parent tag) such as

, , etc. This function returns the same result each time it is invoked.

Example: If need to display a heading, can do this as below.

import React from 'react'

class App extends React.Component {
render (){
return (
<h1>Hello World</h1>
)
}
}
export default App

Points to Note:
 Each render() function contains a return statement.
 The return statement can have only one parent HTML tag.
Lifecycle Methods Order In Mounting:
Mounting is the first phases of React component lifecycle. when an instance of a component is being created and inserted into the DOM, the following methods are called- constructor(), render(), componentDidMount().

Reconciliation:
Reconciliation is When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.
Higher Order Component:
A Higher Order Component is the advanced technique in React for reusing a component logic. Higher order component takes a component and returns a new component. Simply, a higher order component transforms a component into another component. The proper example of higher order components are- redux’s connect and relay’s createContainer.