Scribd
Upload
10 views

React Web Dev

Uploaded by

Debasis Baraj
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views

React Web Dev

Uploaded by

Debasis Baraj
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

React Class 1:

create a folder in desktop and then cd to dektop then run this

npx create-react-app dummy


cd dummy
npm run start

---------------------------------------
js library -> to create UI

React is all about components


you can create custom html element

components is a resualbe piece of code

impertitve approach in js but in react its easy herer you have to just say i want
this(it is also know as decelartive approcah)

index.js will execute first

index.js->index.html->root dive ->react root->render app componetent->app.js-


>render html

react root(user friendly)-> convert to browser friendly

conversion isdone by npm start

State---------------------------------
useState is a React Hook that allows you to add state to functional components.
It’s used to manage dynamic data in your component that can change over time (such
as user input, a counter, or API data). The useState hook gives your component a
way to "remember" values between renders.

Initialize state inside your component: You call useState() and pass an initial
value as its argument. It returns an array with two values:

Export default -------> to import one single componet


named export allows multiple import --> frist rigth export before function and use
{ name of the component in the curly braces}

Fragments------------> React.Fragment

Map in React js--->

foodItems.map((item)-->{map to what ever written here} )

conditional redndering --->


passing Data vai props-------------------------------------

Use state it rerurn an array and it have two value


The current state value.
A function to update the state.

passing children--->

accessed wth props.children

use ref

context api--->

Use effect ---> it is used to manage side effect

what is a side effect --->

jis v component ke andar \ likha hoga wo component render hone ke baad iske
andar jo v code likha hoga wo execute hoga

useEffect( () => {} )-->every render

variation ---- 2 -->Frist render

useeffect(()=>{ console,[]})

variation 3--> on fist render + whwneever dependecy change

useeffect(()=>{ console,[text]})
the array hold the dependece

variation 4--->. Side Effects and Cleanup

useEffect(() => {
const timer = setTimeout(() => {
console.log("Timeout triggered after 3 seconds");
}, 3000);

return () => clearTimeout(timer); // Cleanup the timer


}, []);

return statmet will run first


mount means componenet dom pe render ho chuka hai

React Router--------> navigate between page without refreshing the page

browser router is used to link path


Here, BrowserRouter manages the routes, and the Link component is used for
navigation, updating the URL without a page reload.

to crrate path use Routes

to crate single route use <route/>

link <Link to="/"> home</Link>

nav link do same thing and on clicked route ke upar active class laga dega

for nested routing


use outlet when want to let parent route element render child route element

use navigate hook

----------------------------------------

React advance--->class 1

custom hook

class-2 ---->

Context Api --->context means snap shot of data

context api ---rule --

createContext()

provide context

consume

useSearchParam()

searchParam is a object contain query parameter like /pic/march?tag="friend" &&


level="A" the tag and level it acess that and to update the value of that we use
setseacrhparameter
useLocation()

pathname ->"/pic/march/13" it gives this excluding baseurl


to add somthing use search

location.search

=======================================
redux calss 4

create a slice using createSlice(it gives reduceer and action creator) and it
contains

name ,intialstate, reducer (funuctionalites dal do)


reducer ke andar main function ke andar hote hai

export all function


export const { increment ,decrement}=CounterSlice.actions
and export reducer
export default CounterSlice.reducer;

kush v nikal na hai slice se to action ka use kar na action


ek creator hai jiske andra sare functioanlites a jati hai reducer ka

to create a store a centralize store we use configureStore

then list all slicees

export const store= configureStore({

reducer:{
// name of slice counter:CounterSlice//reducer

},
})

link redux code to react code

index.js mai jake <App/> ko wrappe kardo using <Provider store={store}></Proider>

useSelctor is used to frtch data from slice it is used to acess state


A selector is a function that takes the state as an argument and returns a specific
value or subset of the state. This is especially useful when you need to derive or
transform the data for your components.
phele store then slice flow

useDispatch is used to call the functions in redux

export const { increment ,decrement}=CounterSlice.actions to call the inc and dec

const dispatch=useDispatch();

reducer functions take two thing state and action

You might also like