Why JSX Exists — And Why It's Better Than Plain JavaScript

لما المطورين يشوفون JSX أول مرة، ردة الفعل غالباً تكون: "ليش فيه HTML جوة الـ JavaScript متاعي؟ هذا غلط."

مو غلط. هذا فعلياً وحد من أذكى القرارات بتطوير الـ frontend الحديث. خليني أوريك ليش.

---

شنو هو JSX فعلياً

JSX مو HTML. مو لغة قوالب (template language). هو syntactic sugar لاستدعاء functions.

لما تكتب هذا:

const element = <h1 className="title">Hello, Hussein</h1>

Babel يحوّله لهذا:

const element = React.createElement(
  "h1",
  { className: "title" },
  "Hello, Hussein"
)

خلص. JSX بس طريقة أحلى تكتب فيها React.createElement(). ما كو شي زيادة.

---

العالم بدون JSX

قبل ما JSX يصير موجود، مطوري React كانوا يكتبون الواجهات بالكامل بـ JavaScript. هنا مثال بسيط لـ card component بدون JSX:

function ProjectCard(props) {
  return React.createElement(
    "div",
    { className: "card" },
    React.createElement(
      "h2",
      { className: "card-title" },
      props.title
    ),
    React.createElement(
      "p",
      { className: "card-description" },
      props.description
    ),
    React.createElement(
      "a",
      { href: props.url, className: "card-link" },
      "View Project"
    )
  )
}

هسه نفس الـ component بـ JSX:

function ProjectCard({ title, description, url }) {
  return (
    <div className="card">
      <h2 className="card-title">{title}</h2>
      <p className="card-description">{description}</p>
      <a href={url} className="card-link">View Project</a>
    </div>
  )
}

نسخة JSX تكون:

• أقصر
• أسهل بالقراءة
• تبين الهرمية بصرياً
• أسهل بالصيانة

استدعاءات createElement المتداخلة تصير مستحيلة القراءة بمقياس كبير. JSX يحل مشكلة حقيقية.

---

ليش خلط HTML و JS شي زين فعلياً

الفصل الكلاسيكي بين الاهتمامات (separation of concerns) كان يكول: HTML للهيكل، CSS للتنسيق، JavaScript للسلوك — بملفات منفصلة.

React تحدى هذا بفكرة مختلفة: افصل حسب الـ component، مو حسب التقنية.

هيكل الزر، تنسيقه، وسلوكه كلهن مرتبطين. يتغيرون مع بعض. ليش تفرقهم على ثلاث ملفات؟

// كل شي يخص هذا الزر موجود بهالملف
function SubmitButton({ onClick, loading }) {
  return (
    <button
      onClick={onClick}
      disabled={loading}
      className={loading ? "btn btn-disabled" : "btn btn-primary"}
    >
      {loading ? "Sending..." : "Submit"}
    </button>
  )
}

الـ HTML، المنطق الشرطي، ومعالج الحدث كلهن بمكان وحد. لما تغيّر الزر، تغيّر ملف وحد. هذا فصل أحسن للاهتمامات — بس منظم بطريقة مختلفة.

---

JSX أقوى من HTML

JSX يبين متل HTML بس هو أقدر بكثير.

محتوى ديناميكي:

<h1>Hello, {user.name}</h1>
<p>You have {notifications.length} notifications</p>

عرض شرطي:

{isLoggedIn ? <Dashboard /> : <LoginForm />}
{error && <ErrorMessage message={error} />}

عرض قوائم:

{projects.map(project => (
  <ProjectCard key={project.id} {...project} />
))}

قابلية التركيب:

<Layout>
  <Navbar />
  <Hero title="Hussein Ahmed" />
  <Projects data={projects} />
  <Footer />
</Layout>

ولا وحد من هذا ممكن بـ HTML العادي. مع JSX، واجهتك تصير دالة (function) لبياناتك — تغيّر البيانات، الواجهة تتحدث تلقائياً.

---

أخطاء شائعة بـ JSX

className مو class — لأن class كلمة محجوزة بـ JavaScript:

// غلط
<div class="container">

// صح
<div className="container">

الوسوم اللي تغلق نفسها (self-closing tags) مطلوبة:

// غلط
<img src="/photo.jpg">
<input type="text">

// صح
<img src="/photo.jpg" />
<input type="text" />

عنصر جذر وحد — JSX لازم يرجّع عنصر وحد بس. استخدم fragments:

// غلط
return (
  <h1>Title</h1>
  <p>Paragraph</p>
)

// صح
return (
  <>
    <h1>Title</h1>
    <p>Paragraph</p>
  </>
)

تعبيرات JavaScript بـ {} — مو statements:

// غلط — if هي statement
<div>{if (x) { return "yes" }}</div>

// صح — ternary هي expression
<div>{x ? "yes" : "no"}</div>

---

JSX بـ TypeScript

لما تضيف TypeScript، JSX يصير أقوى أكثر. الـ props متاعك تصير typed — الـ compiler يمسك الأخطاء قبل ما توصل للمتصفح:

interface CardProps {
  title: string
  description: string
  url?: string  // optional
}

function Card({ title, description, url }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{description}</p>
      {url && <a href={url}>View →</a>}
    </div>
  )
}

// TypeScript error — title مطلوب
<Card description="Missing title" />

// TypeScript error — title لازم يكون string
<Card title={42} description="Wrong type" />

هذا سبب استخدامي لملفات .tsx بهالبورتفوليو. أمان الأنواع (type safety) يرجع فايدته خلال أول أسبوع.

---

الخلاصة

JSX موجود لأن بناء الواجهات باستدعاءات createElement() الخام شي متعب. هو تجريد رقيق (thin abstraction) يختفي بالكامل وقت الترجمة (compile) — بدون أي تكلفة وقت التشغيل (runtime cost).

لما تفهم إن JSX هو بس استدعاءات functions بـ JavaScript بصياغة أحلى، كثير من سلوك React يصير مفهوم. نموذج الـ component، التركيب، العرض الشرطي — كلها تتبع من هالفكرة الوحدة.

اكتب JSX. نفسك بالمستقبل راح يشكرك.