REACTJS DEF: React.

js is a JavaScript library used for building user interfaces, particularly for single-page applications where
smooth and efficient updates to the UI are crucial. Developed and maintained by Facebook, React allows developers to create
reusable UI components that update in response to changes in data, leading to a more modular and maintainable codebase.

WEBPACK: is a module bundler for JavaScript applications. It takes your JavaScript code, along with other assets like stylesheets,
images, and fonts, and bundles them together in a way that is optimized for the web.

BABEL: is a JavaScript compiler that allows you to use the latest ECMAScript features and other syntactic sugar not yet supported
by all browsers. It also transforms JSX code into standard JavaScript.

DIFF b/w VIRTUAL and REAL DOM: The Real DOM (Document Object Model) is the actual structure of a web page that is rendered
in the browser. It is a tree-like structure made up of elements, attributes, and text nodes. When you make changes to the DOM,
the browser has to re-render the entire page, which can be slow. The Virtual DOM is a lightweight JavaScript object that
represents the Real DOM. It is created when the React application is first loaded. When you make changes to the state of a React
component, the Virtual DOM is updated. React then compares the Virtual DOM to the Real DOM and figures out the minimal set
of changes that need to be made to the Real DOM. This process is called reconciliation.

DIFF B/W Controlled and Uncontrolled comp: Uncontrolled Components are the components that are not controlled by the React
state and are handled by the DOM (Document Object Model). So in order to access any value that has been entered we take the
help of refs. For instance, if we want to add a file as an input, this cannot be controlled as this depends on the browser so this is
an example of an uncontrolled input. Controlled Components are those in which form’s data is handled by the component’s
state. It takes its current value through props and makes changes through callbacks like onClick, onChange, etc. A parent
component manages its own state and passes the new values as props to the controlled component.

HOOKS: are functions that allow functional components to use state, lifecycle features, and other React features that were
previously only available in class components. They were introduced to address the complexity of managing state and side effects
in functional components.

ARROW FUNC: Short way of writing a function to React Js. It is unnecessary to bind ‘this’ inside the constructor when using an
arrow function. This prevents bugs caused by the use of ‘this’ in React callbacks.

FUNCTIONAL and CLASS comp:

Functional have no state of their own and only contain render methods, and therefore are also called stateless components. They
may derive data from other components as props.
Class comp can hold and manage their own state and have a separate render method to return JSX on the screen. They are also
called Stateful components as they can have a state.

Why use RENDER(): is a required method in React class components. It is responsible for describing the view to be rendered to
the browser window. It is called whenever there is a change to the state of a component or when a prop is passed to a component.
This ensures that the component is always up-to-date with the latest data.

Diff b/w PROPS and STATE: Props are used to pass data from a parent component to a child component, while state is used to
manage data within a component. This means that a child component cannot directly change the state of its parent component,
but it can pass data back to its parent component using props. Props are immutable, while state is mutable. This means that
props cannot be changed once they are passed to a component, while state can be updated using the setState function.

useState: Used to manage state allowing you to store and update data. State is data that is specific to the component. Returns a
pair of values, the current state value and a function to update the state value. The Hook takes an initial state value as an
argument and returns an updated state value whenever the setter function is called.

useEffect: Used to perform side effects such as updating the document title, fetching data, or subscribing to events. Side effects
are actions that can change the state of the component. Does not return any values. It's similar to componentDidMount,
componentDidUpdate, and componentWillUnmount lifecycle methods in class components. should be used after the component
has mounted.

useReducer: Is a more powerful version of the useState hook that allows you to manage more complex states that may have
multiple values and require more sophisticated updates. It takes an initial state value and a reducer function as arguments. The
reducer function takes the current state and an action object and returns a new state.

useContext: Allows you to access data that has been passed down from a higher-level component. It allows you to access data
that is stored in the context object without having to manually pass it down as props.To use this hook, you first need to create a
context object. This can be done using the createContext() function. Once you have created a context object, you can then use
the useContext hook to access the context object from any component in the tree. The useContext hook takes two arguments:
the context object and a default value. The default value is the value that will be returned by the useContext hook if there is no
context provider for the context object in the parent tree.

Diff b/w useMemo(), useCallback(): Both are both performance optimization hooks in React. useMemo() memoizes a value and
returns the cached result if the dependencies have not changed. useCallback() memoizes a function and returns the cached
function if the dependencies have not changed. So useCallback() caches the provided function instance itself whereas
useMemo() invokes the provided function and caches its result.

useMemo: Is used to memoize the result of a computation so that it is only recomputed when its dependencies change. It can
be helpful in optimizing performance by preventing unnecessary calculations.

useCallback: Used to memoize callback functions, preventing unnecessary re-creations of functions between renders. It is
particularly useful when passing callbacks to child components that rely on reference equality.

Portal: is a way to render a component's children into a DOM element that exists outside the parent component's DOM hierarchy.
Portals provide a mechanism to render content in a different part of the DOM tree, allowing components to break out of their
parent's DOM boundary. The ReactDOM.createPortal() function is used to create a portal. It takes two arguments: the first one
is the content that you want to render, and the second one is the DOM element where you want to render that content.

Fragment: Syntax that allows you to group multiple children elements without introducing an additional DOM element and want
to avoid adding unnecessary wrapper elements to the DOM. Developers often used a common pattern of wrapping multiple
elements with a parent element, like a <div>, to satisfy the requirement that a component should return a single parent element.
Fragments provide a more elegant and cleaner solution to achieve the same goal.

Diff b/w export default and export: Default export- export a single value from a module. This value can be a variable, function,
class, or any other JavaScript entity. When importing a default export, you can assign it any name you want in the importing
module. Normal Export- export multiple values from a module. To export multiple values, you use the export keyword followed
by the name of the value. When importing named exports, you must use the exact exported names in the importing module.

HOC: is a pattern where a function takes a component and returns a new component with additional props, state, or behavior.
HOCs are a way to reuse component logic, share code, and compose components in a more modular fashion. The HOC pattern
allows you to extract common functionality from components and apply it to multiple components without duplicating code. It
is a form of component composition where you wrap a component with a function that enhances its capabilities.

Render props: Is a pattern used for component composition that involves passing a function as a prop to a component, allowing
the component to render content determined by that function.

Pure Component: are components that only re-render when their props or state change. They are also referred to as “stateless
components”. They are a way to optimize the performance of your React application by reducing unnecessary re-renders.
Implement a shallow comparison of props and state. This means that they will only re-render if the values of props or state have
changed, not if the references to the objects have changed.

React Routing: React Router is a popular library for handling navigation and routing in React applications. It enables the creation
of single-page applications with dynamic, client-side routing. With React Router, you can define how the application's UI should
change in response to the user's interaction with the browser's address bar.

<BrowserRouter>: uses the HTML5 history API for cleaner URLs.

<Route>: component is used to declare a route and render a component when the route matches the current location. It takes a
path prop to specify the route and a component prop for the component to render when the route matches.
<Link> and <NavLink> components are used for navigation. They create links to navigate between different routes. NavLink is a
variation of Link that adds styling to the link based on whether its route is currently active.
<Switch>: is used to group Route components. It renders only the first Route that matches the current location, preventing
multiple matches from being rendered simultaneously.
<Redirect>: is used to navigate to a different route programmatically. It can be rendered inside the Switch component.

What is the default localhost server port in react js: port 3000---http://localhost:3000/
Constructor: is a method in a React component class that is called when an instance of the component is being created. It is used
to initialize the component's state and bind event handler methods.
super(props) call: is required in the constructor to call the constructor of the parent class (React.Component) because we extend
react component class. It ensures that the component is set up correctly, including initializing its state.
Render: is a required method in a React component class. It defines what will be rendered to the UI when the component is
displayed. The render method returns a React element (JSX), describing the component's UI structure.

Context API: in React provides a way to share values like themes, authentication status, or any other global data across a React
component tree without explicitly passing props through each level of the tree. It helps avoid "prop drilling," where you pass data
through multiple layers of components.
Prop drilling: State should be held by the highest parent component in the stack that requires access to the state.To illustrate,
we have many nested components. The component at the top and bottom of the stack need access to the state.
To do this without Context, we will need to pass the state as "props" through each nested component. This is called "prop drilling".

To implement componentWillMount in a function component: use the useEffect hook. The useEffect hook allows you to run
code after the component has mounted. To use the useEffect hook, you need to pass an empty array as the second argument.
This will tell the useEffect hook to run code after the component has mounted.
To implement componentWillUnmount in a functional component, you can use the useEffect() hook with a cleanup function.

Event bubbling and capturing are two different ways of handling events in JavaScript.
Event bubbling is the default behavior in JavaScript. It means that when an event is triggered on an element, the event is first
handled by that element, and then propagated up to its parent element, and so on, until it reaches the document root.
Event capturing is the opposite of event bubbling. It means that when an event is triggered on an element, the event is first
handled by the document root, and then propagated down to its child elements, and so on, until it reaches the element that
triggered the event.
Event capturing is generally used for performance reasons, as it allows you to handle events before they reach their target
element. This can be useful for cases where you need to prevent an event from bubbling up to its parent elements.

React Redux is a state management library commonly used with React applications. It helps manage the state of your application
in a predictable way, making it easier to develop, test, and maintain. Redux is often used in larger or more complex applications
where managing state becomes a crucial aspect of development.
State: The state of your entire application is stored in a single JavaScript object, known as the "store."
Store: is a container that holds the application's state. It provides methods to dispatch actions and subscribe to changes.
Actions: are plain JavaScript objects that describe changes in the application state. They have a type property that specifies the
type of action to be performed and may contain additional data.
Reducers: are pure functions that specify how the state changes in response to an action. They take the current state and an
action as arguments and return a new state.
Dispatch: is a method provided by the store that is used to send actions to the store. When an action is dispatched, the store
invokes the corresponding reducer, updating the state.
Connect: The connect function is used to connect React components to the Redux store. It takes two optional arguments:
mapStateToProps and mapDispatchToProps, allowing components to subscribe to specific parts of the state or dispatch actions.

Middleware is a way to extend the functionality of the Redux store. It provides a mechanism for intercepting and processing
actions before they reach the reducer. Middleware sits between the dispatching of an action and the moment it reaches the
reducer, allowing you to perform additional tasks, such as logging, asynchronous operations, or modifying the action itself.
The most common middleware for asynchronous operations is redux-thunk. Thunks receive the dispatch and getState functions
as arguments, providing access to the Redux store.

Server-Side Rendering (SSR) in React is a technique that involves rendering React components on the server side rather than on
the client side. The traditional way of rendering React applications is to let the client's browser handle it entirely, but SSR provides
a different approach.
Node module typically refers to the node_modules directory that is generated when you install dependencies for your project
using Node Package Manager (npm) or Yarn. This directory contains the libraries and packages that your React project depends
on.