Scribd
Upload
0 views7 pages

React Js

React JS is an open-source JavaScript library for building user interfaces, particularly single-page applications (SPAs) using reusable components. It offers advantages like component-based architecture, cross-platform support, and a large community, but is not ideal for very small applications. Key concepts include the use of props for data passing, state management, and various hooks like useEffect and useState for handling side effects and component state.

Uploaded by

Anirudh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views7 pages

React Js

React JS is an open-source JavaScript library for building user interfaces, particularly single-page applications (SPAs) using reusable components. It offers advantages like component-based architecture, cross-platform support, and a large community, but is not ideal for very small applications. Key concepts include the use of props for data passing, state management, and various hooks like useEffect and useState for handling side effects and component state.

Uploaded by

Anirudh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

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

You might also like