1// Siz yozgan JSX
2const element = <h1 className="sarlavha">Salom</h1>;
3
4// Brauzer ko'radigan JS
5const element = React.createElement(
6  "h1",
7  { className: "sarlavha" },
8  "Salom"
9);
10
11// Ikkalasi ham bir xil natija beradi

1// ❌ XATO — ikki element
2function Salom() {
3  return (
4    <h1>Salom</h1>
5    <p>Xush kelibsiz</p>
6  );
7}
8
9// ✅ TO'G'RI — div ichida
10function Salom() {
11  return (
12    <div>
13      <h1>Salom</h1>
14      <p>Xush kelibsiz</p>
15    </div>
16  );
17}
18
19// ✅ YOKI Fragment <> </>
20function Salom() {
21  return (
22    <>
23      <h1>Salom</h1>
24      <p>Xush kelibsiz</p>
25    </>
26  );
27}

1// HTML'da
2<div class="karta"></div>
3<label for="email"></label>
4
5// JSX'da (class JS kalit so'z!)
6<div className="karta"></div>
7<label htmlFor="email"></label>

1// HTML'da bo'lishi mumkin
2<img src="rasm.jpg">
3<br>
4<input type="text">
5
6// JSX'da — majburiy self-close
7<img src="rasm.jpg" />
8<br />
9<input type="text" />

1// HTML: kichik harf
2<div onclick="..." tabindex="0" autofocus>
3
4// JSX: camelCase
5<div onClick={...} tabIndex={0} autoFocus />

1function Salom() {
2  const ism = "Ali";
3  const yosh = 17;
4  const rasm = "/avatar.jpg";
5
6  return (
7    <div>
8      <h1>Salom, {ism}!</h1>
9      <p>Yosh: {yosh}</p>
10      <p>Keyingi yili: {yosh + 1}</p>
11      <img src={rasm} alt={ism} />
12
13      {/* Ifoda — ha. Deklaratsiya — yo'q */}
14      <p>{yosh >= 18 ? "Voyaga yetgan" : "Bola"}</p>
15      <p>{ism.toUpperCase()}</p>
16
17      {/* Komment — shunday yoziladi */}
18    </div>
19  );
20}

1// Komponent — props qabul qiladi
2function Salom(props) {
3  return <h1>Salom, {props.ism}!</h1>;
4}
5
6// Ota komponent — props beradi
7function App() {
8  return (
9    <div>
10      <Salom ism="Ali" />
11      <Salom ism="Vali" />
12      <Salom ism="Hasan" />
13    </div>
14  );
15}

1// Oddiy
2function ProfilKarta(props) {
3  return (
4    <div>
5      <h2>{props.ism}</h2>
6      <p>{props.yosh} yosh</p>
7      <p>{props.kasb}</p>
8    </div>
9  );
10}
11
12// Destructuring bilan (tavsiya)
13function ProfilKarta({ ism, yosh, kasb }) {
14  return (
15    <div>
16      <h2>{ism}</h2>
17      <p>{yosh} yosh</p>
18      <p>{kasb}</p>
19    </div>
20  );
21}
22
23// Ishlatish
24<ProfilKarta ism="Ali" yosh={17} kasb="Dasturchi" />

1function Tugma({ matn, rang, kattalik, faol }) {
2  return (
3    <button
4      style={{ background: rang, padding: kattalik }}
5      disabled={!faol}
6    >
7      {matn}
8    </button>
9  );
10}
11
12// String — qo'shtirnoq
13// Son/bool/obyekt — figurali qavs
14<Tugma
15  matn="Bosing"
16  rang="#fbbf24"
17  kattalik="12px 20px"
18  faol={true}
19/>

1function Royxat() {
2  const mevalar = ["Olma", "Anor", "Banan", "Uzum"];
3
4  return (
5    <ul>
6      {mevalar.map((meva, index) => (
7        <li key={index}>{meva}</li>
8      ))}
9    </ul>
10  );
11}

1function UserRoyxati() {
2  const userlar = [
3    { id: 1, ism: "Ali", yosh: 17, kasb: "Dasturchi" },
4    { id: 2, ism: "Vali", yosh: 22, kasb: "Dizayner" },
5    { id: 3, ism: "Hasan", yosh: 30, kasb: "Rassom" },
6  ];
7
8  return (
9    <div className="ruyxat">
10      {userlar.map(user => (
11        <ProfilKarta
12          key={user.id}
13          ism={user.ism}
14          yosh={user.yosh}
15          kasb={user.kasb}
16        />
17      ))}
18    </div>
19  );
20}

1// ❌ YOMON — index ishlatish
2{items.map((item, i) => <li key={i}>{item}</li>)}
3
4// ✅ YAXSHI — unique id
5{items.map(item => <li key={item.id}>{item.nom}</li>)}
6
7// Nega? Ro'yxat o'zgarganda (o'chirish, qo'shish, tartib)
8// index qayta hisoblab chiqiladi — React chalkashadi.
9// id esa element bilan birga qoladi.