JSX (JavaScript XML)

الدرس الثالث: JSX (JavaScript XML)

في هذا الدرس، سنتعرف على JSX، وهي إحدى المزايا الأساسية في React التي تتيح لك كتابة HTML-like syntax داخل JavaScript. سنشرح كيفية كتابة JSX داخل المكونات، فهم التعبيرات في JSX، والفرق بين JSX و HTML.

1. ما هو JSX وكيفية عمله؟

JSX (JavaScript XML) هو امتداد لـ JavaScript يسمح لك بكتابة HTML-like syntax داخل JavaScript. يوفر React بيئة لتطوير واجهات المستخدم باستخدام JSX، مما يسهل قراءة وكتابة الكود. عندما تكتب JSX، فإن React يقوم بتحويلها إلى JavaScript باستخدام Babel، وبالتالي تصبح الكود الذي تكتبه قابلاً للتنفيذ في المتصفح.

كيف يعمل JSX؟

JSX هو في الأساس عبارة عن تعبيرات JavaScript يتم تحويلها بواسطة Babel إلى React.createElement(). عندما تكتب JSX داخل مكون React، يتم معالجتها بواسطة Babel وتحويلها إلى كود JavaScript عادي قبل أن يتم تنفيذها.

مثال:

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

يتم تحويل الكود أعلاه بواسطة Babel إلى الشكل التالي:

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

بذلك، يتم تحويل JSX إلى React.createElement، الذي يقوم بإنشاء كائن React element، وهو ما يتم عرضه في واجهة المستخدم.

2. كيفية كتابة JSX داخل المكونات

يمكنك كتابة JSX داخل مكونات React كما لو كنت تكتب HTML داخل JavaScript. لكن هناك بعض القواعد التي يجب اتباعها عند كتابة JSX داخل المكونات.

مثال على كتابة JSX في مكون:

import React from 'react';

function Welcome() {
  return <h1>Welcome to React!</h1>;
}

export default Welcome;

في هذا المثال، Welcome هو مكون React يُرجع JSX يمثل <h1> يحتوي على النص “Welcome to React!”.

ملاحظات عند كتابة JSX:

• يجب أن يكون لكل مكون JSX عنصر جذر واحد فقط. إذا كنت تريد إرجاع أكثر من عنصر، يمكنك استخدام Fragment أو تضمين العناصر داخل عنصر واحد مثل <div>.
• كل JSX يجب أن يكون مغلقًا بشكل صحيح، سواء كانت <img /> أو <input /> أو أي عنصر آخر.

مثال باستخدام Fragment:

import React from 'react';

function Welcome() {
  return (
    <>
      <h1>Welcome to React!</h1>
      <p>Let's learn how to use JSX.</p>
    </>
  );
}

export default Welcome;

في هذا المثال، استخدمنا <></> (Fragment) لتضمين أكثر من عنصر في مكون بدون إضافة عقدة جذرية إضافية.

3. فهم التعبيرات في JSX

في JSX، يمكنك استخدام التعبيرات داخل الأقواس {}. هذه التعبيرات يمكن أن تكون أي شيء مثل متغيرات، دوال، أو عمليات حسابية، بشرط أن تكون قيم JavaScript.

أمثلة على التعبيرات في JSX:

• تعبير متغير:

import React from 'react';

function Welcome() {
  const name = 'John';
  return <h1>Hello, {name}!</h1>;
}

export default Welcome;

في هذا المثال، قمنا بإدراج المتغير name داخل JSX باستخدام {}.

• التعبيرات الحسابية:

import React from 'react';

function Sum() {
  const a = 5;
  const b = 3;
  return <h1>The sum is: {a + b}</h1>;
}

export default Sum;

هنا، قمنا بإجراء عملية حسابية داخل {} لعرض مجموع a و b.

• الشرطيات داخل JSX:

يمكنك استخدام التعبيرات الشرطية داخل JSX عن طريق التراكيب الشرطية مثل if أو ternary.

مثال باستخدام تعبير ternary:

import React from 'react';

function Greeting(props) {
  return <h1>{props.isLoggedIn ? 'Welcome back!' : 'Please log in'}</h1>;
}

export default Greeting;

في هذا المثال، يتم استخدام التعبير الشرطي ternary لعرض رسالة مختلفة بناءً على قيمة props.isLoggedIn.

4. الفرق بين JSX و HTML

على الرغم من أن JSX يشبه HTML، إلا أن هناك بعض الفروق الرئيسية بينهما:

الميزة	JSX	HTML
التسمية الكبيرة والصغيرة	يجب أن تكون جميع العناصر في JSX مكتوبة بـ الحروف الصغيرة مثل <div />.	يمكن استخدام الحروف الكبيرة مثل <DIV /> في HTML، لكن من الأفضل استخدام الحروف الصغيرة.
الصفات (Attributes)	استخدام className بدلاً من class.	في HTML نستخدم class لتحديد الصفات.
القيم	يجب إغلاق كل عنصر في JSX بشكل صحيح، حتى <img /> أو <input />.	في HTML، يمكن أن تكون بعض العناصر غير مغلقة (مثل <img>).
الأنماط	لا يمكن استخدام style بنفس الطريقة كما في HTML، يجب أن يكون style عبارة عن كائن JavaScript.	في HTML، يمكن إضافة الأنماط مباشرة باستخدام style="...".
الحدود بين الفقرات	JSX يتطلب وجود عنصر جذر واحد لكل مكون.	في HTML، يمكن أن تحتوي الصفحة على عدة عناصر جذرية.

مثال يوضح الفرق بين JSX و HTML:

HTML:

<h1 class="title">Hello, World!</h1>

JSX:

<h1 className="title">Hello, World!</h1>

في JSX، نستخدم className بدلاً من class لأن class هو كلمة محجوزة في JavaScript.

5. الختام

في هذا الدرس:

• تعلمنا ما هو JSX وكيفية عمله.
• تعلمنا كيفية كتابة JSX داخل المكونات وكيفية استخدام التعبيرات في JSX.
• ناقشنا الفروق بين JSX و HTML، مثل استخدام className بدلاً من class، وكيفية التعامل مع العناصر المغلقة في JSX.

JSX هو أداة قوية في React تجعل كتابة واجهات المستخدم أسهل وأكثر وضوحًا، ويسمح لك بدمج JavaScript مع HTML-like syntax بشكل مرن وقوي.