المكونات (Components) في React

الدرس الثاني: المكونات (Components) في React

في هذا الدرس، سنتعرف على المكونات (Components) في React. المكونات هي البنية الأساسية لبناء تطبيقات React، حيث تقوم بتقسيم واجهة المستخدم إلى أجزاء صغيرة وقابلة لإعادة الاستخدام. سنغطي كيفية إنشاء المكونات باستخدام function components و class components، وسنوضح الفرق بينهما. كما سنتعرف على كيفية استخدام props في المكونات لنقل البيانات بين المكونات.

1. ما هي المكونات (Components)؟

المكونات (Components) هي اللبنات الأساسية في React. كل جزء من واجهة المستخدم (مثل الأزرار، القوائم، النماذج) يتم تمثيله بواسطة مكون. يمكن أن تكون المكونات مكونات دالة (Function Components) أو مكونات كلاس (Class Components).

المكونات تقوم بتقسيم الواجهة إلى أجزاء صغيرة، ويمكن أن تحتوي على حالة (State) و خصائص (Props) تساعد في بناء تطبيق تفاعلي.

أنواع المكونات في React:

• Function Components: مكونات بسيطة تعتمد على الدوال.
• Class Components: مكونات تعتمد على الـ Classes وتدعم خصائص مثل state و lifecycle methods.

2. إنشاء المكونات باستخدام function و class

المكونات باستخدام دالة (Function Components)

مكونات الدالة هي أبسط أنواع المكونات في React. يتم تعريفها باستخدام دالة JavaScript عادية وتقوم بإرجاع JSX (تعبير JavaScript يُشبه HTML).

مثال على مكون دالة:

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Welcome;

الشرح:

• function Welcome(props): تعريف مكون دالة يسمى Welcome، والذي يقبل props كوسيط.
• return <h1>Hello, {props.name}!</h1>: يقوم المكون بإرجاع JSX (وهو عبارة عن HTML ولكن داخل JavaScript). هنا نعرض نصًا يحتوي على قيمة name الممررة عبر props.

المكونات باستخدام كلاس (Class Components)

مكونات الكلاس كانت الطريقة الرئيسية لإنشاء مكونات في React قبل تقديم Hooks في React 16.8. تتطلب مكونات الكلاس تعريف الكلاس باستخدام React.Component.

مثال على مكون كلاس:

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Welcome;

الشرح:

• class Welcome extends Component: تعريف مكون كلاس يسمى Welcome، والذي يرث من Component.
• render(): الطريقة الأساسية في مكونات الكلاس التي تُرجع JSX.
• this.props.name: هنا نستخدم this.props للوصول إلى الخصائص الممررة إلى المكون.

3. الفرق بين المكونات function components و class components

الميزة	Function Components	Class Components
تعريف المكون	يتم باستخدام دالة JavaScript.	يتم باستخدام كلاس يرث من React.Component.
الحالة (State)	لا تدعم الحالة (قبل Hooks) ولكن يمكن استخدام useState في Hooks.	تدعم الحالة عبر this.state و this.setState.
دورة الحياة (Lifecycle)	لا تدعم مباشرة، ولكن يمكن استخدام useEffect (قبل React 16.8).	تدعم دورة الحياة عبر طرق مثل componentDidMount().
المرونة	أكثر بساطة وأقل تعقيدًا.	تحتوي على مزيد من الخصائص مثل دورة الحياة.
الأداء	أسرع في العادة لأنه لا يتطلب إنشاء كائن جديد في الذاكرة.	أبطأ قليلاً من مكونات الدالة بسبب تعقيد الكلاس.

4. كيفية استخدام props في المكونات

Props هي خصائص يتم تمريرها إلى المكونات من المكونات العليا (Parent Components) لتمرير البيانات أو الوظائف إلى المكونات السفلى (Child Components). Props هي طريقة لجعل المكونات أكثر ديناميكية وقابلة لإعادة الاستخدام.

مثال على استخدام props في مكون دالة:

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

استخدام مكون Greeting في مكون أب:

import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="John" />
      <Greeting name="Jane" />
    </div>
  );
}

export default App;

الشرح:

• في مكون Greeting، نستخدم props.name لعرض الاسم الممرر من المكون الأب.
• في مكون App، نقوم بتمرير قيمة مختلفة لخاصية name لكل مكون Greeting.

مثال على استخدام props في مكون كلاس:

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Greeting;

استخدام مكون Greeting في مكون أب:

import React, { Component } from 'react';
import Greeting from './Greeting';

class App extends Component {
  render() {
    return (
      <div>
        <Greeting name="John" />
        <Greeting name="Jane" />
      </div>
    );
  }
}

export default App;

الشرح:

• في مكون Greeting، نستخدم this.props.name لعرض الاسم الممرر من المكون الأب.
• في مكون App، نمرر قيمة name إلى مكون Greeting عبر props.

5. ملاحظات حول استخدام props

• Props هي قراءة فقط (read-only) في المكونات. لا يمكن تعديلها داخل المكون. إذا كنت بحاجة إلى تحديث البيانات، يجب استخدام state.
• Props يمكن أن تحتوي على أنواع مختلفة من البيانات مثل النصوص، الأرقام، الكائنات، المصفوفات، الدوال، والمزيد.

6. الختام

في هذا الدرس:

• تعلمنا ما هي المكونات في React وكيفية إنشائها باستخدام function components و class components.
• تعرفنا على الفرق بين function components و class components من حيث البساطة، الأداء، ودعم الحالة ودورة الحياة.
• تعلمنا كيفية استخدام props لتمرير البيانات من المكونات العليا إلى المكونات السفلى.

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