React Js
QUES 1. WHAT IS REACT JS ?
React is an open-source JavaScript Library
React is used for building User Interfaces (UI)
React simplifies the creation of SPA by using reusable components.
QUES 2. WHAT IS SPA ( SINGLE PAGE APPLICATION ) ?
A single page application (SPA) is a web application that have only
one
Single web page
Whenever user do some action on the website then in response
content
Is dynamically updated without refreshing or loading a new page .
QUES 3. What are the Advantages of React ?
Simple to build single Page application (By using Components) .
React follows component-based Architecture which allows developer
to
Create reusable UI components which can be used throughout the
application
It will make the development faster and more Efficient .
React is cross platform and open source (Free to use )
Light Weight and very Fast (Virtual Dom)
Large Community and Ecosystem
Testing is Very Easy on React
QUES 4. What are the Disadvantages of React ?
React is not a good choice for very small Application
QUES 5. What is the Difference between React and Angular ?
QUES 6. What is Dom ? Difference btw DOM and Virtual Dom
The Dom (Document Object Model) represent the web page as a tree
like
Structure Which allows the JavaScript to dynamically access and
Manipulate
The content and structure of web page
React uses virtual DOM to efficiently update the UI without re-render
the entire page , which helps improve the performance and make
the application more responsive
QUES 7. What are React Components ?
In React , a Component is a Reusable Building Block for creating user
Interfaces which can be used throughout the application . It will
make the development faster and more Efficient .
There are two type of react Component class-based or functional
which encapsulate both logic and Ui
Functional components are widely used in ReactJS to create
efficient and reusable UI elements. They are plain JavaScript
functions that return React elements (JSX) to define how the UI
should look. They are lightweight, simple, and capable of handling
state and effects through React Hooks.
QUES 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
QUES 9. What is Props in React ?
Props (short for properties) are read-only attributes used to pass
data from a parent component to a child component.
QUES 10. What is State in React ?
State is an object that represents the parts of the app that can
change. Each component can maintain its own state, and when the
state changes, the component re-renders.
Hooks
UseContext
It is used to manage the global data in React
If you want to pass data just for child component ,then you can use props
Example
UseEffect
It is used to perform side Effects in a Functional Component , such as
Data Fetching , Subscription , or manually changing the DOM
It runs after every Render by Default but can be controlled by
Specifying dependecnies
Use effect without Dependencies
It runs with first render and also run on anything changes
Use effect without Empty Array
It Runs only first Render
Use effect with variable
It runs on first render and runs with that variable change
UseState
It is used to add state to a functional Component
It returns an array with the current state value and a function to
update it
State are nothing but just values or variables of your component
UseRef
A ref is a way to access the DOM directly within React. It is used to
get a reference to a DOM element or a class component instance.
It allows us to create mutable varible which don’t cause re-renders
It is very useful to directly access dom element
Const variableName = useRef(InitialValue)
UseReducer
UseReducer is used to manage state in our React Application
It work like a state management tool
Always use the useReducer hook when you have a lot states
and methods to handle
const [state , dispatch] = useReducer(reducer, initialState)
UseLayout
UseLayoutEffect works exactly the same as useEffect (also the same
syntax)
UseEffect runs after the dom is printed on the browser
But useLayoutEffect runs before the dom is printed on the browser
You can use it if you want to run code before the dom is printed
Like if you want to measure height width anything related to layout
It runs line by line
The most common use of useLayout is to get the dimension of the
layout that’s why it is called useLayoutEffect
UseMemo
UseMemo hook is used to apply Memoization in React
Memoization is a technique for improving the performance of code
It is useful to avoid expensive calulcations on every render when the
returned value is not change
It is used to improve performance in our react application
We can stop running unwanted function on re-rendering
Const memoCalculation = usememo( callback , [dependency])
UseCallback
