React.js Question 1

1.What is the difference between a functional component and a class component in React?
Functional component:
These are JavaScript function that accept the props as an arguments and return the JSX with the introduction of React Hooks manage the state and lifecycle methods.Its arrow function declaration.

Class component:
These are ES6 classes that extend the react component and include a render() method that return the JSX.

2.How does JSX work internally? Why do we need it instead of plain JavaScript?
The internal process of converting JSX into valid JavaScript involves a transpilation step, typically handled by a tool like babel.
Step of JSX.
Transpilation.
Element Creation.
Virtual DOM.
JSX is not a requirement to use react but if offers significant advantage that makes it the preferred method for most developers.React code using only React.createElement() calls.

3.What is virtual DOM and how does React we it for rendering ?
The Virtual DOM (VDOM) is a lightweight in memory representation of the actual DOM.It is a JavaScript object that mirror the structure of real DOM, including element ,attributes and their children.
Uses:
Initial Render,State or props change,Diffing,Batch update and Real DOM.

4.Explain Props vs State with an example.
Props:
Props(Properties) are the data passed down from a parent to a child components acting like arguments to a function and are generally read-only.

State:
State is a internal to a component,representing data that can change overtime within that component and is managed internally often using hooks like useState.

5.What is lifting state up in React?
Lifting state up is a React pattern where you move shared state from child component to their closet common parent.This allows multiple child components to communicate and stay in sync via the shared state in the parent.