11/11/24

Q.what is differance betweem react and Angular

*React :
-it is javascript library.
-which is use to create rich user interface.
-It create single page application(SPA).
-Design and developed by facebook.
-latest version of React 18

*software pre-requisit
-nodejs
node -v
-npm
npm -v
-react
-editor

*technology must know

-html
-css
-js(basic js,ES5,ES6,oops)

*how to create react application

-there two ways to create react app
1. By using npx : no need to install configuration.
step-1: npx create-react-app reactproject
step-2: cd reactproject
step-3: npm start

2. By using npm : need to install configuration file.

step-1: npm install -g create-react-app
step-2: create-react-app reactproject
step-3: cd reactproject
step-4: npm start

*Folder structure of react app

node_modules: in this all dependencies and dev-dependencies will install install in

it.

package: all install dependencies entry will found here.

package-lock.json: it will contain detail information aboyt installed dependency.
README.md : it is guid for react app.

public folder: it contain static file in it.

*react work on component basis

*component: it is partial part of react app.
-which we can re-use throughout react app.
-it can be any part of react app.

Note: in react app.js is root component.

*In React Thee are two types of component
1.function component:when your main focus in on UI Design in that case we use it.

2.class component: when we have to implement and write complex logic in that case
we use it.

Note: while creating component in react its file name start with capital letter.

*how to display component output or view

-> to get output of any component for this first we have to import it and then
write its name as tag where you want.

Task: create new react project and create one function component and display its
output.
==============================================
12/11/24

*class component
*How to create class component and get its output.

*What is JSX
-JSX(javascript and XML);
-it makes react code easy and allows us to write html code in react.
-in jsx we have put all element inside one parent element.
-the parent element must be block element.

*props :
-it is parameter or functional parameter which is use to pass data inside
component.
-it return object type of data.
-in function component we can access props by writting props.propsName.
-in class component we can access props by writting this.props.propsName.

Task1: you have to create one function component with name MyInfoComp and you have
to pass props with name fname,lname,contact,gender,address and display it output.
Task2: you have to create one class component with name MyFriendComp and you have
to pass props with name fname,lname,contact,gender,address and display it output.

*state :
-it is use to handle essesntial data in class component.
-state always write inside class constructor.
-it return object type of data.
-in class component we can access state property by writting
this.state.propertyName.

-we can use state in function component by using useState Hook

*setState() : this method id use to manipulate update state property values in

class component.

*method and event in react

Task3: creter one class component having state property with name count and
increment ,decrement, and reset count value after clicking on three different
button.
*destructuring : creating constant variable to store data in it.
*destructuring of state
*destructuring of props

*how to use css in react

-there are three ways to use css
1.internal css:
2.external css:
3.module css:
-it is use when we have to write css property for perticular component.
-it will be applicable only when you import it.
-to create module css file we have to write file.module.css

*how to use bootstrap in reac

step1: install bootstrap
npm i bootstrap
step2: go to index.js file and import it.
import 'bootstrap/dist/css/bootstrap.min.css';

*Conditional Rendering:
-display component output on the basis of condition.
1. if else: in this if condition then if block block will display otherwise else
part will display.

2. element as variable: in this we store result in a variable and that variable we

return on the basis of condition.

3. use of ternary operator:this is short hand syntax of if else statment

4. short ciruit(&&): it is use of null checking , and it will display output only
when condition is true.

*How to insert images and multimedia file in react project

Task: create one component with name toggleImgCom in which you ahve to toggle two
images on click on single button

Task: display multiple images when you click multiple button

Task: display 10 images one by one after click on previus and next button

*Component Interaction :
-accessing data from parent component to child component, to perform this first we
have inbetween component they must have parent child relation.

ParentComp (cc)
-create state having empName, and salary propery and display it.
-implement logic after click on button empName and salary get change

*how to pass state property as props

*PureComponent:
-it is component provided by react ,
-which is use to prevent un-necesary re-rendering of class component,
-by performing shalow comparion.
-to achive this we extends component with PureComponent class

*React.memo():
-which is use to prevent un-necesary re-rendering of function component,
-by performing shalow comparion.
-to achive this we pass function component name as argument to React.memo() method.

===========================================================================
13/11/24

*VirtualDOM :

Task: Create class component with name EmpDataComp having state property with
employee containing array of object data for 10 employee with keyname
empId,empName,empPost,empSalary,empAddress,empGender and display data in table
formate.

React.Fragment or Fragment : it is use to remove un-necessary DOM element from DOM

heirarchy.

*React-Bootstrap: it will provide us inbuilt component which we use to make react

app tractive and responsive

step1 : install it
npm install react-bootstrap bootstrap
ste2: import its path in index.js file

MyCarousalComp (fc)

import Carousel from 'react-bootstrap/Carousel';

import Card from 'react-bootstrap/Card';

import {Carousel,Card} from 'react-bootstrap';

*use of snippet
rce : to create class component
rconst: it will create constructor,super method, state in class component.
rfce : it create react function component
rafce : it create react arrow function component

*HOC(Heigher Order Component):

-when we have to share comman bussines logic with multiple component.
-for HOC concept we write logic in function component and share data from it.

*ErrorBoundary :
-it is react component, which is use to handle error occure in component tree while
rendering component.
-it handle error which occure at the time component render.
-to achive this we use two class component lifecycle method
1.getDerivedStateFromError: this is static method, it will execute automatically
when error occure in child component.
2.componentDidcatch:it will error long or error information.

*Class Component lifecycle method:

-class component lifecycle method comes with four phases
1.Mounting Phase: when conponent initialize
-constructor: it execute automatically when component initialize.
-getDerivedStateFromProps:it is static method ,it is use when you have assign
props value to state.
 -render: it is use to display component output.
-componentDidMount: it will execute after render methode.

2.Update Phase: when dom manipulation we perform

-shouldComponentupdate: it will decide wether component will update or not.
-it return boolean result.
-if value is true then component will update otherwise
not.
-getSnapShotBeforeUpdate: it will return state or props value before updation of
it.
-render: it is use to display component output.
-componentDidUpdate:it will return state or props value after updation of it.

3.Unmouting Phase:when component will delete or remove

-componentWillUnmount: it will execute just before component remove or delete,
it will disconnect all connection with other other and server .

4.Error Phase: to handle error

-getDerivedStateFromError: this is static method, it will execute automatically
when error occure in child component.
-componentDidcatch:it will error long or error information.

*Hooks In React
-it allows us to use class component feature in function component.
-by using react hooks we can use state in function component.
-react hooks introduce in reat version-16

*Rules to use Hooks

-Hooks will work only in function component.
-Hookes always in Top level component.
-Hooks can not be render conditionaly.

*There are 7 Hooks in react

1.useState Hook
2.useEffect Hook
3.useContext Hook
4.useRef Hook
5.useReducer Hook
6.useMemo Hook
7.useCallback Hook

*useState hook:
-it allows us to use state in function component.
-it return two values 1. currentState, 2.method-of-update-current-state
-useState hook accept all type of data (number,strinf,boolean,array,object)
-before using it import it first

src folder
Hooks folder
-UseStateHookComp (fc)
-UseEffectHookComp (fc)

Task: Create class component with name EmpDataComp having state property with
employee containing array of object data for 10 employee with keyname
empId,empName,empPost,empSalary,empAddress,empGender and display data in table
formate.
Task: display array data store in function component state and in unordered list
============================================================
14/11/24

*Routing in react:
-if you want to navigate from one component to another component for that we use
it.
-to perform routing in react we have to install react-router-dom library in react
project .

*types of routing
1. naming routing: to display component write component routing path in browser url
to get output of it.

2. default routing: when we have to display component output without writting its
routing path name in browser url.

3. parameterize routing:to display component output only when we pass parameter

with its routing path name.

4. child routing : when we have to display one routing inside another routing in
that case we use it.
-to perform child routing we use children property in routing object
-to display child component output in parent component for that we have add
<Outlet/> directory in parent component.

5. wild card routing: when user enter wrong routing path name in browser url in
that we redirect user to perticular component in that case we use it.
-for wild card routing in its path name we write * symbol
-ImpNote: wild card routing always write at last, its below routing will never
work.

*how to install react-router-dom library

npm install react-router-dom

*reac-router-dom library provide two directory

1. createBrowserRouter: it is methode which takes value as array of object.
-in this we create routing path for component.
-to create router we use object having path and element property

2. RouterProvider: it display component routing on browser.

*Use of Link Directory

component folder
FormvalComp (fc)

src folder
mainRouting folder
routing.js (file)

layout folder
LoginComp (fc)
NavComp (fc)
 FooterComp (fc)
MainDashboardComp (fc)
PageNotFoundComp (fc)

Task: perform form validation in react for lname,email,contact,password and gender.

*useEffect Hook:
-it is use to perform side effect in function component.
-side effect means , fetching data from server, use of timmer, DOM manipulation.
-useEffect hook execute after function component render.
-it return two values 1.callback function ,2.dependency
syntax: useEffect(()=>{},dependency)

case1: when we do not pass second parameter

-useEffect hook will execute after every render method
syntax: useEffect(()=>{});

case1: when we pass second parameter as blank array

-useEffect hook will execute only once after render method
syntax: useEffect(()=>{},[]);

src folder
CRUD folder
ProductDashComp (fc)
AddProductComp (fc)
EditProductComp (fc)

*Axios library:
-it is use to make request from react app to server
-it works on promisses concept
-how to install axios
npm i axios

create json dataabse file

npm i json-server

cd src/shared/database
npx json-server --watch -p 8888 db.json

*Material UI:
-it is use to make react attractive and resposive.
-it provide inbuilt component.
-as well as it provide icon.

-official website for material UI

www.mui.com

*how to install material UI

npm install @mui/material @emotion/react @emotion/styled

*how to install material icon

npm install @mui/icons-material

*we successfully perform get request

*we successfully perform delete request
============================================================
15/11/24
*we successfully perform post request
*we successfully perform put request
*use of useNavigate hook
*use of useParam hook

*useRef Hooks: it is use to access DOM node directly.

-it has object with name current

*React : it is use to create Rich UI.

-it is javascript library
*Redux:-it is predictable state container for javascript app.
or
-it isuse to to store,manage,and track state centraly for javascript App.
-it is not tied with react only.
-how to install it
npm install redux

*redux work on three core principle

Action:it is statement(operation) which we are going to perform
store: it is use to store state in it.
Reducer:it actually caryout state transition depending on action and store.
-after performing operation it return new state.

*how to access state and action from redux to react function component
-useSelector hook: it is use to access state from redux store to react
function component
-useDispatch Hook:it is use to call action from redux to react function
component.

react-redux library: to connect react app with redux library

*Web-storage : it is use to store user on browser

1.local storage : it is use to store user data for permanant
2.session storage: it is use to stor user data for temprary

localStorage.setItem("user1","Sham")
localStorage.getItem("user1");
localStorage.removeItem("user3");
localStorage.clear()

*Protected Routing