مكونات React الوظيفية، الخصائص (Props)، و JSX: دليل المبتدئين الشامل

مقدمة إلى React: بناء واجهات المستخدم الحديثة

تُعد React واحدة من أشهر مكتبات JavaScript لبناء واجهات المستخدم التفاعلية والفعالة. إذا كنت تطمح لتصبح مطور واجهات أمامية (Front-end Developer) أو تبحث عن وظيفة في تطوير الويب، فإن إتقان React بعمق سيضيف قيمة كبيرة لمسيرتك المهنية. في هذا المقال، سنتناول أساسيات React التي لا غنى عنها، مثل إنشاء المكونات (Components)، وفهم بناء جملة JSX، وكيفية استخدام الخصائص (Props) لتمرير البيانات بين المكونات. هذا الدليل موجه خصيصًا للمبتدئين أو ذوي الخبرة المحدودة في React، ليمكنهم من الانطلاق بثقة في عالم تطوير الويب الحديث.

ما هو JSX؟ تبسيط كتابة الواجهات في React

أول ما ستلاحظه بعد إعداد مشروعك الأول في React هو أن دالة JavaScript تقوم بإرجاع شيفرة HTML. هذا قد يبدو غير مألوف في البداية، ولكنه جوهر JSX:

 function App ( ) {
  return (
    <div className = "App" >
      <header className = "App-header" >
        <img src = {logo} className = "App-logo" alt = "logo" />
        <p > Edit <code > src/App.js </ code > and save to reload. </ p >
      </header >
    </div >
  );
}

هذا هو امتداد بناء جملة خاص وصالح لـ React يُعرف باسم JSX (JavaScript XML). عادةً في مشاريع الواجهة الأمامية، نفصل شيفرات HTML و CSS و JavaScript في ملفات منفصلة. لكن في React، يختلف الأمر قليلًا. لا نقوم بإنشاء ملفات HTML منفصلة في مشاريع React، لأن JSX يتيح لنا كتابة HTML و JavaScript معًا في نفس الملف، كما هو موضح في المثال أعلاه. ومع ذلك، يمكنك فصل شيفرة CSS الخاصة بك في ملف آخر لترتيب أفضل.

قد يبدو JSX غريبًا بعض الشيء في البداية، لكن لا تقلق، ستعتاد عليه سريعًا وستكتشف مدى قوته. يتميز JSX بكونه عمليًا للغاية، حيث يمكننا تنفيذ أي شيفرة JavaScript (منطق، دوال، متغيرات، وما إلى ذلك) مباشرة داخل HTML باستخدام الأقواس المعقوفة {}، على النحو التالي:

 function App ( ) {
  const text = 'Hello World' ;
  return (
    <div className = "App" >
      <p > {text} </ p >
    </div >
  );
}

يمكنك أيضًا إسناد وسوم HTML إلى متغيرات JavaScript، مما يمنحك مرونة أكبر في التعامل مع العناصر:

 const message = <h1 > React is cool! </h1 > ;

أو يمكنك إرجاع HTML ضمن منطق JavaScript (مثل حالات if-else)، مما يسمح بإنشاء واجهات مستخدم شرطية:

render() {
  if ( true ) {
    return <p > YES </p > ;
  } else {
    return <p > NO </p > ;
  }
}

لن نتعمق أكثر في تفاصيل JSX، لكن تأكد من مراعاة القواعد التالية عند كتابته لضمان شيفرة صحيحة وفعالة:

• يجب دائمًا إغلاق وسوم HTML والمكونات (مثل <Component /> أو <div></div>).
• تتحول بعض السمات مثل "class" إلى "className" (لأن class تشير إلى فئات JavaScript)، و "tabindex" تصبح "tabIndex"، ويجب كتابتها بأسلوب camelCase.
• لا يمكننا إرجاع أكثر من عنصر HTML واحد في نفس الوقت من دالة مكون، لذا تأكد من تغليفها داخل وسم أب (Parent Tag) واحد:

 return (
  <div >
    <p > Hello </p >
    <p > World </p >
  </div >
);

• أو كبديل، يمكنك تغليفها بوسوم فارغة (Empty Tags) والمعروفة بـ Fragments:

 return (
  <>
    <p > Hello </p >
    <p > World </p >
  </>
);

المكونات الوظيفية والفئوية: اللبنات الأساسية لتطبيقات React

بعد الاعتياد على بناء جملة JSX، الخطوة التالية هي فهم الهيكل القائم على المكونات (Component-based structure) في React. إذا عدت إلى مثال الشيفرة في بداية هذا المقال، ستلاحظ أن شيفرة JSX يتم إرجاعها بواسطة دالة. لكن الدالة App() ليست دالة عادية؛ إنها في الواقع مكون (Component).

ما هو المكون (Component)؟

المكون هو كتلة شيفرة مستقلة وقابلة لإعادة الاستخدام، تقسم واجهة المستخدم إلى أجزاء أصغر وأكثر قابلية للإدارة. على سبيل المثال، إذا كنا نبني واجهة مستخدم تويتر باستخدام React، يمكننا تقسيمها كالتالي:

توضح الصورة أعلاه مكونات صفحة الأخبار في تويتر. بدلًا من بناء واجهة المستخدم بأكملها في ملف واحد ضخم، يمكننا ويجب علينا تقسيم جميع الأقسام (المحددة باللون الأحمر) إلى أجزاء مستقلة أصغر. بعبارة أخرى، هذه هي المكونات. لدى React نوعان رئيسيان من المكونات: وظيفية (Functional) وفئوية (Class). دعنا نلقي نظرة على كل منهما بمزيد من التفصيل.

المكونات الوظيفية (Functional Components)

النوع الأول والموصى به من المكونات في React هو المكونات الوظيفية. المكون الوظيفي هو أساسًا دالة JavaScript/ES6 بسيطة تُرجع عنصر React (JSX). وفقًا للوثائق الرسمية لـ React، الدالة التالية هي مكون وظيفي صالح:

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

بدلًا من ذلك، يمكنك أيضًا إنشاء مكون وظيفي باستخدام تعريف دالة السهم (Arrow Function)، وهو أسلوب شائع في JavaScript الحديثة:

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

للاستفادة من المكون لاحقًا في أجزاء أخرى من تطبيقك، تحتاج أولًا إلى تصديره (export) حتى تتمكن من استيراده (import) في ملفات أخرى:

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

بعد استيراده، يمكنك استدعاء المكون واستخدامه في مكونات أخرى كما في هذا المثال:

 import Welcome from './Welcome' ;

 function App ( ) {
  return (
    <div className = "App" >
      <Welcome />
    </div >
  );
}

باختصار، المكون الوظيفي في React:

• هو دالة JavaScript/ES6.
• يجب أن يُرجع عنصر React (JSX).
• يبدأ دائمًا بحرف كبير (اتفاقية تسمية لتمييزه عن عناصر HTML العادية).
• يأخذ props كمعامل إذا لزم الأمر لتلقي البيانات.

المكونات الفئوية (Class Components)

النوع الثاني من المكونات هو المكون الفئوي. المكونات الفئوية هي فئات ES6 تُرجع JSX. أدناه، ترى نفس دالة Welcome الخاصة بنا، ولكن هذه المرة كمكون فئوي:

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

على عكس المكونات الوظيفية، يجب أن تحتوي المكونات الفئوية على طريقة render() إضافية لإرجاع JSX، وهي الطريقة المسؤولة عن تحديد ما سيتم عرضه على الشاشة.

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

كنا نستخدم المكونات الفئوية بشكل أساسي بسبب “الحالة” (state). في الإصدارات القديمة من React (قبل الإصدار 16.8)، لم يكن من الممكن استخدام الحالة داخل المكونات الوظيفية. لذلك، كنا نحتاج إلى المكونات الوظيفية لعرض واجهة المستخدم فقط، بينما نستخدم المكونات الفئوية لإدارة البيانات وبعض العمليات الإضافية (مثل طرق دورة الحياة – lifecycle methods). لقد تغير هذا مع إدخال React Hooks، والآن يمكننا أيضًا استخدام الحالات في المكونات الوظيفية، مما جعل المكونات الوظيفية الخيار المفضل في معظم الحالات الحديثة.

باختصار، المكون الفئوي:

• هو فئة ES6، ويصبح مكونًا بمجرد أن extends (يرث من) React.Component.
• يأخذ Props (في المُنشئ constructor) إذا لزم الأمر.
• يجب أن يحتوي على طريقة render() لإرجاع JSX.

ما هي الخصائص (Props) في React؟

مفهوم آخر مهم للمكونات هو كيفية تواصلها وتبادل البيانات بينها. لدى React كائن خاص يسمى prop (اختصار لـ property – خاصية) نستخدمه لنقل البيانات من مكون أب إلى مكون ابن. لكن كن حذرًا – props تنقل البيانات في تدفق أحادي الاتجاه فقط (من المكون الأب إلى المكونات الأبناء فقط). لا يمكن باستخدام props تمرير البيانات من الابن إلى الأب، أو إلى المكونات الموجودة في نفس المستوى.

دعنا نعود إلى دالة App() أعلاه لنرى كيفية تمرير البيانات باستخدام props. أولًا، نحتاج إلى تعريف prop على المكون Welcome وتعيين قيمة له مباشرة كسمة HTML:

 import Welcome from './Welcome' ;

 function App ( ) {
  return (
    <div className = "App" >
      <Welcome name = "John" />
      <Welcome name = "Mary" />
      <Welcome name = "Alex" />
    </div >
  );
}

الـ Props هي قيم مخصصة وتجعل المكونات أكثر ديناميكية وقابلية لإعادة الاستخدام. بما أن المكون Welcome هو المكون الابن هنا، فقد قمنا بتعريف props على المكون الأب (App)، حتى نتمكن من تمرير القيم والحصول على النتيجة ببساطة عن طريق الوصول إلى الـ prop الذي يحمل الاسم "name" داخل المكون الابن:

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

تُعد Props مفيدة للغاية، ويستخدمها مطورو React لتمرير البيانات بشكل فعال. ومع ذلك، من المهم أن نتذكر أن Props تُستخدم لتمرير البيانات، وليس لمعالجتها أو تغييرها داخل المكون الابن. لإدارة البيانات وتغييرها (الحالة)، توجد مفاهيم أخرى في React سنتناولها في مقالات لاحقة.

الخلاصة التقنية

في هذا الدليل الشامل، استكشفنا الأساسيات الجوهرية لمكتبة React التي تُعد حجر الزاوية في تطوير واجهات المستخدم الحديثة. لقد تعرفنا على JSX كجسر يربط بين شيفرات HTML و JavaScript، مما يبسط عملية بناء الواجهات التفاعلية. كما تعمقنا في فهم المكونات، وهي اللبنات الأساسية التي تمكننا من تقسيم واجهة المستخدم إلى أجزاء مستقلة وقابلة لإعادة الاستخدام، مع التركيز على الفروقات بين المكونات الوظيفية والفئوية وأهمية كل منها في سياقات مختلفة. أخيرًا، سلطنا الضوء على مفهوم Props، وكيفية استخدامها لنقل البيانات بشكل أحادي الاتجاه من المكونات الأب إلى الأبناء، مما يضمن تدفقًا واضحًا ومنظمًا للبيانات داخل التطبيق. إتقان هذه المفاهيم الثلاثة – JSX، المكونات، و Props – هو خطوتك الأولى نحو بناء تطبيقات React قوية ومرنة.