REACT

1. What is React?
React is an open source JavaScript Library.
React is used for building user interfaces (UI).
React simplifies the crea on of SPA by using reusable components.

2. What is SPA (Single Page Applica on)?

A Single Page Applica on (SPA) is a web applica on that have only one
single web page.
Whenever user do some ac on on the website, then in response content
is dynamically updated without refreshing or loading a new page.

3. What are the advantages of React? V. IMP.

Simple to build Single Page Applica on (by using Components)
React is cross pla orm and open source (Free to use)
Lightweight and very fast (Virtual DOM)
Large Community and Ecosystem
Tes ng is easy
4. What is the difference between React and Angular?
5. What is DOM?
The DOM(Document Object Model) represents the web page as a tree-
like structure which allows JavaScript to dynamically access and
manipulate the content and structure of a web page.

6. What is the difference between DOM and Virtual DOM? VV IMP

React uses a virtual DOM to efficiently update the Ul without re- render
the en re page, which helps improve performance and make the
applica on more responsive.
7. What are React Components? VV. IMP.
In React, a component is a reusable building block for crea ng user
interfaces.

8. What is npm? What is the role of node_modules folder?

NPM is used to manage the dependencies for your React project,
including the React library itself.
node_modules folder contains all the dependencies of the project,
including the React libraries.

9. What is the role of public folder in React?

Public folder contains sta c assets that are served directly to the user's
browser, such as images, fonts, and the index.html file.
10. What is the role of src folder in React?
In React, src folder is used to store all the source code of the applica on
which is responsible for all the dynamic changes in the website.

11. what is role of index.html in react?

Index.html file in react is the entry point to the applica on.

12. What is the role of JSX in React? (3 points) V. IMP.

JSX stands for JavaScript XML.

JSX is used by React to write HTML-like code. ✓

JSX is converted to JavaScript via tools like Babel because Browsers
understand JavaScript not JSX.

13. What are state, stateless, stateful and state management terms?
"state" refers to the current data of the component.
Stateful or state management means, when a user performs some
ac ons on the UI, then the React applica on should be able to update
and re-render that data or state on the UI.
14. What are Props n JSX? V. IMP.
props (proper es) are a way to pass data from a parent component to a
child component.

15. What is the role of index.js file and ReactDOM in React? V. IMP.
ReactDOM is a JavaScript library that renders components to the DOM or
browser.
The index.js file is the JavaScript file that replaces the root element of
the index.html file with the newly rendered components.
16. What is the role of App.js file in React? V. IMP.
App.js file contain the root component(App) of React applica on.
App component is like a container for other components.
App.js defines the structure, layout, and rou ng in the applica on.

17. What is Babel?

Babel in React is used to transpile JSX syntax into regular JavaScript
which browser can understand.

18. What is the role of Fragment in JSX? V. IMP.

In React, a fragment is a way to group mul ple children's elements.
Using a Fragment prevents the addi on of unnecessary nodes to the
DOM.
19. What are the Types of React components? What are Func onal
Components? V. IMP.

Func onal Components:

Func onal components are declared as a JavaScript func on.
They are stateless component, but with the help of hooks, they
can now manage state also.

20. What is Prop Drilling in React? V. IMP.

Prop drilling is the process of passing down props through mul ple layers
of components.
21. How to pass data between class components in React?
A class component created by extending React.Component and they can
have their own state and lifecycle/
this.props can be used in child component to access proper es/ data
passed from parent component.

22. What are React Hooks? What are the Top React Hooks? V. IMP.
React Hooks are inbuilt func ons provided by React that allow func onal
components to use state and lifecycle features.
Before Hooks, class components lifecycle methods were used to
maintain state in React applica ons.
To use React Hook first we first have to import it from React library.
23. What is the role of useState() hook and how it works? V. IMP.
The useState hook enables func onal components to manage state.
useState() working: usestate() func on accept the ini al state value as
the parameter and returns an array with two elements:
The first element is the current state value (count in this code).
Second element is the func on that is used to update the state (setCount
in this code).
The concept of assign array elements to individual variables is called
array destructuring.

24. What is the role of useEffect(). How it works and what is its use? V. IMP.
The use Effect Hook in React is used to perform side effects in func onal
components.
For example, data fetching from API, subscrip ons or any other
opera on that needs to be performed a er the component has been
rendered.
 useEffect() is called a er the component renders. Example, side effects.
useEffect() func on will accept two parameter: (Effect func on,
dependency array).

25. What is Dependency Array in useEffect() hook? V. IMP.

Dependencies arrays(op onal) act as triggers for useEffect to rerun;
meaning if any of dependencies values change, the code inside
useEffect() will be executed again.
26. What is the role of useContext() hook? V. IMP.
useContext in React provides a way to pass data from parent to child
component without using props.

27. What is createContext() method? What are Provider & Consumer

proper es?
createContext() func on returns an object with Provider and Consumer
proper es.
The Provider property is responsible for providing the context value to all
its child components.
useContext() method or Consumer property can be used to consume the
context value in child components.

28. When to use useContext() hook instead of props in real applica ons?
Use useContext instead of props when you want to avoid prop drilling
and access context values directly within deeply nested components.
 29. What are components life cycle phases?

30. What is the difference between state and props?

Props: Data passed from parent to child components. They are
immutable and controlled by the parent.
State: Internal data that belongs to a component. It is mutable and can
be updated within the component.
31. What is the Context API, and when should you use it?
The Context API is a React feature that allows you to share data (such as
state) across mul ple components without passing props down the
component tree (also known as prop drilling). It's useful for managing
global data, like theme se ngs or user authen ca on, across the
applica on.
32. What is Redux, and how does it relate to React?
Redux is a state management library that helps manage the state of an
applica on in a predictable way. It’s useful for larger React apps where
mul ple components need to share and access the same data.

33. What is React Router, and how does it work?

React Router is a library used for rou ng in React applica ons.
It lets us switch between different pages or views without reloading the
whole page.
Redux is a state management library that helps manage the application state in a centralized way. It stores the
entire state of the app in one place, making it easy for components to access and update the state consistently. In
React, Redux allows us to avoid passing data through multiple layers of components by connecting directly to the
Redux store using hooks like useSelector and useDispatch. This makes it easier to manage shared state in larger
applications."