{"id":"l-rf-1-3","courseId":"react-fundamentals","lang":"ar","kind":"lesson","summary":"اكتب components في React على شكل دوال عادية، وضع بعضها داخل بعض، وقسّمها إلى ملفات باستخدام import وexport، وتجنّب أخطاء التسمية والتداخل التي تكسرها.","html":"

حاليًا يحتوي App.jsx على عنوان واحد. أمّا شاشة Watchlist الحقيقية ففيها ترويسة ونموذج وشريط فلترة وقائمة من بطاقات الأفلام، وبعض القطع تتكرّر مرات كثيرة. إن كتبت كل ذلك في دالة واحدة فستحصل على component من 300 سطر لا يرغب أحد في لمسه. الـ components تتيح لك أن تسمّي كل قطعة، وتكتبها مرة واحدة، وتعيد استخدامها.

\n

الـ component مجرّد دالة

\n

هذا component كامل:

\n
src/App.jsx
function Header() {\n  return (\n    <header>\n      <h1>My Watchlist</h1>\n      <p>Movies I want to see</p>\n    </header>\n  );\n}\n\nexport default function App() {\n  return (\n    <main>\n      <Header />\n    </main>\n  );\n}
\n

ثلاث قواعد تجعل هذا يعمل:

\n
    \n
  1. إنه دالة تُرجع JSX. الـ JSX هو الصياغة الشبيهة بـ HTML داخل return. ستتعلّم قواعده في الدرس التالي.
    2. \n
  2. اسمه يبدأ بحرف كبير. الوسم <Header /> يقول لـ React «استدعِ الدالة Header». أمّا <header> بالحرف الصغير فيعني عنصر HTML.
    3. \n
  3. تستخدمه كوسم، لا كاستدعاء دالة. تكتب <Header /> وReact تقرّر متى تستدعي Header(). وهذا ما يتيح لـ React أن تتتبّعه وتعيد رسمه (re-render) وتمنحه state لاحقًا.
    4. \n
\n

الأقواس حول الـ JSX متعدّد الأسطر ليست شرطًا من React. وظيفتها منع JavaScript من إدراج فاصلة منقوطة تلقائيًا تُنهي return مبكرًا، فتُرجع undefined بصمت.

\n

components داخل components

\n

تتداخل الـ components كما يتداخل HTML. أضف بطاقة فيلم واستخدمها مرتين:

\n
src/App.jsx
function MovieCard() {\n  return (\n    <article>\n      <h2>Arrival</h2>\n      <p>2016</p>\n    </article>\n  );\n}\n\nexport default function App() {\n  return (\n    <main>\n      <Header />\n      <MovieCard />\n      <MovieCard />\n    </main>\n  );\n}
\n

لديك الآن بطاقتان متطابقتان. واضح أن هذا ليس مفيدًا بعد؛ يجب أن تعرض البطاقات أفلامًا مختلفة. تمرير البيانات إلى الـ component هو وظيفة الـ props، وستصل إليها في القسم 2. الآن لاحظ الشكل فقط: App هو الأب، وHeader والبطاقتان MovieCard أبناؤه. كل تطبيق React شجرة من هذا النوع.

\n\n

component واحد لكل ملف

\n

عندما يُعاد استخدام component أو يكبر حتى يتجاوز شاشة واحدة، امنحه ملفًا خاصًا به. الترتيب المعتاد هو مجلد src/components:

\n
src/components/MovieCard.jsx
export default function MovieCard() {\n  return (\n    <article>\n      <h2>Arrival</h2>\n      <p>2016</p>\n    </article>\n  );\n}
\n
src/App.jsx
import Header from './components/Header.jsx';\nimport MovieCard from './components/MovieCard.jsx';\n\nexport default function App() {\n  return (\n    <main>\n      <Header />\n      <MovieCard />\n    </main>\n  );\n}
\n

تمنحك JavaScript modules نوعين من التصدير:

\n\n

كلاهما جيد. كثير من الفرق تفضّل الـ named exports لأن الاسم ثابت، والمحرّرات تعيد تسميته في كل مكان نيابةً عنك. اختر أسلوبًا واحدًا لكل مشروع والتزم به. تستخدم هذه الدورة الـ default exports للـ components، تماشيًا مع الملف الذي أنشأه Vite.

\n\n

الـ components يجب أن تكون متوقَّعة

\n

قد تستدعي React دالة الـ component مرات كثيرة: مع كل تحديث، ومرتين تحت StrictMode، وأحيانًا حين تجهّز شاشة في الخلفية. لذلك يجب أن يتصرّف الـ component كالمعادلة الرياضية: مع المدخلات نفسها يُرجع الـ JSX نفسه، ولا يغيّر شيئًا خارجه أثناء الرسم. لا تعدّل متغيّرات عامة، ولا تجلب بيانات، ولا تلمس الـ DOM مباشرة داخل جسم الدالة. ستتعلّم أين يوضع هذا النوع من العمل (الـ event handlers والـ effects) في القسم 3.

\n

إليك الفرق عمليًا. الـ component الذي ينفّذ visits += 1 على متغيّر في مستوى الـ module سيعطي أرقامًا مختلفة في التطوير والإنتاج، لأن StrictMode يستدعيه مرتين. أمّا الـ component الذي يكتفي بقراءة مدخلاته وإرجاع JSX فيعطي الجواب نفسه مهما استدعته React.

\n

أرجِع جذرًا واحدًا

\n

يُرجع الـ component عنصر JSX واحدًا. لإرجاع عناصر متجاورة من دون إضافة <div> زائد، غلّفها بـ fragment:

\n
JSX
export default function App() {\n  return (\n    <>\n      <Header />\n      <MovieCard />\n    </>\n  );\n}
\n

الـ fragment يجمع العناصر في كودك لكنه لا يضيف شيئًا إلى الـ DOM. استخدم عنصرًا حقيقيًا مثل <main> أو <section> حين يكون له معنى في بنية الصفحة، واستخدم الـ fragment حين لا يكون.

\n

صار بإمكانك تقسيم الشاشة إلى قطع مسمّاة. في الدرس التالي تتعلّم قواعد JSX نفسه: لماذا نكتب className لا class، وكيف تعمل الأقواس المعقوصة، وإلى ماذا يتحوّل JSX حين يترجمه Vite.

\n","toc":[{"id":"sec-1","text":"الـ component مجرّد دالة","level":2},{"id":"sec-2","text":"components داخل components","level":2},{"id":"sec-3","text":"component واحد لكل ملف","level":2},{"id":"sec-4","text":"الـ components يجب أن تكون متوقَّعة","level":2},{"id":"sec-5","text":"أرجِع جذرًا واحدًا","level":2}],"takeaways":["الـ component دالة JavaScript يبدأ اسمها بحرف كبير وتُرجع JSX.","تستخدم الـ component كأنه وسم HTML، مثل <MovieCard />، وReact تستدعي الدالة نيابةً عنك.","امنح كل component قابل لإعادة الاستخدام ملفًا خاصًا به وصدّره، ثم استورده حيثما تحتاجه.","عرّف الـ components في المستوى الأعلى من الـ module، ولا تعرّفها أبدًا داخل component آخر."],"further":[{"title":"Your First Component","url":"https://react.dev/learn/your-first-component"},{"title":"Importing and Exporting Components","url":"https://react.dev/learn/importing-and-exporting-components"}],"quiz":[{"q":"

كتبتَ هذا الـ component واستخدمته بالشكل <movieCard />. لم يظهر شيء، وظهر في الـ console تحذير عن وسم غير معروف. لماذا؟

\n
JSX
function movieCard() {\n  return <article>Arrival</article>;\n}
\n","options":[{"text":"يجب أن تُكتب الـ components على شكل arrow functions، لا بالكلمة المفتاحية function.","why":"تعمل الـ function declarations والـ arrow functions كلتاهما كـ components. الكلمة المفتاحية ليست المشكلة."},{"text":"نسي الـ component أن يستدعي createRoot.","why":"تستدعي createRoot مرة واحدة في main.jsx للتطبيق كله، لا داخل كل component."},{"text":"الوسوم ذات الحرف الصغير في JSX تُعامَل كعناصر HTML، فحاولت React إنشاء عنصر DOM اسمه <moviecard>.","why":"صحيح. لا تستدعي React دالتك إلا إذا بدأ الوسم بحرف كبير. غيّر الاسم إلى MovieCard."},{"text":"لا يمكن أن يكون <article> العنصر الأعلى الذي يُرجعه الـ component.","why":"أي عنصر واحد، بما فيه <article>، يمكن أن يكون جذر الـ JSX الذي يُرجعه الـ component."}],"answer":2},{"q":"

أيّ سطر يستورد بشكل صحيح component يصدّره الملف src/components/MovieCard.jsx بالشكل export default function MovieCard()؟

","options":[{"text":"import MovieCard from './components/MovieCard.jsx';","why":"صحيح. الـ default export يُستورد بلا أقواس معقوصة، ويمكنك تسميته بأي اسم (والالتزام بالاسم نفسه أحكم)."},{"text":"import { MovieCard } from './components/MovieCard.jsx';","why":"الأقواس المعقوصة تستورد named export. هذا الملف لا يحتوي إلا على default export، فتكون القيمة المستوردة undefined."},{"text":"import MovieCard from 'MovieCard';","why":"الاسم المجرّد مثل ‘MovieCard’ يُبحث عنه في node_modules. ملفاتك الخاصة تحتاج إلى مسار نسبي."}],"answer":0},{"q":"

عرّف زميلك Badge داخل MovieCard. ما المشكلة التي يسبّبها ذلك؟

\n
JSX
export default function MovieCard() {\n  function Badge() {\n    return <span>New</span>;\n  }\n  return <article><Badge /></article>;\n}
\n","options":[{"text":"إنه خطأ في الصياغة؛ لا يمكن تداخل الدوال في ملفات JSX.","why":"الدوال المتداخلة كود JavaScript صحيح. الكود يعمل، والمشكلة تظهر أثناء التشغيل."},{"text":"لا يمكن تصدير Badge، فلا تستطيع الاختبارات استيراده.","why":"هذا عيب ثانوي. المشكلة الحقيقية هي ما يحدث لـ Badge في كل render."},{"text":"ترسم React الـ component المسمّى Badge مرتين، مرة لكل دالة.","why":"لا شيء يُرسم مرتين هنا. الثمن الحقيقي أن Badge يُعاد إنشاؤه من الصفر."},{"text":"كل render لـ MovieCard ينشئ دالة Badge جديدة تمامًا، فتتخلّص React من الـ DOM والـ state الخاصين بـ Badge وتعيد بناءهما في كل مرة.","why":"صحيح. ترى React نوع component مختلفًا في كل render فتعيد تركيبه. انقل Badge إلى المستوى الأعلى من الـ module."}],"answer":3},{"q":"

يُرجع App العنصرين <Header /><MovieCard /> متجاورين، فيعرض Vite الرسالة «Adjacent JSX elements must be wrapped in an enclosing tag». ما أصغر إصلاح صحيح؟

","options":[{"text":"أرجِع مصفوفة تضمّ الـ componentَين.","why":"المصفوفة تُعرض فعلًا، لكن React تُظهر تحذيرًا ما لم يكن لكل عنصر key، وهي غير مريحة للـ markup الثابت. هناك أداة أنظف لهذا."},{"text":"غلّفهما بـ fragment بالشكل <>…</>، أو بعنصر له معنى مثل <main>.","why":"صحيح. الـ component يُرجع جذرًا واحدًا، والـ fragment يجمع العناصر من دون إضافة عقدة إلى الـ DOM."},{"text":"استدعِ كل component كدالة، Header() وMovieCard()، واجمع النتائج.","why":"استدعاء الـ components كدوال يتجاوز آلية الرسم في React ويكسر الـ hooks بداخلها. استخدم وسوم JSX دائمًا."}],"answer":1}],"exercise":{"kind":"web","mode":"react","starter":{"jsx":"function Header() {\n // Return a
with an

and a

\n return null;\n}\n\nfunction MovieCard() {\n // Return an

with an

title and a

year\n return null;\n}\n\nexport default function App() {\n return (\n

\n {/* Use Header once and MovieCard twice */}\n
\n );\n}\n"},"solution":{"jsx":"function Header() {\n return (\n
\n

My Watchlist

\n

Movies I want to see

\n
\n );\n}\n\nfunction MovieCard() {\n return (\n
\n

Arrival

\n

2016

\n
\n );\n}\n\nexport default function App() {\n return (\n
\n
\n \n \n
\n );\n}\n"},"checks":[{"id":"header-heading","test":"return text('header h1') === 'My Watchlist';"},{"id":"header-tagline","test":"return text('header p').length > 0;"},{"id":"two-cards","test":"return $$('main article').length === 2;"},{"id":"card-content","test":"return $$('article').every((a) => a.querySelector('h2') && a.querySelector('h2').textContent.includes('Arrival') && a.querySelector('p') && a.querySelector('p').textContent.includes('2016')) && $$('article').length > 0;"}],"title":"الترويسة وبطاقات الأفلام","prompt":"

ابنِ الشريحة الأولى من شاشة Watchlist.

\n
    \n
  1. اجعل Header يُرجع <header> يحتوي على <h1> بالنص My Watchlist وعلى <p> بشعار من اختيارك.
    2. \n
  2. اجعل MovieCard يُرجع <article> فيه <h2> بالنص Arrival و<p> بالنص 2016.
    3. \n
  3. في App، اعرض Header مرة واحدة وMovieCard مرتين داخل <main>.
    4. \n
\n","hints":["الـ component يُرجع JSX، مثلًا return (<header>…</header>);. أبقِ الأقواس حتى لا تنقطع جملة الـ return.","استخدم الـ components كوسوم تبدأ بحرف كبير: <Header /> و<MovieCard />.","يجب أن يحتوي App على <Header /> و<MovieCard /> و<MovieCard /> داخل <main>."],"explanation":"

كل component دالة في المستوى الأعلى تُرجع عنصرًا جذرًا واحدًا. ويركّبها App كوسوم، فتستدعي React الدالة Header مرة وMovieCard مرتين، فينتج عنصرا <article> متطابقان. هذا التكرار مقصود: في القسم 2 ستمرّر لكل بطاقة فيلمها الخاص عبر الـ props.

\n","checkLabels":{"header-heading":"يحتوي
على

بالنص “My Watchlist”","header-tagline":"يحتوي
على

فيه شعار","two-cards":"يحتوي

على بطاقتين
بالضبط","card-content":"كل بطاقة فيها

بالنص “Arrival” و

بالنص “2016”"}},"words":611,"readMinutes":4}