ما هو الـ JSX؟ كيف نكتب كود HTML داخل ملفات الجافا سكريبت بسلاسة؟

ماذا سنتعلم؟ في هذا الدرس، سنكتشف قوة JSX وكيف يمكننا دمج بنية HTML بسلاسة داخل ملفات JavaScript لإنشاء واجهات مستخدم ديناميكية ومرنة باستخدام React.

سنتعلم كيفية كتابة مكونات React باستخدام JSX، وكيفية تضمين تعبيرات JavaScript داخلها، وأخيراً كيفية عرض هذه المكونات على الصفحة.

1. فهم الـ JSX: الجسر بين HTML و JavaScript

JSX (JavaScript XML) هو امتداد لبناء الجملة في JavaScript يسمح لنا بكتابة كود يشبه HTML مباشرة داخل ملفات JavaScript. إنه ليس HTML فعلياً ولا هو مجرد سلسلة نصية؛ بل هو سكر نحوي (syntactic sugar) لوظائف React.createElement().

ملاحظة تقنية: المتصفحات لا تفهم JSX مباشرة. يتم تحويل JSX إلى استدعاءات JavaScript عادية (مثل React.createElement('div', null, 'Hello')) أثناء عملية البناء بواسطة أدوات مثل Babel، قبل أن يصل إلى المتصفح.

2. الشرح خطوة بخطوة: بناء مكون React باستخدام JSX

الخطوة 1: إعداد بيئة React الأساسية

للبدء، نحتاج إلى استيراد مكتبات React و ReactDOM. هذه هي اللبنات الأساسية لتطبيق React الخاص بنا.

import React from 'react'; // استيراد مكتبة React التي تمكننا من استخدام JSX ومكونات React.
import ReactDOM from 'react-dom/client'; // استيراد ReactDOM للتعامل مع DOM الخاص بالمتصفح.

// تحديد العنصر الجذر في HTML الذي سيتم عرض تطبيق React بداخله.
const rootElement = document.getElementById('root'); 

// إنشاء جذر React جديد لتطبيقنا. هذا هو أسلوب React 18+.
const root = ReactDOM.createRoot(rootElement);

الخطوة 2: كتابة أول مكون JSX

الآن، لنقم بإنشاء مكون وظيفي بسيط (Functional Component) يعرض رسالة ترحيب. لاحظ كيف نكتب بنية تشبه HTML مباشرة داخل دالة JavaScript.

import React from 'react';
import ReactDOM from 'react-dom/client';

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

// تعريف مكون وظيفي (Functional Component) باسم 'Greeting'.
// المكونات الوظيفية هي دوال JavaScript ترجع عناصر JSX.
function Greeting() {
  return (
    // هنا نكتب JSX! يبدو تمامًا مثل HTML.
    // يمكن لـ JSX إرجاع عنصر جذر واحد فقط. إذا أردت عناصر متعددة، يجب تغليفها في <div> أو <React.Fragment>.
    <div>
      <h1>مرحباً بكم في عالم JSX!</h1>
      <p>هذا كود HTML مكتوب داخل ملف JavaScript.</p>
    </div>
  );
}

الخطوة 3: دمج المنطق مع الواجهة (Expressions في JSX)

إحدى أقوى ميزات JSX هي القدرة على تضمين تعبيرات JavaScript مباشرة داخلها باستخدام الأقواس المعقوفة {}. هذا يسمح لنا بعرض البيانات الديناميكية أو تنفيذ عمليات حسابية.

import React from 'react';
import ReactDOM from 'react-dom/client';

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

function Greeting() {
  const userName = 'زائر كريم'; // متغير JavaScript عادي.
  const currentYear = new Date().getFullYear(); // الحصول على السنة الحالية.

  return (
    <div>
      {/* استخدام تعبير JavaScript لعرض قيمة المتغير userName */}
      <h1>مرحباً، {userName}!</h1>
      {/* استخدام تعبير JavaScript لإجراء عملية حسابية أو استدعاء دالة */}
      <p>نحن في عام {currentYear}.</p>
      <p>مجموع 5 + 3 هو: {5 + 3}.</p>
    </div>
  );
}

الخطوة 4: عرض المكون على الصفحة

أخيراً، لعرض المكون الذي أنشأناه على متصفح الويب، نستخدم الكائن root الذي أنشأناه من ReactDOM، ونستدعي دالة render() لتمرير مكوننا.

import React from 'react';
import ReactDOM from 'react-dom/client';

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

function Greeting() {
  const userName = 'زائر كريم';
  const currentYear = new Date().getFullYear();

  return (
    <div>
      <h1>مرحباً، {userName}!</h1>
      <p>نحن في عام {currentYear}.</p>
      <p>مجموع 5 + 3 هو: {5 + 3}.</p>
    </div>
  );
}

// عرض مكون 'Greeting' داخل العنصر الجذر 'root'.
// في JSX، يتم تمثيل مكونات React المخصصة كعلامات HTML عادية، ولكن بأسماء تبدأ بحرف كبير.
root.render(
  <React.StrictMode>
    <Greeting /> {/* هنا يتم استخدام مكوننا كما لو كان علامة HTML عادية */}
  </React.StrictMode>
);

الكود النهائي الكامل

هذا هو السكربت الكامل الذي يمكنك وضعه في ملف index.js (مع التأكد من وجود ملف index.html يحتوي على <div id="root"></div>).

import React from 'react';
import ReactDOM from 'react-dom/client';

// تحديد العنصر الجذر في HTML الذي سيتم عرض تطبيق React بداخله.
const rootElement = document.getElementById('root'); 

// إنشاء جذر React جديد لتطبيقنا. هذا هو أسلوب React 18+.
const root = ReactDOM.createRoot(rootElement);

// تعريف مكون وظيفي (Functional Component) باسم 'Greeting'.
// المكونات الوظيفية هي دوال JavaScript ترجع عناصر JSX.
function Greeting() {
  const userName = 'زائر كريم'; // متغير JavaScript عادي.
  const currentYear = new Date().getFullYear(); // الحصول على السنة الحالية.

  return (
    // هنا نكتب JSX! يبدو تمامًا مثل HTML.
    // يمكن لـ JSX إرجاع عنصر جذر واحد فقط. إذا أردت عناصر متعددة، يجب تغليفها في <div> أو <React.Fragment>.
    <div>
      {/* استخدام تعبير JavaScript لعرض قيمة المتغير userName */}
      <h1>مرحباً، {userName}!</h1>
      {/* استخدام تعبير JavaScript لإجراء عملية حسابية أو استدعاء دالة */}
      <p>نحن في عام {currentYear}.</p>
      <p>مجموع 5 + 3 هو: {5 + 3}.</p>
    </div>
  );
}

// عرض مكون 'Greeting' داخل العنصر الجذر 'root'.
// في JSX، يتم تمثيل مكونات React المخصصة كعلامات HTML عادية، ولكن بأسماء تبدأ بحرف كبير.
root.render(
  <React.StrictMode>
    <Greeting /> {/* هنا يتم استخدام مكوننا كما لو كان علامة HTML عادية */}
  </React.StrictMode>
);

النتيجة المتوقعة

عند تشغيل هذا الكود في متصفح يدعم React (عبر إعداد بيئة React مثل Create React App)، سترى على الشاشة:

مرحباً، زائر كريم!
نحن في عام [السنة الحالية، مثل 2023].
مجموع 5 + 3 هو: 8.

هذا يوضح كيف سمح لنا JSX بدمج بنية HTML والمنطق البرمجي لـ JavaScript بسلاسة في ملف واحد، مما يجعل تطوير واجهات المستخدم أكثر سهولة وقابلية للقراءة.

← السابقالفهرس