Chapter 3 — JSX Sintaksisi

Loyiha tayyor — endi komponent ichida UI'ni tasvirlash uchun ishlatiladigan sintaksis: JSX.

---

3.1 JSX nima?

Simple Explanation

JSX — HTML'ga o'xshash, lekin JavaScript ichida yoziladigan sintaksis kengaytmasi.

Example

App.jsx
React JSXNusxalash
01const name = "Abbos";
02return <h1>Hello, {name}</h1>;

How It Works

code.text
TEXTNusxalash
01JSX → Babel/SWC Compiler → React.createElement() → React Element (obyekt)

<h1>Salom</h1> aslida React.createElement('h1', null, 'Salom') ga aylanadi.

3.2 Expression va Shartli Render

Example

App.jsx
React JSXNusxalash
01return <p>2 + 2 = {2 + 2}</p>;
02return <p>{isOnline ? "Online" : "Offline"}</p>;

3.3 Fragment va Ro'yxatlar

Example

App.jsx
React JSXNusxalash
01return (
02  <>
03    <h1>Sarlavha</h1>
04    <p>Matn</p>
05  </>
06);
07 
08return <ul>{names.map((n) => <li key={n}>{n}</li>)}</ul>;

⚠️ Common Mistake
Bitta komponentdan bir nechta root element qaytarishga urinish — Fragment (<>...</>) yoki wrapper element kerak.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: age o'zgaruvchisini JSX ichida ko'rsating.

🟡 Exercise 2 — Medium

Task: isLoggedIn boolean asosida "Xush kelibsiz" yoki "Kirish" matnini shartli render qiling.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function App() {
02  return (
03    <h1>Sarlavha</h1>
04    <p>Matn</p>
05  );
06}

Your Task: Bu kod nega xato beradi?

<details> <summary>Solution</summary> Bitta komponent faqat bitta root element qaytarishi mumkin. Ikkita elementni Fragment yoki `<div>` bilan o'rab olish kerak: ```jsx function App() { return ( <> <h1>Sarlavha</h1> <p>Matn</p> </> ); } ``` </details>

📌 Chapter Summary

JSX — compile bo'ladigan JavaScript, HTML emas. Har bir komponent faqat bitta root element qaytaradi. JSX ichida faqat expression ishlatiladi, statement emas.

🎯 Key Takeaways

• JSX → Babel/SWC → React.createElement() → React Element
• Bitta root element qoidasi
• { } ichida faqat JavaScript expression

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01{variable}                  // o'zgaruvchi
02{condition ? A : B}         // ternary
03{condition && <X />}        // shartli render
04<>...</>                    // Fragment
05{arr.map(x => <li key={x.id}>{x.name}</li>)}

---