JSX (JavaScript XML)

🔹 التعريف:
JSX هي صيغة (Syntax) خاصّة تُستخدم في React.js لكتابة واجهات المستخدم بطريقة تشبه HTML داخل كود JavaScript.
بكلمات بسيطة: JSX يسمح لك بكتابة كود يشبه HTML داخل JavaScript — لكن في الحقيقة هو تحويل إلى دوال JavaScript عند التنفيذ.

🧠 لماذا تم ابتكار JSX؟

قبل JSX، كان مطوّرو React يكتبون العناصر بهذا الشكل:

const element = React.createElement('h1', null, 'Hello, World!');<br>

const element = React.createElement('h1', null, 'Hello, World!');<br>

بينما مع JSX أصبح أسهل وأوضح:

const element = <h1>Hello, World!</h1>;

const element = <h1>Hello, World!</h1>;

🔸 أي أن JSX يجعل الكود أكثر بساطة وقابلية للفهم وتشبه كتابة HTML داخل مكوّنات React.

⚙️ كيف يعمل JSX؟

عند تنفيذ الكود، محوّل React (باستخدام Babel عادةً) يقوم بتحويل JSX إلى كود JavaScript عادي:

const element = <h1 className=\"title\">مرحبًا</h1>;

const element = <h1 className=\"title\">مرحبًا</h1>;

⬇️ يتحول إلى:

const element = React.createElement('h1', { className: 'title' }, 'مرحبًا');

const element = React.createElement('h1', { className: 'title' }, 'مرحبًا');

🧩 قواعد مهمة في JSX:

1. يجب أن يُرجع المكوّن عنصرًا واحدًا فقط

إذا أردت إرجاع أكثر من عنصر، لفّها داخل div أو Fragment:

return (
  <>
    <h1>العنوان</h1>
    <p>هذا وصف بسيط</p>
  </>
);

return (
  <>
    <h1>العنوان</h1>
    <p>هذا وصف بسيط</p>
  </>
);

2. استخدم className بدلًا من class

لأن class كلمة محجوزة في JavaScript:

<h1 className=\"title\">نص</h1>

<h1 className=\"title\">نص</h1>

3. استخدم الأقواس {} لإدراج JavaScript داخل JSX

يمكنك كتابة تعبيرات JavaScript مباشرة داخل JSX:

const name = 'ليلى';
return <h1>مرحبًا، {name}!</h1>;

const name = 'ليلى';
return <h1>مرحبًا، {name}!</h1>;

الأقواس {} تعني “اكتب هنا كود JavaScript”.

4. يجب إغلاق كل الوسوم

حتى الوسوم المفردة مثل <img> أو <input> يجب أن تُغلق:

<img src=\"logo.png\" alt=\"الشعار\" />

<img src=\"logo.png\" alt=\"الشعار\" />

5. يمكن كتابة التعبيرات المنطقية داخل JSX

مثل الشروط أو العرض الشرطي:

{isLoggedIn ? <h2>أهلًا بك!</h2> : <h2>من فضلك سجّل الدخول</h2>}

{isLoggedIn ? <h2>أهلًا بك!</h2> : <h2>من فضلك سجّل الدخول</h2>}

6. يمكن كتابة الأساليب (functions) داخل JSX

function greet() {
  return 'صباح الخير!';
}
return <p>{greet()}</p>;

function greet() {
  return 'صباح الخير!';
}
return <p>{greet()}</p>;

7. الأنماط (Styles)

يمكنك تمرير كائن JavaScript لخاصية style:

const styleObj = { color: 'red', fontSize: '20px' };
return <h1 style={styleObj}>نص ملوّن</h1>;

const styleObj = { color: 'red', fontSize: '20px' };
return <h1 style={styleObj}>نص ملوّن</h1>;

💡 لماذا نستخدم JSX؟

1. يسهل كتابة وتصور واجهات المستخدم.
2. يجعل الكود أوضح وأقرب إلى HTML.
3. يقلل الأخطاء مقارنة بإنشاء العناصر يدويًا بـ React.createElement.
4. يساعد على دمج منطق الواجهة (Logic) مع العرض (UI) في مكان واحد (المكوّن).

⚠️ نقطة مهمة: JSX ليس HTML

رغم أنه يشبه HTML، إلا أن JSX أكثر مرونة:

• يمكنك إدراج أي تعبير JavaScript داخل {}.
• يجب أن تلتزم بالقواعد الخاصة بـ React (مثل className، htmlFor).
• JSX يُحوَّل في النهاية إلى JavaScript بحت.

🧩 مثال تطبيقي بسيط:

function HelloUser() {
  const user = { name: 'محمد', age: 22 };
  return (
    <div>
      <h1>مرحبًا {user.name}!</h1>
      <p>عمرك {user.age} سنة</p>
    </div>
  );
}

function HelloUser() {
  const user = { name: 'محمد', age: 22 };
  return (
    <div>
      <h1>مرحبًا {user.name}!</h1>
      <p>عمرك {user.age} سنة</p>
    </div>
  );
}

🔍 الخلاصة:

JSX هو لغة شبيهة بـ HTML داخل JavaScript تجعل بناء واجهات المستخدم في React أسهل وأوضح،
وهي تُترجم خلف الكواليس إلى دوال JavaScript (React.createElement) عند التنفيذ.

Babel.js 🧠

🔹 التعريف:
Babel هو محوّل (Transpiler) أو مترجم JavaScript حديث يقوم بتحويل كود JavaScript الجديد (ES6 وما بعده) إلى كود متوافق مع جميع المتصفحات القديمة.
بمعنى آخر، Babel يجعل المتصفحات التي لا تدعم الميزات الحديثة تفهم الكود وتنفّذه بدون أخطاء.

⚙️ **كيف يعمل Babel؟

1. تقرأ Babel الكود الحديث (ES6, ES7, JSX…).
2. تحوّله إلى كود JavaScript قديم (ES5) يمكن لأي متصفح تشغيله.
3. النتيجة: كود متوافق وسهل النشر على جميع الأجهزة والمتصفحات.

💡 مثال توضيحي:

كود حديث بلغة ES6:

const greet = (name) => `Hello, ${name}`;
بعد تحويله بواسطة Babel:

const greet = (name) => `Hello, ${name}`;
بعد تحويله بواسطة Babel:

var greet = function(name) {
  return 'Hello, ' + name;
};

var greet = function(name) {
  return 'Hello, ' + name;
};

الآن يعمل حتى على المتصفحات القديمة مثل Internet Explorer 🚀

🧩 Babel و React:

في React نكتب JSX داخل كود JavaScript،
لكن المتصفحات لا تفهم JSX مباشرة.
لذلك Babel يقوم بتحويل JSX إلى كود JavaScript عادي:

const element = <h1>مرحبًا</h1>;

const element = <h1>مرحبًا</h1>;

⬇️ يتحول إلى:

const element = React.createElement('h1', null, 'مرحبًا');<br>

const element = React.createElement('h1', null, 'مرحبًا');<br>

بدون Babel، هذا الكود لن يعمل في المتصفح.

⚙️ كيف يُستخدم Babel في المشاريع؟

عادةً لا نثبّته يدويًا، لأنه يأتي مدمجًا ضمن أدوات مثل:

• Create React App
• Vite
• Next.js

لكن في المشاريع المخصّصة يمكن تثبيته هكذا:

npm install @babel/core @babel/cli @babel/preset-env --save-dev

npm install @babel/core @babel/cli @babel/preset-env --save-dev

ثم تشغيله:

npx babel src --out-dir dist --presets=@babel/preset-env

npx babel src --out-dir dist --presets=@babel/preset-env

🧰 أشهر الـ Presets (الإعدادات الجاهزة):

• @babel/preset-env → لتحويل كود ES6+ إلى ES5
• @babel/preset-react → لتحويل JSX إلى JavaScript
• @babel/preset-typescript → لتحويل TypeScript إلى JavaScript

🔍 الخلاصة:

Babel.js هو المترجم الذي يجعل كود JavaScript الحديث وJSX يعمل في جميع المتصفحات،
وهو جزء أساسي في أي مشروع React.js لأنه يحوّل JSX وميزات ES6 إلى كود مفهوم عالميًا.

الفرق بين HTML و JSX هو من أهم المفاهيم التي يجب فهمها عند تعلم React.js 👇

🧱 أولاً: ما هو HTML؟

HTML (HyperText Markup Language)
هي لغة ترميز تُستخدم لبناء هيكل صفحات الويب،
وتتعامل المتصفحات معها مباشرة بدون أي تحويل أو معالجة.

مثال:

<h1>مرحبًا بالعالم</h1>
<p>هذا نص داخل صفحة HTML.</p>

<h1>مرحبًا بالعالم</h1>
<p>هذا نص داخل صفحة HTML.</p>

• تُكتب داخل ملفات .html
• لا تحتوي على منطق برمجي (مثل الجمل الشرطية أو المتغيرات)
• المتصفح يفهمها ويعرضها كما هي

⚙️ ثانيًا: ما هو JSX؟

JSX (JavaScript XML)
هي صيغة خاصة داخل React تسمح بكتابة كود يشبه HTML داخل JavaScript.
لكن المتصفح لا يفهم JSX مباشرة — بل يتم تحويلها إلى JavaScript عادي بواسطة Babel.

مثال:

const name = "أحمد";
const element = <h1>مرحبًا، {name}!</h1>;

const name = "أحمد";
const element = <h1>مرحبًا، {name}!</h1>;

هنا تم استخدام:

• HTML-like syntax
• مع JavaScript متداخل {name}

🔍 الفرق بالتفصيل بين HTML و JSX

🧠 أمثلة توضيحية:

🔸 HTML:

<div class="box">
  <h2>عنوان</h2>
  <p>نص تجريبي</p>
</div>

<div class="box">
  <h2>عنوان</h2>
  <p>نص تجريبي</p>
</div>

🔹 JSX:

const element = (
  <div className="box">
    <h2>عنوان</h2>
    <p>نص تجريبي</p>
  </div>
);

const element = (
  <div className="box">
    <h2>عنوان</h2>
    <p>نص تجريبي</p>
  </div>
);

✅ الخلاصة:

🔹 HTML تُستخدم لبناء الصفحات الثابتة وتُفهم مباشرة من المتصفح.
🔹 JSX تُستخدم داخل React.js لتوليد واجهات تفاعلية،
وتجمع بين قوة JavaScript وسهولة كتابة HTML.

ببساطة:

JSX = HTML + JavaScript 💪