{movie.title}
\n//{movie.year}
\n//يبدو JSX مثل HTML، فيكون أول ما يخطر لك أن تكتب HTML. وهذا ينجح في أغلب الأحيان. ثم تكتب class="card" فيظهر تحذير في الـ console، أو تضع if داخل أقواس معقوصة فتحصل على خطأ ترجمة يشير إلى السطر الخطأ. كل واحدة من هذه المفاجآت تصبح منطقية حين ترى حقيقة JSX.
يترجم Vite كل وسم JSX إلى استدعاء دالة. هذا الـ component:
\nfunction MovieCard() {\n return <h2 className=\"title\">Arrival</h2>;\n}يتحوّل إلى ما يشبه هذا:
\nimport { jsx } from 'react/jsx-runtime';\n\nfunction MovieCard() {\n return jsx('h2', { className: 'title', children: 'Arrival' });\n}يُرجع الاستدعاء كائن JavaScript عاديًا اسمه React element: وصف خفيف لما يجب أن يظهر على الشاشة، له type وبعض الـ props. يمكنك تمثيل الفكرة بدالة صغيرة من عندك:
function h(type, props, ...children) {\n return { type, props: { ...props, children } };\n}\n\nconst card = h('article', { className: 'card' },\n h('h2', null, 'Arrival'),\n h('p', null, 2016),\n);\n\nconsole.log(card.type); // article\nconsole.log(card.props.className); // card\nconsole.log(card.props.children[0].props.children); // [\"Arrival\"]عناصر React الحقيقية تحمل معلومات أكثر قليلًا، لكن الشكل هو نفسه. تمرّ React على شجرة الكائنات هذه وتُنشئ الـ DOM أو تحدّثه ليطابقها.
\nلاحظ أن الكود المترجَم يستورد jsx نيابةً عنك. لهذا لا تبدأ ملفات React الحديثة بالسطر import React from 'react'. الدروس القديمة تتضمّن هذا السطر لأن المترجم السابق كان يحوّل JSX إلى استدعاءات React.createElement(…)، التي تحتاج إلى وجود React في النطاق. ومنذ الـ JSX runtime التلقائي في React 17 لم يعد ضروريًا، فاحذفه.
حين تعرف أن JSX استدعاءات دوال، تتوقّف القواعد التالية عن الظهور كأنها اعتباطية.
\nداخل JSX، تعيدك { } إلى JavaScript. وكل ما تضعه بداخلها يصبح وسيطًا لاستدعاء دالة، لذا يجب أن يكون تعبيرًا (expression): شيئًا ينتج قيمة.
function MovieCard() {\n const movie = { title: 'Arrival', year: 2016, rating: 8 };\n const age = 2026 - movie.year;\n\n return (\n <article>\n <h2>{movie.title.toUpperCase()}</h2>\n <p>{movie.year} · {age} years old</p>\n <p>{movie.rating >= 8 ? 'Must watch' : 'Maybe'}</p>\n </article>\n );\n}المتغيّرات والوصول إلى الخصائص واستدعاء الدوال والعمليات الحسابية والمعامل الثلاثي a ? b : c كلها تعبيرات. أمّا if وfor وconst فجُمل (statements)، فلا يمكن وضعها داخل الأقواس، تمامًا كما لا يمكنك تمرير if (x) {} وسيطًا لدالة. وحين يكبر المنطق، احسب متغيّرًا فوق return واستخدمه.
هذه هي البطاقة نفسها مع وصف يحتاج إلى تفرّع حقيقي. تعيش جملة if في JavaScript عادية فوق return، ولا يستقبل JSX إلا القيمة النهائية:
function MovieCard({ movie }) {\n let label;\n if (movie.rating >= 9) {\n label = 'Masterpiece';\n } else if (movie.rating >= 7) {\n label = 'Must watch';\n } else {\n label = 'Maybe';\n }\n\n return <p>{movie.title}: {label}</p>;\n}هذا النمط يتوسّع جيدًا. يبقى الـ JSX صورة مقروءة للمخرجات، وتبقى القرارات في كود عادي يمكنك قراءته واختباره وتتبّع أخطائه كأي دالة أخرى. (الـ { movie } في قائمة المعاملات prop؛ ستتعلّم الـ props كما يجب في القسم التالي.)
الخصائص تأخذ أقواسًا معقوصة أيضًا: <img src={movie.poster} alt={movie.title} />. لا تضع الأقواس داخل علامات اقتباس؛ فـ src="{poster}" هو النص الحرفي {poster}.
لأن الـ props تصبح مفاتيح في كائن JavaScript، فهي تتبع قواعد التسمية في JavaScript:
\nclass تصبح className، وfor تصبح htmlFor (كلتاهما كلمة محجوزة في JS).onClick وtabIndex وautoComplete وmaxLength.aria-* وdata-* تحتفظ بالشَّرطات: aria-label="Remove" وdata-id="42".style كائنًا، بخصائص CSS بصيغة camelCase: style={{ marginTop: 8 }}. والرقم المجرّد يعني بكسلات في أغلب الخصائص. والأقواس المزدوجة هي كائن حرفي داخل تعبير JSX.JSX أكثر صرامة من HTML. كل عنصر يجب أن يُغلق: <img /> و<input /> و<br />. والـ component يُرجع جذرًا واحدًا، ملفوفًا بـ fragment <>…</> إن احتجت إلى عناصر متجاورة. والتعليقات توضع داخل أقواس معقوصة: {/* like this */}.
| ما تضعه بين الأقواس | \nما يظهر | \n
|---|---|
| نص أو رقم | \nالنص نفسه (بما في ذلك 0) | \n
| عنصر React | \nذلك العنصر | \n
| مصفوفة من العناصر | \nكل عنصر بالترتيب | \n
null وundefined وtrue وfalse | \nلا شيء | \n
| كائن عادي | \nخطأ: «Objects are not valid as a React child» | \n
صفّ «لا شيء» هو ما يجعل العرض الشرطي ممكنًا، والـ 0 في الصف الأول فخّ شهير ستقابله في درس العرض الشرطي.
صار بإمكانك قراءة أي JSX وتوقّع ما يفعله. في القسم التالي تتوقّف عن كتابة “Arrival” يدويًا، وتتعلّم التفكير بالـ components، فتقسّم شاشة كاملة إلى قطع تستقبل بياناتها عبر الـ props.
\n","toc":[{"id":"sec-1","text":"JSX مجرّد استدعاءات دوال","level":2},{"id":"sec-2","text":"الأقواس المعقوصة تحمل تعبيرات","level":2},{"id":"sec-3","text":"الخصائص أسماء JavaScript","level":2},{"id":"sec-4","text":"أغلق كل وسم","level":2},{"id":"sec-5","text":"ما الذي يمكن عرضه","level":2}],"takeaways":["يتحوّل JSX إلى استدعاءات دوال تُنشئ كائنات JavaScript عادية تصف الواجهة، ثم تحوّل React هذه الكائنات إلى DOM.","تضمّ الأقواس المعقوصة أي تعبير JavaScript (قيمة)، لكنها لا تقبل أبدًا جملة مثلif أو for.","الخصائص أسماء JavaScript بصيغة camelCase، لذا تكتب className وhtmlFor وonClick، وتمرّر إلى style كائنًا.","النصوص والأرقام تُعرض كنص، بينما null وundefined وtrue وfalse لا تعرض شيئًا، والكائنات العادية ترمي خطأ."],"further":[{"title":"Writing Markup with JSX","url":"https://react.dev/learn/writing-markup-with-jsx"},{"title":"JavaScript in JSX with Curly Braces","url":"https://react.dev/learn/javascript-in-jsx-with-curly-braces"},{"title":"Common components (props on every DOM element)","url":"https://react.dev/reference/react-dom/components/common"}],"quiz":[{"q":"إلى ماذا يتحوّل <h2 className="title">{movie.title}</h2> بعد أن يترجمه Vite؟
'h2' وخصائصه { className: 'title', children: movie.title }.","why":"صحيح. JSX صياغة لإنشاء كائنات عناصر، وReact تقرأ هذه الكائنات لتقرّر أي DOM تُنشئ أو تحدّث."},{"text":"نص HTML تُدرجه React باستخدام innerHTML.","why":"لا تبني React نصوص HTML أبدًا من أجل الرسم. ولهذا أيضًا يكون النص في JSX آمنًا افتراضيًا من حقن HTML."},{"text":"عنصر HTMLHeadingElement حقيقي يُنشأ باستخدام document.createElement.","why":"JSX لا ينتج إلا كائنات وصف خفيفة. تُنشئ React عُقد الـ DOM أو تعيد استخدامها لاحقًا، في مرحلة الـ commit."},{"text":"يبقى JSX كما هو ويفهمه المتصفّح مباشرة.","why":"المتصفّحات لا تفهم JSX. من دون خطوة ترجمة ترمي الصفحة خطأً في الصياغة."}],"answer":0},{"q":"أيّ سطر هو JSX صحيح؟
","options":[{"text":"<p>{if (watched) 'Seen'}</p>","why":"if جملة وليست تعبيرًا، فلا يمكن وضعها داخل الأقواس المعقوصة. استخدم المعامل الثلاثي أو احسب القيمة قبل return."},{"text":"<img src="{poster}">","why":"علامات الاقتباس تجعلها النص الحرفي “{poster}”، والوسم غير مغلق. اكتب src={poster} وأغلق الوسم ذاتيًا بـ />."},{"text":"<label class="field" for="title">Title</label>","why":"في JSX تُكتب هاتان الخاصيتان className وhtmlFor، لأن class وfor كلمتان محجوزتان في JavaScript."},{"text":"<div style={{ marginTop: 8, fontWeight: 'bold' }}>Hi</div>","why":"صحيح. الأقواس الخارجية تُدخلك إلى JavaScript، والداخلية كائن، وخصائص CSS بصيغة camelCase. والرقم المجرّد يعني بكسلات."}],"answer":3},{"q":"قيمة movie هي { title: 'Arrival', year: 2016 }. ماذا يحدث مع <p>{movie}</p>؟
{movie.title}."},{"text":"يُعرض الكائن بصيغة JSON.","why":"لا تحوّل React الكائنات إلى نص نيابةً عنك. استخدم JSON.stringify(movie) إن كنت تريد فعلًا عرض JSON."},{"text":"لا يُعرض شيء، تمامًا مثل null.","why":"وحدها null وundefined والقيم المنطقية لا تعرض شيئًا. أمّا الكائن العادي فخطأ."}],"answer":1},{"q":"يحتوي وصف أحد الأفلام القادم من الـ API على <b>Must watch</b>. تعرضه بالشكل <p>{movie.description}</p>. ماذا يظهر؟
<b>Must watch</b> بوسومه كاملة.","why":"صحيح. تهرّب React محتوى النصوص، فيظهر الـ markup الموجود في البيانات كحروف بدل أن يُنفَّذ. وهذا خط دفاع أساسي ضد هجمات cross-site scripting."}],"answer":2}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// A tiny stand-in for what JSX compiles to.\nfunction h(type, props, ...children) {\n return { type, props: { ...props, children } };\n}\n\n// Write the h() calls this JSX compiles to:\n//\n// {movie.year}
\n//{movie.year}
\n//JSX مجرّد استدعاءات دوال. يعطيك كود البداية الدالة h(type, props, ...children)، وهي نسخة مبسّطة مما ينتجه المترجم. أكمل buildCard(movie) لتُرجع بالضبط ما سينشئه هذا الـ JSX:
<article className=\"card\">\n <h2>{movie.title}</h2>\n <p>{movie.year}</p>\n</article>استخدم الوسيط movie، لا قيمًا مكتوبة يدويًا.
null)، وكل وسيط بعد ذلك ابن (child).","الخصائص توضع في كائن الـ props: { className: 'card' }.","يمكن أن يكون الأبناء استدعاءات h() أخرى: h('article', { className: 'card' }, h('h2', null, movie.title), …)."],"explanation":"كل وسم JSX يصبح استدعاءً واحدًا: اسم الوسم، ثم كائن الخصائص، ثم الأبناء بالترتيب. والتعبيرات داخل الأقواس المعقوصة مثل {movie.title} مجرّد وسائط، ولهذا لا يُسمح بداخلها إلا بالتعبيرات. تختلف الدالة jsx() الحقيقية في React في التفاصيل (فهي تستقبل الأبناء داخل كائن الـ props مباشرة بدل أن تأخذهم وسائط إضافية، ولا تضع الابن الوحيد داخل مصفوفة، وتستقبل الـ key منفصلًا)، لكن شجرة الكائنات العادية هي الفكرة نفسها.