Day - 6 Tasks (React.JS)

Q. No. 1. What is Virtual DOM?

1. DOM stands for Document Object Model. Whenever any HTML, CSS, javascript application gets loaded for the first time on the browser then the browser creates Document object model of that file, and whenever we changes anything in application then the complete DOM is rerendered again and again.


2. In case of react, the DOM is created whenever our react components mounted on the screen for the first time. Now when we makes any changes on the screen like button click because of which the state variable gets updated so in this case the real DOM not directly changed the updates, for this in react we have a concept known as Virtual DOM. In react we use virtual DOM to update the real DOM.


3. We are having two virtual doms in react, first one is virtual dom gets created at the time of mounting of react component so it is a copy of our real DOM, and second one is virtual DOM contains all the new changes, updated values of state variables. Now both the virtual DOMs get compared with each other and will check for the new changes, this complete procedure is known as Diffing algorithm. Now the new changes will be updated in our Real DOM, this procedure is known as Reconciliation.

Q. No. 2. What is SPA?

1. SPA stands for Single Page Application.


2. For Example - Any web application, in which when you are clicking on any button or selecting option from navigation bar then if your page which means browser page is reloading then that means that application is your multi - page application . If it does not reload the browser page and just only updates the page without reloading then that application is known as Single Page application.


3. SPA will manage using components or React-Router through in React.

Q. No. 3. Explain life cycle phases and methods in react?

Lifecycle Methods ( Class Component )

I. Mounting Phase -

When an instance of a component is being created and inserted into the DOM.


1. Constructor   [Only in mounting]   //initialize the state & bind the event

- A special type of function that will get called whenever a new component is created.
- Used to initialize states & Binding events.
- Not perform, Http req.


2. static getDerivedStateFromProps   [rarely used]

- When the state of component depends on change in props.
- set the state.
- Not perform, Http req.


3. render

- Only Required Method.
- Return JSX.
- Children component Lifecycle methods also get execute.
- Not perform, Http req.


4. componentDidMount   [Only in mounting]

- Invoked immediately after a component and its child components have been rendered to DOM.
- Perform any AJAX call to load data.


II. Updating Phase -

When a component is being re-render as a result of changes to either its props or state.


1. render

- Only Required Method
- Return JSX
- Not perform, Http req.


2. componentDidUpdate()

- called after the render is finished in the re-render cycles.

III. Unmounting Phase   ( LAST WISH ) -

When a component is being removed from the DOM.


1. componentWillUnmount

- Method is invoked immediately before a component is unmounted and destroyed.
- Cancelling any network req., also invalidating timers.
- Do Not Call The SetState Method.

Q. No. 4. Difference between class components and functional components?

Class Components -

1. A class component requires you to extend from React. Component and create a render function which returns a React element.
2. It must have the render() method returning JSX (which is syntactically similar to HTML)
3. Also known as Stateful components because they implement logic and state.
4. React lifecycle methods can be used inside class components (for example, componentDidMount).
5. It requires different syntax inside a class component to implement hooks.

                   example -
                   constructor(props){
                   super(props);
                   this.state = {name:''}
                   }
               

6. Constructor are used as it needs to store state.

Functional Components -

1. A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element.
2. There is no render method used in functional components.
3. Also known as Stateless components as they simply accept data and display them in some form, that they are mainly responsible for rendering UI.
4. React lifecycle methods (for example, componentDidMount) cannot be used in functional components.
5. Hooks can be easily used in functional components to make them Stateful.

               example -
               const [name,SetName]= React.useState('')
           

6. Constructors are not used.

Q. No. 5. In react why we move from class components to function components?

1. Because of javascript is a functional programming language, thats why we are moving from class component to function components.

Q. No. 6. What is routing?

1. Routing is a process in which a user is directed to different pages based on their action or request. ReactJS Router is mainly used for developing Single Page Web Applications. React Router is used to define multiple routes in the application.


2. When a user types a specific URL into the browser, and if this URL path matches any 'route' inside the router file, the user will be redirected to that particular route.


3. React Router is a standard library system built on top of the React and used to create routing in the React application using React Router Package.


4. It provides the synchronous URL on the browser with data that will be displayed on the web page. It maintains the standard structure and behavior of the application and mainly used for developing single page web applications.