المكونات الوظيفية في React: فهم Component وبناؤه

تخيّل أنك تبني واجهة فيها زر، قائمة، وبطاقة مستخدم. بدلاً من كتابة نفس الكود في كل مكان، React يعطيك مفهوم المكونات. كل جزء يصبح مكوّنًا مستقلاً يمكن إعادة استخدامه بسهولة.

هذا الدرس سيجعل فكرة Component واضحة جدًا: متى تحتاجه، وكيف تكتبه بأبسط شكل، وكيف تستعمله أكثر من مرة بدون تكرار.

ما هو Component في React؟

الـ Component هو جزء صغير من واجهة المستخدم. قد يكون زرًا، بطاقة، شريط تنقل، أو حتى صفحة كاملة. الفكرة: تقسيم الواجهة إلى قطع صغيرة منظمة بدل ملف واحد ضخم.

التعريف البسيط: Component = جزء مستقل من الواجهة يمكنك إعادة استخدامه في أي مكان.

ما هو Functional Component في React؟

هو أبسط نوع من المكونات في React. عبارة عن دالة JavaScript تُرجع JSX. في المشاريع الحديثة، هذا هو الأسلوب الأساسي للكتابة.

function Welcome() {
  return <h1>أهلاً بك!</h1>;
}

export default Welcome;

مثال عملي على Functional Component (بطاقة مستخدم)

function UserCard() {
  return (
    <div className="card">
      <h3>Ahmed Ali</h3>
      <p>Front-End Developer</p>
    </div>
  );
}

export default UserCard;

لاحظ كيف أن الكود واضح ومقسّم. في المشاريع الكبيرة، هذا الأسلوب يحافظ على التنظيم ويقلل الفوضى.

لماذا المكونات مهمة في مشاريع React؟

• تكرار أقل: تكتب المكوّن مرة وتستخدمه في أكثر من مكان.
• صيانة أسهل: تعديل المكوّن ينعكس مباشرة في كل الصفحات.
• قراءة أسرع: كل ملف يمثل جزءًا واضحًا من الواجهة.

كيفية استخدام Component داخل Component آخر

import UserCard from "./UserCard";

function App() {
  return (
    <div>
      <UserCard />
      <UserCard />
    </div>
  );
}

export default App;

بهذه الطريقة يمكنك إعادة استخدام نفس المكوّن أكثر من مرة بدون إعادة كتابة الكود.

أخطاء شائعة عند إنشاء Components في React

• بدء الاسم بحرف صغير: React سيعتبره عنصر HTML.
• نسيان التصدير: يجب استخدام export default أو export.
• إرجاع أكثر من عنصر بلا غلاف: استخدم عنصرًا واحدًا أو Fragment.

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

ما هو Component في React؟

هو جزء مستقل من الواجهة يمكن إعادة استخدامه في أكثر من مكان.

ما الفرق بين Functional و Class Component؟

Functional أبسط ويعتمد على Hooks، بينما Class أسلوب قديم نادر الاستخدام حالياً.

لماذا نستخدم المكونات في React؟

لتقسيم الواجهة إلى أجزاء صغيرة قابلة لإعادة الاستخدام، مما يسهل التطوير والصيانة.

هل يمكن كتابة أكثر من Component في نفس الملف؟

نعم يمكن، لكن الأفضل غالباً فصل المكونات الكبيرة في ملفات مستقلة لتنظيم أفضل.

لماذا يجب أن يبدأ اسم Component بحرف كبير؟

لأن React يميز بين عناصر HTML والمكونات المخصصة عبر الحرف الكبير.

هل Functional Components هي الأفضل دائماً؟

في أغلب المشاريع الحديثة نعم، لأنها أبسط وتعمل مع Hooks، بينما Class Components نادرة الآن.