المكونات (Components): سر قوة React في تفكيك الواجهة إلى قطع قابلة لإعادة الاستخدام

ماذا سنتعلم اليوم؟ سنتعمق في فهم المكونات (Components) في React، وكيف تمكننا من بناء واجهات مستخدم معيارية وقابلة لإعادة الاستخدام، مما يسهل تطوير وصيانة التطبيقات.

سنتعلم كيفية تعريف المكونات، تمرير البيانات إليها باستخدام الخصائص (Props)، وكيفية تجميعها لبناء واجهة مستخدم كاملة وفعالة.

الخطوة 1: تعريف أول مكون لنا (Functional Component)

في React، المكونات هي دوال JavaScript بسيطة تعيد عناصر React (JSX). لنبدأ بإنشاء مكون يعرض رسالة ترحيب بسيطة.

المكونات الوظيفية (Functional Components) هي الطريقة الحديثة والمفضلة لتعريف المكونات في React، خاصة مع ظهور الـ Hooks.

import React from 'react'; // استيراد مكتبة React الضرورية

// تعريف مكون وظيفي بسيط
function GreetUser() {
  return <h1>أهلاً بك في عالم React!</h1>; // المكون يعيد عنصر JSX (عنوان)
}

في هذا الجزء، قمنا بتعريف دالة GreetUser التي تعيد JSX. هذا هو جوهر أي مكون في React.

الخطوة 2: تمرير البيانات باستخدام الخصائص (Props)

المكونات تصبح أكثر فائدة عندما يمكنها استقبال بيانات ديناميكية. يتم ذلك عبر "الخصائص" (Props)، والتي تشبه سمات HTML ولكن للمكونات. لنعدّل مكوننا ليأخذ اسم المستخدم كخاصية.

الـ Props هي للقراءة فقط (Read-Only). لا يجب تعديل الـ Props داخل المكون الذي يستقبلها.

import React from 'react';

// تعديل المكون ليقبل خاصية 'name'
function GreetUser(props) { // المكون يستقبل كائن 'props'
  return <h1>أهلاً بك يا {props.name} في عالم React!</h1>; // استخدام الخاصية 'name'
}

الآن، يمكننا تمرير اسم مختلف لكل مرة نستخدم فيها المكون GreetUser، مما يجعله قابلاً لإعادة الاستخدام بشكل كبير.

الخطوة 3: تجميع المكونات وبناء واجهة مستخدم

القوة الحقيقية لـ React تكمن في تجميع المكونات الصغيرة لبناء مكونات أكبر وأكثر تعقيدًا. لننشئ مكونًا رئيسيًا يسمى App يستخدم مكون GreetUser عدة مرات.

كل تطبيق React يبدأ عادةً بمكون جذري واحد (Root Component)، وغالبًا ما يكون اسمه App.

import React from 'react';
import ReactDOM from 'react-dom/client'; // استيراد ReactDOM لربط التطبيق بالـ DOM

// المكون GreetUser (من الخطوة 2)
function GreetUser(props) {
  return <h1>أهلاً بك يا {props.name} في عالم React!</h1>;
}

// المكون الرئيسي الذي يجمع المكونات الأخرى
function App() {
  return (
    <div> {/* يجب أن تعيد المكونات عنصراً واحداً (أو جزءاً) */}
      <GreetUser name="أحمد" /> {/* استخدام المكون مع خاصية 'name' */}
      <GreetUser name="فاطمة" /> {/* استخدام آخر لنفس المكون */}
      <GreetUser name="علي" />
      <p>هذا يوضح قوة إعادة استخدام المكونات.</p>
    </div>
  );
}

// ربط المكون الجذري 'App' بعنصر الـ DOM الذي يحمل الـ ID 'root'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

في هذه الخطوة، قمنا بإنشاء مكون App يستخدم GreetUser ثلاث مرات بأسماء مختلفة، مما يوضح كيف يمكننا بناء واجهات مستخدم معقدة من مكونات بسيطة.

الكود النهائي الكامل

إليك الكود الكامل الذي يمكنك استخدامه في مشروع React (مثلاً في ملف src/index.js أو src/App.js مع التعديلات اللازمة).

import React from 'react';
import ReactDOM from 'react-dom/client';

// 1. تعريف مكون وظيفي بسيط يستقبل خاصية 'name'
function GreetUser(props) {
  // المكون يعيد عنصر JSX يستخدم قيمة الخاصية 'name'
  return <h1>أهلاً بك يا {props.name} في عالم React!</h1>;
}

// 2. المكون الرئيسي (Root Component) الذي يجمع المكونات الأخرى
function App() {
  return (
    <div> {/* يجب أن تعيد المكونات عنصراً واحداً (أو جزءاً) */}
      <h2>تطبيق ترحيب بسيط باستخدام مكونات React</h2>
      <GreetUser name="أحمد" /> {/* استخدام المكون GreetUser مع خاصية 'name' */}
      <GreetUser name="فاطمة" /> {/* استخدام آخر لنفس المكون GreetUser */}
      <GreetUser name="علي" />   {/* استخدام ثالث لنفس المكون GreetUser */}
      <p>لقد قمنا بتفكيك واجهة المستخدم إلى مكونات قابلة لإعادة الاستخدام.</p>
    </div>
  );
}

// 3. ربط المكون الجذري (App) بعنصر الـ DOM
// هذا يفترض وجود عنصر <div id="root"></div> في ملف index.html
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode> {/* React.StrictMode يساعد في الكشف عن المشاكل المحتملة */}
    <App />
  </React.StrictMode>
);

النتيجة المتوقعة

عند تشغيل هذا الكود في متصفحك (بعد إعداد بيئة React بسيطة مثل Create React App)، سترى النص التالي معروضاً على الشاشة:

تطبيق ترحيب بسيط باستخدام مكونات React
أهلاً بك يا أحمد في عالم React!
أهلاً بك يا فاطمة في عالم React!
أهلاً بك يا علي في عالم React!
لقد قمنا بتفكيك واجهة المستخدم إلى مكونات قابلة لإعادة الاستخدام.

هذا يوضح كيف يمكن للمكونات أن تبسط عملية بناء الواجهات المعقدة وتجعلها أكثر قابلية للإدارة والصيانة.

← السابقالفهرسالتالي →