HTML Architecture

12-dars

HTML Architecture

Framework (Astro, React) ichida ham toza, semantik, barqaror HTML arxitektura qurish. Framework HTML'ni yashirmaydi, aksincha ochib beradi.

1️⃣ Component-first HTML — framework emas, HTMLdan boshlash

❌ Oson fikrlash:

"Avval React component yozaman, ichiga div tashlayman"

✅ Kengroq fikrlash:

"Avval HTML qanday bo'lishi kerakligini aniqlayman, keyin uni componentga o'rayman"

Asosiy qoida

Component = semantik HTML blok

<article class="post">
  <header>
    <h2>Title</h2>
    <time datetime="2026-01-20">20 Jan</time>
  </header>

  <p>Content...</p>

  <footer>
    <a href="/post">Read more</a>
  </footer>
</article>

Shundan keyin:

• Astro component
• React component
• Vue component

👉 HTML o'zgarmaydi

Savol:

"Agar JS o'chsa ham bu HTML to'g'rimi?"

Agar javob ha bo'lsa — sen to'g'ri yo'ldasan.

2️⃣ Astro / React'da markup sifati

Astro — HTML-first framework

Astro'da sen aslida HTML arxitektorisan, JS — qo'shimcha.

<article>
  <h2>{title}</h2>
  <slot />
</article>

👉 Bu joyda:

• <article> — arxitektura
• <slot /> — kontent joyi
• JS — faqat data

React'da eng katta xato

// ❌ Xato
<div className="card">
  <div className="title">{title}</div>
</div>

React yozuvi:

// ✅ To'g'ri
<article className="card">
  <h2>{title}</h2>
</article>

📌 React HTML o'rnini bosmaydi, uni ifodalaydi.

🔥 Xulosa

Framework'lar ichida HTML arxitektura semantik HTML bilan boshlanadi, framework component'lari bilan emas. Component-first fikrlash: avval HTML strukturasini aniqlang, keyin uni framework component'iga o'rang. HTML JavaScript o'chirilgan bo'lsa ham to'g'ri bo'lishi kerak.

Astro va React kabi framework'lar HTML'ni yashirmaydi—uni ochib beradi. Umumiy <div> elementlar o'rniga semantik HTML elementlaridan (<article>, <header>, <footer>, <h2>) foydalaning. Bu JavaScript ishlamasa ham ishlaydigan barqaror, accessible va maintainable arxitektura yaratadi.