Frontend Academy · درس

JSX: الصياغة والتحويل

اكتب JSX، وافهم كيفية ترجمة Babel له إلى استدعاءات React.createElement، وطبّق القواعد: عنصر جذري واحد، وclassName، والوسوم ذاتية الإغلاق.

JSX: الصياغة والتحويل درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ما JSX؟

JSX (اختصار JavaScript XML) هو امتداد نحوي يتيح كتابة ترميز شبيه بـ HTML داخل JavaScript. وهو ليس ميزة في المتصفح؛ إذ يحوّله Babel أو TypeScript إلى استدعاءات دوال JavaScript قبل تشغيله.

تحويل JSX

يحوّل Babel JSX إلى استدعاءات React.createElement(). ومع تحويل JSX الجديد (في React 17 والإصدارات الأحدث)، لا تحتاج إلى استيراد React، إذ يضيف Babel الاستيرادات اللازمة تلقائيًا.

// JSX:
const element = <h1 className="title">Hello</h1>;

// Compiled to (new transform):
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });

قواعد JSX: عنصر جذري واحد

يجب أن تحتوي تعبيرات JSX على عنصر جذري واحد بالضبط. لفّ العناصر الشقيقة داخل <div> أو استخدم Fragments (<></> أو <React.Fragment>) لتجنّب إضافة عقد DOM زائدة.

// Error: adjacent elements need a wrapper
return (
  <h1>Title</h1>
  <p>Body</p>
);

// Use Fragment:
return (
  <>
    <h1>Title</h1>
    <p>Body</p>
  </>
);

className وhtmlFor

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

<div className="card active">
  <label htmlFor="email">Email</label>
  <input id="email" type="email" />
</div>

الوسوم ذات الإغلاق الذاتي

في JSX، يجب إغلاق جميع الوسوم إغلاقًا صحيحًا. ويجب أن تستخدم العناصر التي لا تحتوي على عناصر فرعية شرطة الإغلاق الذاتي: <img /> و<br /> و<input />.

التعبيرات في JSX: {}

ضمّن أي تعبير JavaScript داخل JSX باستخدام الأقواس المعقوفة. تعمل المتغيرات واستدعاءات الدوال والعوامل الثلاثية والعمليات الحسابية جميعًا. أما العبارات مثل if وfor فلا تعمل.

const name = 'Alice';
const count = 5;

return (
  <div>
    <h1>Hello, {name}!</h1>
    <p>You have {count} messages.</p>
    <p>Double: {count * 2}</p>
    {isLoggedIn ? <Dashboard /> : <Login />}
  </div>
);

JSX والسلاسل النصية

تُدمج النصوص المتجاورة وتعبيرات JSX تلقائيًا. ويمكنك المزج بحرية بين النصوص والتعبيرات داخل العنصر.

<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>

عرض لا شيء: null وfalse

أعد null أو false لعدم عرض أي شيء. فكلاهما قيمة صالحة في JSX ولا ينتجان أي مخرجات في DOM. وهذا مفيد للعرض الشرطي.

function Banner({ show }: { show: boolean }) {
  if (!show) return null;  // renders nothing
  return <div className="banner">Important notice!</div>;
}

السمة style — صيغة الكائن

تستخدم الأنماط المضمّنة في JSX كائنًا، لا سلسلة نصية. وتُكتب أسماء الخصائص بصيغة camelCase.

<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
  Styled box
</div>

JSX هي JavaScript

بما أن JSX تُحوَّل إلى JavaScript، يمكنك وضع JSX في المتغيرات، وإعادتها من الدوال، وتمريرها كـ props، وتخزينها في المصفوفات. عناصر React هي كائنات JavaScript عادية.

const elements = ['apple', 'banana', 'cherry'].map(fruit => (
  <li key={fruit}>{fruit}</li>
));

return <ul>{elements}</ul>;

TypeScript وJSX: ملفات .tsx

استخدم الامتداد .tsx لملفات TypeScript التي تحتوي على JSX. يفحص TypeScript أنواع JSX، فيكتشف أخطاء أنواع props وغياب props وقت الترجمة.

اختبار سريع

لماذا نستخدم className بدلًا من class في JSX؟

مراجعة: JSX

JSX صياغة مختصرة لـ React.createElement(). يجب أن يحتوي كل تعبير على عنصر جذري واحد أو Fragment. استخدم className وhtmlFor لسمات الكلمات المحجوزة. أغلق جميع العناصر الفارغة ذاتيًا. ضمّن التعبيرات باستخدام {}. أعد null أو false لعدم عرض أي شيء. تستخدم الأنماط المضمّنة صيغة كائن camelCase. JSX هي JavaScript، لذا تعامل معها كقيمة.

الأسئلة الشائعة

هل درس «JSX: الصياغة والتحويل» مجاني؟

نعم — نص درس «JSX: الصياغة والتحويل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «JSX: الصياغة والتحويل»؟

اكتب JSX، وافهم كيفية ترجمة Babel له إلى استدعاءات React.createElement، وطبّق القواعد: عنصر جذري واحد، وclassName، والوسوم ذاتية الإغلاق. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «JSX: الصياغة والتحويل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Frontend Academy