React Answer to Questions
useState - бу functional компонентларнинг холатини озгартириш ва бошкариш учун ишлатилади.useState та дастлапки киймат болади ва иккинчиси маълумотни update килиш учун ишлатилади :
Дастлапки кийматта харкана маълумот тури болади: bool, number, string, array.
import { useState } from 'react';
function MyComponent() {
const [stateValue, setStateValue] = useState(initialValue);
}useRef - бу JSX элементини тугридан тугри бошкариш учун ишлатилади. useRef асосан DOM элементларининг кийматини саклаш учун ишлатилади. useRef ишлатиш учун useRef() instance килип оламиз:
import { useRef } from 'react';
function MyComponent() {
const inputName= useRef();
const sendName = () => {
console.log(inputName);
}
return (
<>
<input type="text" ref={inputName}/>
<button onClick={sendName}>Send</button>
</>
)
}useID - бу hook unique id генерация килип беради, улар масалан атрибутларда йоки object ичида id бератин болса ишлатилади масалан:
import { useId } from 'react';
const PasswordField = () => {
const id = useID();
return (
<>
<input type="password" aria-describedby={id} />
<p id={id}>
</>
)
}useTransition - бу hook UI render килмастан йоки блокламаслик учун ишлатилади. Бу hook асосан биронта маълумот топишта (search) пайтида ишлатса болади.
useEffect - бу side эффектларни бажариш учун ишлатилади. Side effect дегани биронта бир маълумот тугридан тугри экранга(interface) корсатишка олип келмайтиган, лекин компоненталар оз ора ташки ресурлар билан зарур операцияларни ишлаш учун ишлатилади. useEffect синтаксиси биринчи function , кейин dependency array кабул килади. useEffect ташки API дан маълумот олиш учун якши ишлатилади.
import { useEffect } from 'react';
function DataList() {
const [data, setData] = useState([]);
useEffect(() => { fetch(API)
.then(response => response.json())
.then(res => setData(res)); }, []);
return (
<>
{
data?.map(item => {
return <div key={item.id} > {item?.name} <div/>
})
}
</>
)
}useMemo - бу hook performance якшилаш учун ишлатилади, бу hook эслап колинган value кайтаради ва кайта re render олдини олиш учун ишлатилади. useMemo синтаксиси озида function ва dependency array кабул килади.
import { useMemo } from 'react'
export default function App() {
const memoizedVal = useMemo(() => {/* function */}, [/* Dependencies */])
return ( <div className="App"></div> )
}useCallback - бу hook performance якшилаш учун ишлатилади, бу hook эслап колинган function кайтаради ва кайта re render олдини олиш учун ишлатилади. useCallback синтаксиси озида function ва dependency array кабул килади.
import { useCallback } from 'react'
export default function App() {
const memoizedVal = useCallback(() => {/* function */}, [/* Dependencies */])
return ( <div className="App"></div> )
}useContext - бу hook глобал турип stateларни бошкариш учун ишлатилади. Бу hook оркали nested componentларига маълумот (data ) етказип берса болади ва бу props drilling олдини олади. useContext ишлатиш учун уни parent элементтига жойлаб койиш керак ва useContext store folder ичида сакланади мисол учун:
import { createContext, useContext } from 'react';
const NameContext = createContext('');
function App() {
return (
<NameContext.Provider value="Name User">
<Body />
<NameContext.Provider> );
}
function Body() {
return <InfoUser />;
}
function InfoUser() {
const name = useContext(NameContext);
return ( <h1>Welcome, {name}</h1> );
}React router - бу reactта кошимча кутипхона, у билан routeларни бошкариш учун ишлатилади. Уни орнатип олиш учун "npm i react-router" йозилади. React router хар канака сахифага тез отип беради. React router йозилиш структураси биринчи router номли folder очип оламиз кейин унга :
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
element: <Layout />,
errorElement: <NotFound />,
children: [
{
path: "/",
element: <Home />
},
{
path: "/author",
element: <Author />
}
]
},
])main.jsx folder ичига шу code йозип коямиз:
import { RouterProvider } from "react-router-dom";
ReactDOM.createRoot(document.getElementById('root')).render(
<RouterProvider router={router} />
)10) useParams , useLocation , useNavigate
Булар React router методлари кисопланади: useParams - бу url турган параметрни олип беради масалан id :
import { useParams } from 'react-router-dom';
function UserDetail() {
const { id } = useParams();
return (
<div>
<h2>User Detail Page</h2>
<p>User ID: {id}</p>
</div>
);
}useLocation - бу url турган path name олип беради масалан:
import { useLocation } from 'react-router-dom';
function CurrentLocation() {
const location = useLocation();
return (
<div>
<h2>Current Location</h2>
<p>Pathname: {location.pathname}</p>
</div> );
}useNavigate - бу биронта сахифага navigate килип юборади масалан:
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleButtonClick = () => {
navigate('/new-route');
};
return (
<div>
<h2>My Component</h2>
<button onClick={handleButtonClick}>Go to New Route</button>
</div> );
}Props - бу properties дегани, props оркали бизлар react та parent элементтан child элементка йоки child элементтан parent элементка хохлагаг турдаги маълумот юборсак болади масалан: function, array, number, string.
function ParentElem() {
const data = "Hello from Parent!";
return ( <div>
<ChildComponent message={data} />
</div> );
}
export default ParentElem;
function ChildElem(props) {
return ( <div>
<p>{props.message}</p>
</div> );
}
export default ChildComponent;Conditional rendering - бу шарт операторлари , бу дегани true болса бир иш килсин, false кийматта бошка иш килсин . Маслан react та if operator, ternary operator (?, :), logical operator (&&) копинча ишлатилади.
Axios va Fetch да иккаласида жуда катта фарк бор. Axios ва fetch promise кайтаради ва API request килиш учун ишлатилади. Axios бу кошимча кутипхона кисопланади (npm i axios), fetch бу native JS методи кисопланади. Axios та коп нарса default йозилган болади, масалан маълумотни response килган пайтида json() йозиш шарт емас, fetch да йозилади. Axios та main api адресени йоки token бир марта default йозим койса болади. Уларнинг syntax фарх бор масалан:
axios.get('api') .then(response => {
console.log(response.data);
}).catch(error => { console.error(error);
});
fetch('api') .then(response => {
return response.json(); }) .then(data => {
console.log(data); }) .catch(error =>
{ console.error(error);
});useReducer - бу hook react та state бошкариш учун ишлатилади, бу hook озида иккита аргумент олади reducer ва initialState. Агар, дастур йозияпкан пайтида коп state билан ишлаш тогри келип колса useReducer ишлаткан якши, акс колда жуда коп useState ишлатишка тогри келип колади. initialState та маълумотлар object кориништа болади ва reducerда switch (танлаш operator) кориништа болади, у жойга action type йозилади.
Redux - бу кошимча кутипхона stateларни бошкариш учун ишлатилади. Redux та useReducer ишлаган ишни килади лекин, redux global болади . Бу дегани redux folder болади ташкарида ичида initialState, store, reducer файл болади , уларни бизлар дастуримизда хохлаган component ичига чакирип ишлатсак болади. Масалан stateтимизда array типида маълумот бор, уни component ичига useDispatch() instance оламиз ва useSelector оркали маълумотни юклап оламиз.