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
