11.2-bob: React kirish — JSX, komponentlar, props
11-QISM — Frontend: React · 2-mavzu
1. Kirish va motivatsiya
11.1-bobda biz vanilla DOM bilan ilova yozdik va uning og'rig'ini his qildik: har o'zgarishda render() ni qo'lda chaqirish, qaysi DOM bo'lagini yangilashni eslab qolish, ma'lumot (state) va ko'rinish (DOM) ni qo'lda sinxron ushlab turish. Bu og'riq kichik ilovada chidasa bo'ladi, lekin haqiqiy mahsulot (ming komponent, server ma'lumoti, real-time yangilanish) da — imkonsiz. Aynan shu muammoni hal qilish uchun 2013-yilda Facebook React ni yaratdi va u bugun dunyodagi eng ko'p ishlatiladigan frontend kutubxonasiga aylandi.
React — foydalanuvchi interfeysini qurish uchun JavaScript kutubxonasi (framework emas — bu farq muhim: u faqat UI bilan shug'ullanadi, routing/state/data fetching uchun alohida vositalar bor — 11.9, 12-QISM). React'ning butun falsafasi ikkita g'oyaga tayanadi: (1) Komponent — UI'ni mustaqil, qayta ishlatiladigan, o'z mantig'iga ega bo'laklarga bo'lish; (2) Deklarativ render — UI = f(state) (11.1: 2.10): siz UI qanday ko'rinishini tasvirlaysiz, React esa ma'lumot o'zgarganda haqiqiy DOM'ni eng optimal tarzda o'zi yangilaydi. Bunda yordamchi sehr — Virtual DOM: React real DOM'ning yengil nusxasini xotirada saqlaydi, o'zgarish bo'lganda eski va yangi nusxani solishtiradi (diffing) va faqat farqni real DOM'ga qo'llaydi (11.1: 2.7-2.8 dagi optimizatsiyalarni avtomatik qiladi).
Bu bob — React bilan birinchi chinakam uchrashuv: React nima va nega (kutubxona vs framework, Virtual DOM, reconciliation under the hood), komponent (function component — nima, qanday yoziladi, PascalCase qoidasi), JSX (chuqur — bu nima, aslida JavaScript ekani, React.createElement/yangi JSX transform'ga aylanishi, ifoda {}, atributlar className/htmlFor, bitta ildiz va Fragment, shartli render), props (komponentga ma'lumot uzatish — pastga oqim, props o'zgarmasligi — read-only, destructuring, default qiymat, children prop), kompozitsiya (komponentlarni birlashtirish), va bir tomonlama ma'lumot oqimi (one-way data flow). Senior bo'lish uchun shart bo'lgan qo'shimcha tushunchalar ham qamraladi: render nima ekanligining ichki mexanizmi, StrictMode, va React 19 konteksti.
O'xshatish: Komponentlar — LEGO g'ishtlari. Har bir g'isht (komponent) mustaqil, o'z shakli va vazifasi bor (
Button,Card,Navbar). Siz ularni qayta-qayta ishlatasiz va birlashtirib murakkab narsa (butun sahifa, ilova) quryapsiz — xuddi LEGO'dan kosmik kema yasagandek. Props esa — g'ishtni sozlash parametrlari: bir xilButtong'ishtiga "rang: ko'k, matn: Saqlash" yoki "rang: qizil, matn: O'chirish" deb berasiz — bitta qolipdan ko'p xil tugma chiqadi. JSX — bu g'ishtlarni yig'ish chizmasi: HTML'ga o'xshaydi, lekin aslida JavaScript (chizmaga jonli hisob-kitob —{}— qo'sha olasiz). Va eng muhimi: siz LEGO yasashda har bir plastik molekulani joylashtirmaysiz (vanilla DOM) — tayyor g'ishtlardan tasvir bo'yicha yig'asiz (deklarativ).
Nega muhim?
- React'ning yuragi — komponent, JSX, props — qolgan HAMMA narsa (hooks, state, routing) shularning ustiga quriladi.
- Qayta ishlatish — bir marta yozilgan komponent ming joyda ishlatiladi (DRY — 9.1).
- Deklarativ tafakkur —
UI = f(state)ni tushunmasdan React'da sifatli kod yozib bo'lmaydi. - Ish bozori — React vakansiyalari frontend'da eng ko'pi; bu bilim — to'g'ridan-to'g'ri pul.
2. Nazariya — chuqur tushuntirish
2.1. React nima va Virtual DOM (ichki mexanizm)
REACT NIMA: UI qurish kutubxonasi (framework EMAS — faqat ko'rinish bilan shug'ullanadi)
ASOSIY G'OYA: UI = f(state) (ko'rinish — ma'lumotning funksiyasi)
Siz: ma'lumotni (state) o'zgartirasiz React: UI'ni qayta hisoblaydi
VIRTUAL DOM (React'ning "qoralama daftari"):
┌──────────────┐ o'zgarish ┌──────────────┐
│ ESKI Virtual │ ─────────────► │ YANGI Virtual│
│ DOM (xotira) │ │ DOM (xotira) │
└──────┬───────┘ └──────┬───────┘
└────────── DIFFING ────────────┘ (solishtirish — nima o'zgardi?)
│
▼ faqat FARQNI qo'llaydi (eng kam DOM operatsiyasi)
┌────────────────┐
│ HAQIQIY DOM │ brauzer (qimmat — 11.1: 2.7)
└────────────────┘
Virtual DOM — oddiy JS obyektlar daraxti (yengil, tez). Haqiqiy DOM — qimmat.
React eski/yangi VDOM'ni solishtirib, faqat O'ZGARGANINI real DOM'ga yozadiReact — foydalanuvchi interfeysi qurish uchun JavaScript kutubxonasi. Uning markaziy g'oyasi —
UI = f(state): siz ma'lumotni o'zgartirasiz, React UI'ni qayta hisoblaydi (11.1: 2.10). Buni tez qilish uchun React Virtual DOM (VDOM) ishlatadi — bu haqiqiy DOM'ning xotiradagi yengil JS obyekt nusxasi (oddiy{type, props, children}daraxti). Ma'lumot o'zgarganda React: (1) yangi VDOM yaratadi; (2) uni eski VDOM bilan solishtiradi (diffing — reconciliation, 2.2); (3) faqat o'zgargan qismni haqiqiy DOM'ga qo'llaydi. Nega bu muhim: haqiqiy DOM operatsiyasi qimmat (reflow/repaint — 11.1: 2.7), JS obyektlar bilan ishlash esa arzon. React qimmat ishni minimallashtiradi — 11.1 da biz qo'lda qilgan fragment/batching optimizatsiyasini avtomatik va aqlli qiladi. Shuning uchun React "tez" — u kam, lekin to'g'ri DOM o'zgarishi qiladi.
2.2. Reconciliation va render — "render" aslida nima
"RENDER" REACT'DA = komponent FUNKSIYASINI chaqirib, JSX (VDOM) ni HOSIL qilish
(Bu — ekranga chizish EMAS! Render = "yangi ko'rinish tavsifini hisoblash")
2 FAZA:
1. RENDER fazasi — komponent funksiyasi ishlaydi yangi VDOM (toza, nojonli)
React eski VDOM bilan solishtiradi (reconciliation/diffing)
2. COMMIT fazasi — hisoblangan farq HAQIQIY DOM'ga yoziladi (brauzer ko'radi)
RENDER QACHON BO'LADI:
- boshlang'ich (birinchi marta — mount)
- state o'zgarganda (11.5 useState)
- props o'zgarganda (ota qayta render bo'lsa)
- parent re-render bo'lsa (bola ham — 11.11)
Render = funksiyani QAYTA chaqirish (har render — funksiya yangidan ishlaydi)
Tez-tez render — muammo emas (VDOM arzon); muammo — keraksiz QIMMAT render (11.11)"Render" — React'da eng ko'p chalkashtiriladigan so'z. Render ekranga chizish emas; render — bu komponent funksiyasini chaqirib, u qaytaradigan JSX (Virtual DOM tavsifi)ni hisoblash. React ikki fazada ishlaydi: render fazasi (komponent funksiyalari ishlaydi yangi VDOM hosil bo'ladi eski bilan solishtiriladi — bu reconciliation/diffing) va commit fazasi (aniqlangan farq haqiqiy DOM'ga yoziladi — endi brauzer ko'radi). Render qachon bo'ladi: birinchi marta (mount), state o'zgarganda 11.5-bob, props o'zgarganda, yoki ota komponent qayta render bo'lganda (bolasi ham — 11.11). Ikki muhim xulosa: (1) har render — komponent funksiyasi boshidan qayta ishlaydi (shuning uchun ichidagi oddiy o'zgaruvchilar "esda qolmaydi" — bu yerda
useStatekeladi — 11.5); (2) tez-tez render — o'z-o'zidan muammo emas (VDOM arzon), muammo faqat keraksiz qimmat renderlar (11.11 da optimallashtiramiz). Bu mexanizmni tushunish — React'da chuqur xato tuzatish va optimizatsiyaning kaliti.
2.3. Komponent — UI'ning mustaqil bo'lagi
KOMPONENT — JSX qaytaradigan JavaScript FUNKSIYASI (UI'ning qayta ishlatiladigan bo'lagi):
function Salom() { // nom BOSH HARF bilan (PascalCase) — MAJBURIY
return <h1>Salom dunyo!</h1>; // JSX qaytaradi (komponent NIMA ko'rsatishini)
}
ISHLATISH — teg sifatida (xuddi HTML teg kabi):
<Salom /> // React buni Salom() funksiyasini chaqiradi
KOMPONENTLAR DARAXTI (ilova = komponentlar daraxti):
App
├─ Navbar
│ ├─ Logo
│ └─ Menu
├─ ProductList
│ ├─ ProductCard qayta ishlatiladi (har mahsulot uchun)
│ ├─ ProductCard
│ └─ ProductCard
└─ Footer
Nom kichik harf bo'lsa (salom) — React uni HTML teg deb o'ylaydi (xato!)
Komponent FAQAT bitta narsani yaxshi qilsin (SRP — 9.1)Komponent — JSX qaytaradigan JavaScript funksiyasi; u UI'ning mustaqil, qayta ishlatiladigan bo'lagini ifodalaydi (tugma, karta, navbar, butun sahifa). Zamonaviy React'da komponentlar — funksiyalar (eski class komponentlar hali bor, lekin yangi kod funksiya + hooks bilan yoziladi). Ikki qat'iy qoida: (1) nom bosh harf bilan (PascalCase —
ProductCard,Navbar) — bu majburiy: React kichik harfli tegni (<div>) HTML element, bosh harfli tegni (<Card>) komponent deb ajratadi (kichik harf bilan yozsangiz ishlamaydi — 2.3 xato); (2) komponent JSX qaytaradi (yokinull). Komponentni HTML teg kabi ishlatasiz:<Salom />. Butun ilova — bu komponentlar daraxti (App Navbar Logo...). Komponentlar kompozitsiya orqali quriladi (kichiklardan kattalar) va har biri bitta narsani yaxshi qilishi kerak (Single Responsibility — 9.1). Bu — toza, kengaytiriladigan UI arxitekturasining asosi.
2.4. JSX nima — bu aslida JavaScript
JSX — JavaScript ichida HTML'ga o'xshash sintaksis (lekin HTML EMAS — JavaScript!):
const element = <h1 className="title">Salom</h1>; // HTML emas, JSX
BU ASLIDA NIMAGA AYLANADI (Babel/transpiler o'giradi):
const element = React.createElement( // yangi transform: _jsx("h1", ...)
"h1", // teg turi
{ className: "title" }, // props (atributlar)
"Salom" // children (ichidagi)
);
bu esa oddiy JS OBYEKT qaytaradi (Virtual DOM elementi):
{ type: "h1", props: { className: "title", children: "Salom" } }
JSX — "sintaktik shakar": yozishga qulay, lekin oxiri oddiy JS funksiya chaqiruvi
Shuning uchun JSX ichida JavaScript IFODA ishlatish mumkin ({...}) — 2.5
JSX majburiy EMAS (createElement qo'lda yozsa bo'ladi), lekin amalda hamma JSX ishlatadiJSX (JavaScript XML) — JavaScript ichida HTML'ga o'xshash sintaksis yozish imkonini beruvchi kengaytma. Lekin eng muhim haqiqat: JSX — HTML emas, JavaScript. Brauzer JSX'ni tushunmaydi; Babel (yoki Vite/SWC — 11.3) uni oddiy JS funksiya chaqiruviga o'giradi (transpile):
<h1 className="title">Salom</h1>React.createElement("h1", {className:"title"}, "Salom")(React 17+ yangi "automatic runtime"da —_jsx("h1", ...)). Bu funksiya esa oddiy JS obyekt qaytaradi:{ type, props }— bu Virtual DOM elementi 2.1-bob. Ikki muhim natija: (1) JSX — "sintaktik shakar" (syntactic sugar): yozishga qulay, lekin ostida oddiy JS; (2) aynan shuning uchun JSX ichida JavaScript ifodalarini{}bilan ishlatish mumkin 2.5-bob — chunki bu allaqachon JS. JSX majburiy emas (createElement'ni qo'lda yozsa bo'ladi), lekin u kodni o'qishni shu qadar osonlashtiradiki, amalda butun React jamiyati uni ishlatadi.
2.5. JSX qoidalari — ifodalar, atributlar, bitta ildiz
1. JAVASCRIPT IFODA — jingalak qavs {} ichida:
<h1>Salom, {user.name}!</h1> // o'zgaruvchi
<p>{2 + 2}</p> // ifoda
<span>{isLogged ? "Chiqish" : "Kirish"}</span> // ternary (shart)
<ul>{items.map(x => <li key={x.id}>{x.name}</li>)}</ul> // ro'yxat 11.4-bob
// {} ichiga IFODA quyiladi (qiymat qaytaradigan); if/for YO'Q (ular ifoda emas)
2. ATRIBUTLAR — camelCase + JS nomlari (HTML'dan farq):
className (class EMAS — "class" JS kalit so'zi)
htmlFor (for EMAS)
onClick (onclick EMAS — camelCase)
style={{ color: "red" }} // obyekt (ikki qavs: {} JSX + {} obyekt)
3. BITTA ILDIZ — komponent BITTA element qaytarishi kerak:
return <h1/><p/> // ikki ildiz — XATO
return <div><h1/><p/></div> // bitta o'rab oluvchi
return <><h1/><p/></> // Fragment (ortiqcha div'siz — 2.6)
4. YOPILISHI shart: <img /> <br /> (self-closing — HTML'da ixtiyoriy, JSX'da MAJBURIY)JSX qoidalari — JSX JavaScript bo'lgani uchun HTML'dan bir oz farq qiladi: (1) JavaScript ifodalar
{}ichida — o'zgaruvchi, hisob, ternary,.map()11.4-bob — istalgan qiymat qaytaradigan ifoda; lekinif/forishlamaydi (ular ifoda emas, ko'rsatma — shuning uchun shart uchun ternary yoki&&ishlatiladi — 11.4). (2) Atributlar camelCase va JS nomlari:className(classemas — JS kalit so'zi),htmlFor(foremas),onClick(onclickemas),style={{...}}(obyekt — ikki qavs: tashqi{}JSX ifodasi, ichki{}JS obyekt). (3) Bitta ildiz element — komponent faqat bitta tepa elementni qaytaradi (chunki funksiya bitta qiymat qaytaradi); ko'p element kerak bo'lsa<div>yoki Fragment<>...</>bilan o'raladi 2.6-bob. (4) Har teg yopilishi shart:<img />,<br />(HTML'da ixtiyoriy, JSX'da majburiy). Bu qoidalar — JSX'ning JavaScript ekanligidan kelib chiqadi, yodlash emas, tushunish kerak:class/forJS kalit so'zlari,ififoda emas, funksiya bitta qiymat qaytaradi.
2.6. Fragment — ortiqcha divsiz guruhlash
MUAMMO: bitta ildiz kerak, lekin ortiqcha <div> DOM'ni ifloslaydi (keraksiz teg)
ortiqcha div (DOM'da keraksiz qatlam, CSS/flex buziladi):
return (
<div> {/* bu div faqat "o'rash" uchun — keraksiz */}
<td>Ism</td>
<td>Familiya</td>
</div>
);
FRAGMENT — guruhlaydi, lekin DOM'ga HECH NARSA qo'shmaydi:
return (
<> {/* ko'rinmas o'ram — DOM'da iz qoldirmaydi */}
<td>Ism</td>
<td>Familiya</td>
</>
);
// to'liq shakli: <React.Fragment> ... </React.Fragment> (key kerak bo'lsa — 11.4)
Jadval (<tr><td>), ro'yxat, flex/grid bolalarida ortiqcha div ZARARLI FragmentFragment — bir nechta elementni ortiqcha HTML teg qo'shmasdan guruhlash usuli. JSX bitta ildiz talab qiladi 2.5-bob, lekin har doim
<div>bilan o'rash DOM'ni keraksiz qatlamlar bilan ifloslaydi — bu ayniqsa<table>(<tr>ichida faqat<td>bo'lishi kerak), flexbox/grid bolalarida (ortiqcha div layout'ni buzadi — 1.3, 1.4) zararli. Fragment (<>...</>qisqa shakli yoki<React.Fragment>) elementlarni guruhlaydi, lekin DOM'ga hech narsa qo'shmaydi (ko'rinmas o'ram). Qachon: komponent bir nechta element qaytarishi kerak, lekin ularni o'rovchi haqiqiy teg semantik jihatdan keraksiz bo'lganda. Agar ro'yxatda Fragment ishlatsangiz vakeykerak bo'lsa — qisqa<>ishlamaydi, to'liq<React.Fragment key={id}>yozasiz 11.4-bob. Bu kichik, lekin toza DOM va to'g'ri layout uchun muhim vosita.
2.7. Props — komponentga ma'lumot uzatish (pastga oqim)
PROPS (properties) — OTA komponent BOLAga uzatadigan ma'lumot (atribut kabi):
// Ota uzatadi (HTML atributi kabi):
<UserCard name="Ali" age={25} isAdmin={true} />
// Bola qabul qiladi (props obyekti sifatida):
function UserCard(props) { // props = { name:"Ali", age:25, isAdmin:true }
return <h2>{props.name}, {props.age} yosh</h2>;
}
// DESTRUCTURING (amaliyotda shunday — toza):
function UserCard({ name, age, isAdmin }) { // to'g'ridan ajratib olamiz (2.8 JS)
return <h2>{name}, {age} yosh</h2>;
}
MA'LUMOT OQIMI — bir tomonlama (yuqoridan pastga):
App ──name──► UserCard ──► (faqat past tomonga, hech qachon yuqoriga)
String: name="Ali" (qo'shtirnoq) | Boshqa tur: age={25} (jingalak — JS ifoda)
Props — FAQAT O'QISH uchun (read-only) — bola uni O'ZGARTIRA OLMAYDI (2.9)Props (properties) — ota komponent boladan ma'lumot uzatish mexanizmi (HTML atributiga o'xshaydi). Ota teg atributlari kabi beradi:
<UserCard name="Ali" age={25} />; bola esa ularni bittapropsobyekti sifatida oladi (props.name,props.age). Amaliyotda har doim destructuring bilan to'g'ridan ajratib olamiz:function UserCard({ name, age })(2.8 — JS destructuring). Qiymat berish: string uchun qo'shtirnoq (name="Ali"), boshqa tur (raqam, boolean, massiv, obyekt, ifoda) uchun jingalak qavs (age={25},isAdmin={true},items={list}). Ikki tamoyil: (1) ma'lumot oqimi bir tomonlama — yuqoridan pastga (ota bola), hech qachon teskari 2.10-bob; (2) props faqat o'qish uchun (read-only — immutable): bola olgan props'ni o'zgartira olmaydi 2.9-bob. Props — komponentni "sozlash" usuli: bittaButtonkomponenti turli props bilan yuzlab xil tugmaga aylanadi — bu qayta ishlatishning asosi.
2.8. props.children — komponent ichiga JSX uzatish
CHILDREN — komponent OCHIB-YOPISH teglari ICHIDAGI JSX (maxsus prop):
// Ishlatish — Card ICHIGA istalgan kontent solamiz:
<Card>
<h2>Sarlavha</h2> bu hammasi
<p>Matn...</p> Card'ning "children"i bo'ladi
</Card>
// Card uni "children" prop orqali oladi va joylashtiradi:
function Card({ children }) {
return <div className="card">{children}</div>; // ichidagini shu yerga qo'yadi
}
┌──────────────────────────────────────────────────────────┐
│ children "o'ram" (wrapper) komponentlar uchun ASOS: │
│ Card, Modal, Layout, Button, Sidebar — ichiga nima │
│ solishni CHAQIRUVCHI hal qiladi (moslashuvchan) │
└──────────────────────────────────────────────────────────┘
children — kompozitsiyaning kaliti 2.9-bob: umumiy "qobiq" + o'zgaruvchan "ichak"
children— maxsus prop: komponentning ochish va yopish teglari orasiga qo'yilgan JSX.<Card><h2>...</h2></Card>da<h2>...— buCardningchildreni;Carduni{children}orqali oladi va xohlagan joyiga joylashtiradi. Bu — o'rovchi (wrapper) komponentlarning asosi:Card,Modal,Layout,Sidebar,Button— bular umumiy "qobiq" (stil, ramka, mantiq) beradi, ichiga nima qo'yishni esa chaqiruvchi hal qiladi. Masalan, bittaCardkomponenti har xil kontent bilan ishlatiladi — moslashuvchan va qayta ishlatiladigan.children— React kompozitsiyasining 2.9-bob eng kuchli vositasi: meros (inheritance) o'rniga komponentlarni ichma-ich joylashtirib murakkab UI quramiz. Bu yondashuv — "composition over inheritance" (9.1 SOLID falsafasiga mos).
2.9. Props o'zgarmasligi (immutability) va kompozitsiya
PROPS — READ-ONLY (o'zgarmas): bola props'ni O'ZGARTIRMASLIGI kerak
XATO — props'ni o'zgartirish (React tartibini buzadi):
function Welcome({ user }) {
user.name = "Boshqa"; // otaning ma'lumotini buzadi! taqiqlanadi
return <h1>{user.name}</h1>;
}
TO'G'RI — props faqat O'QILADI; o'zgartirish kerak bo'lsa — STATE 11.5-bob yoki
otaga callback orqali xabar berish 2.10-bob:
function Welcome({ user }) {
return <h1>{user.name}</h1>; // faqat o'qiymiz, ishlatamiz
}
KOMPOZITSIYA (composition) — kichik komponentlardan kattalarini qurish:
function Page() {
return (
<Layout> {/* o'ram */}
<Header title="Bosh sahifa" /> {/* props bilan sozlangan */}
<ProductList items={products} />
<Footer />
</Layout>
);
}
"Pure function" g'oyasi: bir xil props bir xil natija (2.2 render — 9.1 SRP)Props o'zgarmasligi (immutability) — React'ning eng muhim qoidalaridan biri: komponent o'z props'ini hech qachon o'zgartirmasligi kerak (read-only). Sababi: props otaga tegishli ma'lumot; uni bola o'zgartirsa — ma'lumot oqimi 2.10-bob buziladi va React renderni to'g'ri kuzata olmaydi. Komponent pure function kabi bo'lishi kerak 2.2-bob: bir xil props kirsa — har doim bir xil JSX chiqsin (9.1 — funksional poklik). Agar ma'lumot o'zgarishi kerak bo'lsa — ikki yo'l: (1) komponentning o'z ichki statei (11.5 —
useState); (2) otaga callback (funksiya prop) orqali "o'zgartir" deb xabar berish 2.10-bob. Kompozitsiya — kichik komponentlardan kattasini birlashtirib qurish (LayoutichidaHeader+ProductList+Footer), props bilan sozlab,childrenbilan o'rab. Bu — React arxitekturasining yuragi: meros (inheritance) emas, kompozitsiya (composition) — moslashuvchan, qayta ishlatiladigan, oson sinaladigan UI.
2.10. Bir tomonlama ma'lumot oqimi (one-way data flow)
MA'LUMOT — faqat YUQORIDAN PASTGA oqadi (ota bola, props orqali):
App (ma'lumot bu yerda — "manba")
│ props (ma'lumot pastga)
▼
Parent
│ props
▼
Child faqat oladi va ko'rsatadi (yuqoriga "tortolmaydi")
BOLA OTAGA QANDAY TA'SIR QILADI? — callback (funksiya) prop orqali "xabar beradi":
App: const [count,setCount]=useState(0)
<Button onClick={() => setCount(count+1)} /> // funksiya pastga uzatiladi
Button: function Button({ onClick }) {
return <button onClick={onClick}>+</button>; // chaqiradi, o'zi o'zgartirmaydi
}
bola "hodisa bo'ldi" deb otaga xabar beradi; OTA ma'lumotni o'zgartiradi
Ma'lumot pastga (props), hodisa/xabar yuqoriga (callback) — "data down, events up"
Bu — bashoratli (predictable): ma'lumot qayerdan kelganini doim bilib turasiz (debugging oson)Bir tomonlama ma'lumot oqimi (one-way / unidirectional data flow) — React'ning fundamental tamoyili: ma'lumot faqat yuqoridan pastga oqadi (ota bola, props orqali). Bola hech qachon ma'lumotni "yuqoriga tortmaydi" yoki otaning state'ini to'g'ridan o'zgartirmaydi. Unda bola otaga qanday ta'sir qiladi? — callback prop orqali: ota bolaga funksiya uzatadi (
onClick={() => setCount(...)}), bola shu funksiyani chaqiradi ("hodisa bo'ldi" deb xabar beradi), lekin ma'lumotni ota o'zgartiradi. Bu pattern — "data down, events up" (ma'lumot pastga, hodisalar yuqoriga). Nega bu yaxshi: ma'lumot oqimi bashoratli (predictable) — istalgan qiymat qayerdan kelganini va kim o'zgartirishini aniq bilasiz, shuning uchun xatolarni topish (debugging) ancha oson. Vanilla DOM'da har joy har joyni o'zgartira olardi (tartibsizlik — 11.1: 2.9); React'da ma'lumotning yagona yo'nalishi bor. Bu tushuncha — state'ni qayerda saqlash (lifting state up — 11.4), Context 12.1-bob, Redux 12.2-bob — barchasi shu tamoyilga asoslanadi.
2.11. StrictMode va React 19 konteksti (qo'shimcha — muhim)
<React.StrictMode> — dasturlash paytida xatolarni ERTA topish "qattiq rejim":
- Komponentni QO'SH render qiladi (dev'da) nopok (impure) komponentni fosh qiladi
- Eskirgan/xavfli API'lar haqida ogohlantiradi
- Faqat development'da; production'da ta'sir yo'q (qo'shtirnoqdan qo'rqma)
REACT 19 (2024-2025, joriy versiya) — yangiliklar (keyingi boblarda chuqur):
- ref endi oddiy prop (forwardRef ko'p hollarda kerak emas — 11.12)
- <Context> to'g'ridan provider sifatida 12.1-bob
- Actions, useActionState, useOptimistic (forma/server — 13.5)
- use() — Promise/Context o'qish hook'i
- Hujjat metadata (<title>, <meta>) komponentdan (13.8 SEO)
Bu bobda faqat tushun: zamonaviy React = funksiya komponent + JSX + props + hooksStrictMode —
<React.StrictMode>o'ram komponenti: dasturlash (development) paytida React'ni "qattiq rejim"ga qo'yadi — komponentlarni qo'sh render qiladi (nopok/impure komponentlarni, ya'ni render paytida nojo'ya ish qiladiganlarni fosh qilish uchun — 2.2), eskirgan API'lar haqida ogohlantiradi. U faqat developmentda ishlaydi — production build'da ta'siri yo'q, shuning uchun "komponentim ikki marta ishladi" degan dev-paytidagi holatdan qo'rqma (bu ataylab — sof komponent yozishga majburlaydi). React 19 (joriy versiya, 2024-2025) bir qancha yangilik keltirdi:refendi oddiy prop (ko'p holatdaforwardRefkerak emas — 11.12),<Context>to'g'ridan provider sifatida 12.1-bob, Actions/useActionState/useOptimistic(forma va server — 13.5),use()hook (Promise/Context o'qish), hujjat metadata komponentdan (SEO — 13.8). Hozircha asosiy xulosa yetarli: zamonaviy React = funksiya komponent + JSX + props + hooks — qolganini keyingi boblarda bosqichma-bosqich ochamiz.
2.12. Shartli render (conditional rendering) — &&, ternary, early return
JSX'da SHART — bu IFODA 2.5-bob, shuning uchun uch usul bor:
1. TERNARY (a ? b : c) — ikki variantdan birini ko'rsatish:
<p>{isLogged ? "Xush kelibsiz" : "Iltimos, kiring"}</p>
{isLogged ? <Dashboard /> : <LoginForm />} // butun komponent tanlash
2. && (mantiqiy VA) — "bor bo'lsa ko'rsat, yo'q bo'lsa hech narsa":
{hasError && <p className="error">{errorText}</p>} // xato bor bo'lsagina
{items.length > 0 && <List items={items} />} // bo'sh bo'lsa hech narsa
// TUZOQ: {count && <X/>} da count=0 bo'lsa — ekranga "0" chiqadi!
// (0 — falsy, lekin React uni chizadi). To'g'ri: {count > 0 && <X/>}
3. EARLY RETURN — komponent boshida shartga qarab boshqa JSX qaytarish:
function Profile({ user }) {
if (!user) return <p>Yuklanmoqda...</p>; // erta chiqish (guard)
return <h1>{user.name}</h1>; // asosiy holat
}
if/else ni JSX ICHIDA ishlatib bo'lmaydi 2.5-bob ternary yoki && yoki early return
null qaytarish = "hech narsa chizma" (return null; — bu XATO emas, normal)Shartli render — ma'lum shartga qarab UI'ning bir qismini ko'rsatish yoki yashirish. JSX ichida
ifishlamagani uchun (2.5 —ififoda emas) uch asosiy usul qo'llaniladi. (1) Ternaryshart ? A : B— ikki variantdan birini tanlash uchun (masalan, kirgan/kirmagan foydalanuvchiga har xil ko'rinish). (2) Mantiqiy&&—shart && <Element/>— shart rost bo'lsa elementni ko'rsatadi, aks holda hech narsa (false,null,undefinedJSX'da hech narsa chizmaydi). Mashhur tuzoq:{items.length && <List/>}— agarlength0bo'lsa, ekranga aynan0raqami chiqadi, chunki0falsy, lekin React uni matn sifatida chizadi; shuning uchun har doim aniq shart yozing:{items.length > 0 && <List/>}. (3) Early return (guard) — komponent boshida shartni tekshirib, boshqa JSX (yokinull) qaytarish; bu ayniqsa "yuklanmoqda", "ma'lumot yo'q" holatlarida toza kod beradi.return null— bu xato emas, "hech narsa chizma" degani (11.4 va 11.5'da shartli renderni state bilan jonli ishlatasiz).
2.13. Spread props, prop drilling va render prop (kirish)
1. SPREAD PROPS ({...obj}) — obyektning barcha maydonini props sifatida uzatish:
const user = { name: "Ali", age: 25, role: "Dasturchi" };
<UserCard {...user} /> // = <UserCard name="Ali" age={25} role="Dasturchi" />
// qulay, lekin ehtiyot: keraksiz props ham o'tib ketishi mumkin (aniqlik yo'qoladi)
2. PROP DRILLING (props'ni chuqurga "burg'ulash") — muammo:
App Page Section Card Button (theme prop'ni 5 qavat pastga uzatish)
// har oraliq komponent kerak bo'lmasa ham theme'ni "olib o'tishi" kerak — charchatadi
// YECHIM: Context 12.1-bob — ma'lumotni to'g'ridan chuqurga "teleport" qiladi
3. RENDER PROP (kirish) — komponentga JSX QAYTARADIGAN funksiya uzatish:
<DataLoader render={(data) => <List items={data} />} />
// "nimani ko'rsatishni" chaqiruvchi hal qiladi (children ham shu g'oyaning turi — 2.8)Spread props — JavaScript spread operatori (
...) yordamida obyektning barcha maydonini props sifatida bir yo'la uzatish:<UserCard {...user} />— buname={user.name} age={user.age} ...yozishga teng. Qulay, lekin ehtiyotkorlik talab qiladi: keraksiz maydonlar ham o'tib ketishi va qaysi props aslida ishlatilishini yashirishi mumkin, shuning uchun uni ongli qo'llash kerak. Prop drilling ("props'ni burg'ulash") — bir ma'lumotni (masalan,themeyoki joriy foydalanuvchi) daraxtning chuqur qatlamiga yetkazish uchun har bir oraliq komponent orqali qo'lda uzatish muammosi; oraliq komponentlarga bu ma'lumot kerak bo'lmasa ham, ular uni "olib o'tishga" majbur — bu kodni ifloslaydi. Buning yechimi — Context 12.1-bob: ma'lumotni daraxtning istalgan chuqurligiga to'g'ridan yetkazadi (oraliq uzatishsiz). Render prop — JSX qaytaradigan funksiyani prop sifatida uzatish namunasi (render={(data) => <List .../>}): "nima ko'rsatilishini" chaqiruvchi hal qiladi; aslidachildren2.8-bob ham shu g'oyaning bir ko'rinishi. Bu namunalar hozir faqat tanishtiruv sifatida — chuqur ishlatishni keyingi boblarda ko'rasiz.
2.14. JSX xavfsizligi — avtomatik escape (XSS himoyasi)
JSX {} ichidagi qiymat AVTOMATIK "escape" qilinadi (xavfsiz matnga aylantiriladi):
const xavfli = '<img src=x onerror="alert(1)">'; // zararli foydalanuvchi kiritmasi
<p>{xavfli}</p>
// ekranga MATN sifatida chiqadi: <img src=x ...> (kod ishga TUSHMAYDI — xavfsiz!)
React {} ichidagi HAMMANI oddiy matn deb qaraydi XSS hujumidan avtomatik himoya
HTML sifatida chizish kerak bo'lsa — ataylab dangerouslySetInnerHTML (nomi "xavfli"!)
faqat ISHONCHLI, tozalangan (sanitized) HTML uchun (aks holda XSS teshigi)JSX xavfsizligi — React'ning muhim, lekin ko'pincha e'tibordan chetda qoladigan afzalligi:
{}ichidagi har qanday qiymat ekranga chiqishdan oldin avtomatik escape qilinadi (maxsus HTML belgilar —<,>,&— zararsiz matnga aylantiriladi). Buning natijasi: agar foydalanuvchi kiritgan matnga zararli HTML/JavaScript (masalan,<script>yokionerror) yashiringan bo'lsa ham, React uni kod sifatida ishga tushirmaydi, balki oddiy matn sifatida ko'rsatadi. Bu XSS (Cross-Site Scripting) hujumlaridan avtomatik himoya beradi — vanillainnerHTMLda esa buni qo'lda o'ylash kerak edi 11.1-bob. Agar biror qiymatni ataylab HTML sifatida chizish kerak bo'lsa, ReactdangerouslySetInnerHTMLdegan atributni beradi — nomi ataylab "xavfli" (dangerous): uni faqat ishonchli va tozalangan (sanitized) HTML uchun ishlatish kerak, aks holda bu to'g'ridan-to'g'ri XSS teshigi ochadi.
3. Sintaksis — tez ma'lumotnoma
KOMPONENT 2.3-bob: function Card() { return <div>...</div> } // PascalCase, JSX qaytaradi
ISHLATISH: <Card /> // teg sifatida
JSX IFODA 2.5-bob: {qiymat} {a+b} {cond ? x : y} {list.map(...)} // {} ichida JS ifoda
ATRIBUT 2.5-bob: className htmlFor onClick={fn} style={{color:"red"}}
ILDIZ/FRAGMENT: return <>...</> // bitta ildiz; Fragment ortiqcha div'siz 2.6-bob
PROPS UZATISH: <Card title="X" count={5} active /> // string="" | JS={} | boolean
PROPS QABUL: function Card({ title, count, active }) {...} // destructuring 2.7-bob
DEFAULT PROP: function Card({ size = "md" }) {...} // standart qiymat
CHILDREN 2.8-bob: <Card>ichak</Card> function Card({ children }) {...}
SPREAD 2.13-bob: <Card {...obj} /> // obyekt maydonlari props
SHARTLI 2.12-bob: {cond ? <A/> : <B/>} {cond && <A/>} if(!x) return null // render
CALLBACK 2.10-bob: <Button onClick={() => setX(1)} /> // data down, events up4. Batafsil kod namunalari
Misol 1 — Birinchi komponent va uni ishlatish (2.3)
// Komponent — JSX qaytaradigan funksiya (nom BOSH HARF bilan — majburiy)
function Salom() {
return <h1>Salom, React!</h1>; // JSX qaytaradi (komponent NIMA ko'rsatishini)
}
// Boshqa komponent uni teg sifatida ishlatadi (qayta ishlatish)
function App() {
return (
<div>
<Salom /> {/* React buni Salom() chaqiruviga aylantiradi */}
<Salom /> {/* qayta ishlatildi — yana bir marta */}
</div>
);
}
// <Salom/> uch marta yozilsa — bitta funksiya, uch marta render (DRY — bir manba)Misol 2 — JSX ifodalari {} (2.5)
function Profil() {
const ism = "Dilnoza";
const yosh = 22;
const onlayn = true;
return (
<div>
<h2>{ism}</h2> {/* o'zgaruvchi */}
<p>Yosh: {yosh}, {yosh >= 18 ? "kattalar" : "bola"}</p> {/* ifoda + ternary */}
<p>Holat: {onlayn ? " Onlayn" : " Offlayn"}</p>
<p>Keyingi yil: {yosh + 1}</p> {/* hisob */}
{/* {} ichida IFODA: o'zgaruvchi, hisob, ternary; if/for YO'Q 2.5-bob */}
</div>
);
}Misol 3 — Props uzatish va qabul qilish (2.7)
// Bola — props qabul qiladi (destructuring bilan)
function UserCard({ name, age, role }) { // props obyektini ajratib olamiz
return (
<div className="card">
<h3>{name}</h3>
<p>{age} yosh · {role}</p>
</div>
);
}
// Ota — props uzatadi (string="", boshqa tur={})
function Team() {
return (
<div>
<UserCard name="Ali" age={25} role="Dasturchi" /> {/* age — raqam {} */}
<UserCard name="Vali" age={30} role="Dizayner" /> {/* qayta ishlatish */}
<UserCard name="Hadicha" age={28} role="Menejer" />
</div>
);
}
// Bitta UserCard komponenti — uch xil ma'lumot bilan uch xil karta (props kuchi)Misol 4 — Default (standart) props va boolean prop (2.7)
function Button({ text, variant = "primary", disabled = false }) {
// default: berilmasa "primary" default: false
return (
<button className={`btn btn-${variant}`} disabled={disabled}>
{text}
</button>
);
}
function Toolbar() {
return (
<>
<Button text="Saqlash" /> {/* variant="primary" (default) */}
<Button text="O'chirish" variant="danger" /> {/* variant qayta belgilandi */}
<Button text="Yuborilmoqda" disabled /> {/* disabled={true} (qisqa boolean) */}
</>
);
}
// disabled (qiymatsiz) = disabled={true} (boolean prop qisqartmasi)Misol 5 — children bilan o'rovchi komponent (2.8)
// Card — umumiy "qobiq" beradi; ichiga NIMA solishni chaqiruvchi hal qiladi
function Card({ title, children }) {
return (
<div className="card">
<div className="card-header">{title}</div>
<div className="card-body">{children}</div> {/* ichidagi JSX shu yerga */}
</div>
);
}
function Dashboard() {
return (
<Card title="Statistika">
<p>Bugungi savdo: 1 200 000 so'm</p> {/* bu hammasi — Card'ning children'i */}
<ul>
<li>Buyurtmalar: 42</li>
<li>Yangi mijozlar: 7</li>
</ul>
</Card>
);
}
// Bitta Card — istalgan kontent bilan (moslashuvchan o'ram — kompozitsiya)Misol 6 — Fragment bilan ortiqcha div'dan qochish (2.6)
// Ortiqcha div — jadval tuzilishini buzadi (<tr> ichida faqat <td> bo'lishi kerak)
function RowBad() {
return (
<div> {/* <tr> ichida <div> — noto'g'ri HTML! */}
<td>Ism</td>
<td>Yosh</td>
</div>
);
}
// Fragment — guruhlaydi, DOM'ga teg qo'shmaydi
function RowGood() {
return (
<> {/* ko'rinmas o'ram — toza <tr><td><td> */}
<td>Ism</td>
<td>Yosh</td>
</>
);
}Misol 7 — Kompozitsiya: kichiklardan kattasi (2.9)
function Avatar({ src, alt }) {
return <img className="avatar" src={src} alt={alt} />;
}
function UserInfo({ user }) { // obyekt prop sifatida
return (
<div className="user-info">
<Avatar src={user.avatar} alt={user.name} /> {/* komponent ichida komponent */}
<span>{user.name}</span>
</div>
);
}
function Comment({ user, text }) {
return (
<div className="comment">
<UserInfo user={user} /> {/* kompozitsiya — qatma-qat qurish */}
<p>{text}</p>
</div>
);
}
// Avatar UserInfo Comment: kichik, mas'uliyati aniq bo'laklar (SRP — 9.1)Misol 8 — Callback prop: bola otaga xabar beradi (2.10)
// Bola — o'zi ma'lumotni o'zgartirmaydi, faqat "bosildi" deb xabar beradi
function DeleteButton({ onDelete }) { // funksiya prop sifatida keladi
return <button onClick={onDelete}> O'chirish</button>; // chaqiradi, xolos
}
// Ota — ma'lumotni o'zgartiruvchi funksiyani uzatadi (events up)
function ProductRow({ product, onRemove }) {
return (
<div className="row">
<span>{product.name}</span>
{/* otadan kelgan onRemove'ni id bilan chaqiramiz */}
<DeleteButton onDelete={() => onRemove(product.id)} />
</div>
);
}
// Ma'lumot pastga (product props), hodisa yuqoriga (onRemove callback) — "data down, events up"Misol 9 — Ro'yxatni render qilish va key (kirish — 11.4 da chuqur)
function ProductList({ products }) {
return (
<ul>
{products.map((p) => ( // massivni JSX elementlariga aylantiramiz
<li key={p.id}> // key — har element UNIKAL "shaxsiy raqami"
{p.name} — {p.price} so'm
</li>
))}
</ul>
);
}
// Ishlatish:
// <ProductList products={[{id:1,name:"Olma",price:5000}, {id:2,name:"Non",price:3000}]} />
// key React'ga qaysi element o'zgargan/qo'shilgan/o'chirilganini biladi (reconciliation — 2.2)
// key SHART (yo'q bo'lsa — ogohlantirish + xato render); index emas, UNIKAL id ishlat (11.4)Misol 10 — Hammasini birlashtirish: kichik mini-ilova
// Mustaqil, qayta ishlatiladigan komponentlar + props + children + kompozitsiya
function Badge({ children, color = "gray" }) { // kichik UI bo'lak
return <span className={`badge badge-${color}`}>{children}</span>;
}
function TaskCard({ title, status }) {
const colors = { todo: "gray", doing: "blue", done: "green" }; // status rang
return (
<div className="task-card">
<h4>{title}</h4>
<Badge color={colors[status]}>{status}</Badge> {/* komponent ichida komponent */}
</div>
);
}
function Board({ tasks }) { // butun taxta
return (
<div className="board">
<h2>Vazifalar ({tasks.length})</h2> {/* JSX ifoda */}
{tasks.map((t) => (
<TaskCard key={t.id} title={t.title} status={t.status} /> // qayta ishlatish
))}
</div>
);
}
// Diqqat: hech qayerda "DOM", "render()", "append" YO'Q — faqat NIMA ko'rinishini
// tasvirladik (deklarativ). Ma'lumot (tasks) o'zgarsa — UI o'zi yangilanadi (keyingi: 11.5 state)Misol 11 — Shartli render: ternary, &&, early return (2.12)
function Notification({ user, unreadCount, error }) {
// 1. EARLY RETURN — ma'lumot yo'q bo'lsa, darrov boshqa JSX qaytaramiz (guard)
if (!user) return <p>Yuklanmoqda...</p>;
return (
<div className="notif">
{/* 2. TERNARY — ikki variantdan biri */}
<span>{user.online ? " Onlayn" : " Offlayn"}</span>
{/* 3. && — shart rost bo'lsagina ko'rsatiladi */}
{unreadCount > 0 && <span className="badge">{unreadCount}</span>}
{/* unreadCount > 0 (aniq shart) — {unreadCount && ...} bo'lsa 0 chiqib qolardi */}
{error && <p className="error">{error}</p>}
</div>
);
}
// if/else JSX ichida ishlamaydi 2.5-bob early return, ternary yoki && ishlatiladiMisol 12 — Spread props va default qiymat (2.13)
function Profile({ name, age, role }) {
return <p>{name}, {age} yosh — {role}</p>;
}
function App() {
const user = { name: "Ali", age: 25, role: "Dasturchi" };
return (
<>
{/* Spread — obyektning barcha maydonini props sifatida bir yo'la uzatish */}
<Profile {...user} />
{/* = <Profile name="Ali" age={25} role="Dasturchi" /> bilan bir xil */}
{/* Spread + ustiga yozish (keyingi qiymat oldingisini almashtiradi) */}
<Profile {...user} role="Mentor" /> {/* role="Mentor" bo'ladi */}
</>
);
}
// Spread qulay, lekin keraksiz props ham o'tishi mumkin — ongli ishlating (2.13)5. To'g'ri va noto'g'ri holatlar
1) Komponent nomi
function userCard() {...} + <userCard/> (kichik harf — React HTML teg deb o'ylaydi)
function UserCard() {...} + <UserCard/> (PascalCase — 2.3)2) JSX atributi
<div class="box" onclick={fn}> (HTML nomlari — ishlamaydi)
<div className="box" onClick={fn}> (camelCase, JS nomlari — 2.5)3) Bir nechta element qaytarish
return <h1/><p/> (ikki ildiz — sintaksis xatosi)
return <><h1/><p/></> (Fragment — 2.6)4) Props'ni o'zgartirish
function C({user}) { user.name = "X"; ... } (props read-only — taqiqlanadi)
props faqat o'qiladi; o'zgartirish kerak bo'lsa — state 11.5-bob yoki callback (2.9, 2.10)5) {} ichida if/for
<div>{if (x) {...}}</div> (if — ifoda emas, ishlamaydi)
<div>{x ? <A/> : <B/>}</div> yoki {x && <A/>} (ternary/&& — ifoda — 11.4)6) Ro'yxatda key
{items.map(i => <li>{i.name}</li>)} (key yo'q — ogohlantirish, xato render)
{items.map(i => <li key={i.id}>{i.name}</li>)} (unikal key — 2.2, 11.4)6. Keng tarqalgan xatolar va yechimlari
Xato 1 — Warning: Each child in a list should have a unique "key" prop
Sababi: .map() bilan ro'yxat render qildik, lekin key bermadik. Yechimi: har elementga unikal key berish (key={item.id}) — index emas, barqaror unikal id (Misol 9, 11.4).
Xato 2 — Objects are not valid as a React child
Sababi: JSX'da {} ichiga obyekt qo'yganmiz ({user}), React obyektni chiza olmaydi. Yechimi: obyektning maydonini chiqarish ({user.name}), yoki ro'yxat bo'lsa .map() (massivni JSX'ga aylantirish).
Xato 3 — 'X' is not defined yoki komponent ko'rinmaydi
Sababi: komponent nomi kichik harf bilan (<card/> — HTML teg deb qabul qilinadi), yoki import qilinmagan (11.3 — modullar). Yechimi: PascalCase nom + to'g'ri import 2.3-bob.
Xato 4 — Adjacent JSX elements must be wrapped in an enclosing tag
Sababi: komponent ikkita yondosh elementni o'ramsiz qaytaryapti. Yechimi: Fragment <>...</> yoki <div> bilan o'rash (2.5, 2.6).
Xato 5 — Hodisa darrov ishlab ketadi (render paytida)
Sababi: onClick={handleClick()} — funksiyani chaqirib qo'ydik (natijasi prop'ga tushadi), uzatmadik. Yechimi: onClick={handleClick} (havola) yoki onClick={() => handleClick(id)} (argument kerak bo'lsa — strelka funksiya).
Xato 6 — className o'rniga class ogohlantirishi
Sababi: JSX'da class ishlatildi. Yechimi: className (2.5 — class JS kalit so'zi).
Xato 7 — Ekranga kutilmagan 0 chiqib qoldi
Sababi: {count && <Badge/>} yozildi; count 0 bo'lganda 0 — falsy, lekin React uni matn sifatida chizadi. Yechimi: aniq shart yozing — {count > 0 && <Badge/>} 2.12-bob.
7. Integratsiya — bu mavzu stack'ning qayerida uchraydi
- DOM 11.1-bob: JSX Virtual DOM React real DOM'ni yangilaydi (11.1 og'rig'ini hal qiladi).
- JS asoslari (2-QISM): destructuring 2.8-bob, arrow fn 2.3-bob, map 2.7-bob, modullar 2.14-bob — JSX'da hammasini ishlatamiz.
- State 11.5-bob: props o'zgarmas; o'zgaruvchi ma'lumot — state.
- Lifting state up 11.4-bob: callback 2.10-bob bilan bola otaga xabar beradi.
- Komponent dizayni (9.1 SRP): har komponent bitta ish; kompozitsiya > meros.
- Context 12.1-bob: prop drilling 2.13-bob muammosini hal qiladi — ma'lumotni chuqurga to'g'ridan yetkazish.
- Xavfsizlik (13.x): JSX avtomatik escape 2.14-bob XSS'dan himoya qiladi;
dangerouslySetInnerHTML— ehtiyot. - TypeScript 11.14-bob: props turlarini
interfacebilan belgilash. - Performance 11.11-bob: keraksiz render;
memo— props o'zgarmasa render qilmaslik.
8. Eng yaxshi amaliyotlar (best practices)
- Kichik, fokuslangan komponentlar (har biri bitta ish — SRP — 9.1; oson sinaladi/qayta ishlatiladi).
- PascalCase nom + bir fayl bir asosiy komponent (2.3, 11.3).
- Props destructuring + default qiymat (o'qish oson — Misol 4).
- Props read-only (hech qachon o'zgartirmaslik; o'zgarish — state/callback — 2.9).
childrenbilan o'rovchilar (Card/Modal/Layout — moslashuvchan kompozitsiya — 2.8).- Fragment (ortiqcha div'dan qochish — toza DOM — 2.6).
- Ro'yxatda unikal
key(index emas — barqaror id — 11.4). - "Data down, events up" (ma'lumot props bilan pastga, hodisa callback bilan yuqoriga — 2.10).
- Mantiqni JSX'dan tashqari hisoblash (return'dan oldin o'zgaruvchiga olish — toza JSX).
- Shartli renderda aniq shart (
{count > 0 && ...}—{count && ...}da 0 chiqib qoladi — 2.12). - Foydalanuvchi kiritmasiga ishonmaslik (JSX escape himoya beradi;
dangerouslySetInnerHTMLfaqat tozalangan HTML uchun — 2.14). - StrictMode'ni yoqish (dev'da xatolarni erta topish — 2.11).
9. Amaliy loyiha: "Komponentli Profil Kartalari (statik)"
Bu loyiha — faqat komponent + JSX + props (hali state yo'q — u 11.5'da). Maqsad — UI'ni qayta ishlatiladigan bo'laklarga bo'lish va props bilan sozlashni mukammal o'zlashtirish.
Maqsad
Jamoaning a'zolari ro'yxatini ko'rsatadigan sahifa yarating — har a'zo uchun bir xil komponent, har xil props.
Talablar (requirements)
Avatarkomponenti: rasm (yoki bosh harf),sizeprop (sm/md/lg — default md).Badgekomponenti:childrenvacolorprop (rol/status uchun rangli yorliq).MemberCardkomponenti: props — ism, lavozim, avatar, ko'nikmalar (massiv), onlayn holati.- Kompozitsiya:
MemberCardichidaAvatarvaBadgeishlatilsin 2.9-bob. - Ko'nikmalar: massivni
.map()bilanBadgelarga chiqaring (unikalkeybilan — Misol 9). - Shartli ko'rinish: onlayn bo'lsa , bo'lmasa (ternary — Misol 2).
children:Cardo'rovchi komponent yarating,MemberCardni unga soling 2.8-bob.- Default props: kamida 2 ta komponentda standart qiymat (Misol 4).
- Ro'yxat: kamida 4 a'zoni bitta
Teamkomponentidan.map()bilan chiqaring. - Toza JSX: murakkab mantiq (masalan rang tanlash)ni
return'dan oldin hisoblang.
Maslahatlar (hint)
- Avval ma'lumotni loyihalashtiring (a'zolar massivi:
{id, name, role, skills, online}), keyin UI. - Har komponent bitta ish qilsin; takrorlanish sezilsa — demak yangi komponent kerak (DRY).
- Props turini xayolan belgilab oling (keyin 11.14'da TypeScript bilan rasmiylashtirasiz).
key— har doim unikal id (massiv index emas — 11.4'da nega ekanini bilib olasiz).- Hali
useStateishlatmang — bu bob faqat statik UI (ma'lumot props orqali keladi, o'zgarmaydi).
"Tayyor" mezonlari (acceptance criteria)
-
Avatar,Badge,MemberCard,Card,Team— alohida komponentlar. - Barcha ma'lumot props orqali uzatiladi (hardcode emas).
- Kompozitsiya:
MemberCardichidaAvatar+Badge. - Ko'nikmalar
.map()+ unikalkeybilan. - Onlayn holati ternary bilan ko'rsatiladi.
- Kamida 2 komponentda default props.
-
childrenbilan o'rovchiCard. - Komponent nomlari PascalCase, JSX toza (ortiqcha div yo'q — Fragment).
Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.
10. Xulosa va keyingi bobga ko'prik
Bu bobda React bilan chinakam tanishdik:
- React nima (UI kutubxonasi,
UI = f(state)) va Virtual DOM (diffing — eng kam DOM o'zgarishi — 2.1); render ning ichki ma'nosi (funksiyani qayta chaqirish, reconciliation — 2.2). - Komponent (PascalCase funksiya, JSX qaytaradi — 2.3); JSX (aslida JavaScript,
createElementga aylanadi — 2.4); qoidalar (ifoda{},className, bitta ildiz — 2.5), Fragment 2.6-bob. - Props (pastga oqim, read-only — 2.7),
children(o'rovchilar — 2.8), kompozitsiya 2.9-bob, bir tomonlama oqim ("data down, events up" — 2.10); StrictMode va React 19 2.11-bob. - Shartli render (ternary,
&&, early return — 2.12), spread props / prop drilling / render prop 2.13-bob, JSX xavfsizligi (avtomatik escape, XSS himoyasi — 2.14).
Endi siz UI'ni mustaqil bo'laklarga bo'lib, props bilan sozlab, kompozitsiya orqali murakkab interfeyslar qura olasiz — lekin hali UI statik (ma'lumot props orqali keladi va o'zgarmaydi). Foydalanuvchi tugmani bossa, matn yozsa — hozircha hech narsa o'zgarmaydi. Chunki bitta hal qiluvchi qism yetishmaydi: state — komponentning "xotirasi".
Keyingi bob — 11.3-bob: React loyiha tuzilishi va Vite. React'ni real loyiha sifatida ishga tushiramiz: Vite (zamonaviy, ultra-tez build vositasi) bilan loyiha yaratish, papka tuzilishi, komponentlarni fayllarga ajratish (import/export — 2.14), index.html main.jsx App.jsx zanjiri, va birinchi komponentlarni brauzerda jonli ko'rish. So'ngra 11.4'da state bilan UI'ni "jonlantiramiz".
Foydalanilgan rasmiy/ishonchli manbalar
- React rasmiy hujjati (react.dev) — "Your First Component", "Passing Props to a Component", "Writing Markup with JSX", "JavaScript in JSX with Curly Braces", "Conditional Rendering", "Rendering Lists", "Keeping Components Pure"
- react.dev — "Preserving and Resetting State", "Render and Commit", "Passing Data Deeply with Context" (prop drilling),
<StrictMode>,<Fragment> - react.dev — "React Developer Tools", "Describing the UI" bo'limi (JSX, komponent, props, kompozitsiya)
- React 19 release notes (react.dev/blog) — ref as prop,
<Context>provider, Actions,useActionState,useOptimistic,use - JSX xavfsizligi va
dangerouslySetInnerHTML— react.dev "Common components (e.g.<div>)" hujjati - MDN — JavaScript modullar (
import/export), destructuring, spread sintaksisi,Array.prototype.map(JSX'da ishlatiladigan asoslar)
Izohlar (0)
Izoh yozish uchun kiring.
- Hozircha izoh yo'q. Birinchi bo'ling!