مكونات رد الفعل

المكونات هي مثل الوظائف التي تقوم بإرجاع عناصر HTML.

مكونات رد الفعل

المكونات مستقلة وقابلة لإعادة الاستخدام بتات من التعليمات البرمجية. إنها تخدم نفس الغرض مثل وظائف JavaScript ، ولكنها تعمل بمعزل عن ملفات HTML وتعيدها.

تأتي المكونات في نوعين ، مكونات الفئة ومكونات الوظيفة ، في هذا البرنامج التعليمي سنركز على مكونات الوظيفة.

قم بإنشاء المكون الأول الخاص بك

عند إنشاء مكون React ، يجب أن يبدأ اسم المكون بحرف كبير.

مكون الفصل

يجب أن يشتمل مكون الفصل على extends React.Componentالعبارة. تخلق هذه العبارة وراثة لـ React.Component ، وتمنح المكون الخاص بك وصولاً إلى وظائف React.Component.

يتطلب المكون أيضًا render()طريقة ، وتعيد هذه الطريقة HTML.

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

مكون الوظيفة

إليك نفس المثال أعلاه ، ولكن تم إنشاؤه باستخدام مكون دالة بدلاً من ذلك.

يقوم مكون الوظيفة أيضًا بإرجاع HTML ، ويتصرف بنفس الطريقة التي يتصرف بها مكون Class ، ولكن يمكن كتابة مكونات الوظيفة باستخدام رمز أقل بكثير ، ويسهل فهمها ، وسيتم تفضيلها في هذا البرنامج التعليمي.

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

تقديم مكون

الآن يحتوي تطبيق React الخاص بك على مكون يسمى Car ، والذي يقوم بإرجاع <h2>عنصر.

لاستخدام هذا المكون في تطبيقك ، استخدم بنية مشابهة مثل HTML العادي: <Car />

ReactDOM.render(<Car />, document.getElementById('root'));

الدعائم

يمكن تمرير المكونات كـ props، والتي تعني الخصائص.

تعتبر الدعائم مثل وسيطات الوظيفة ، ويمكنك إرسالها إلى المكون كسمات.

سوف تتعلم المزيد عنها propsفي الفصل التالي.

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

المكونات في المكونات

يمكننا الإشارة إلى المكونات الموجودة داخل المكونات الأخرى:

function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

المكونات في الملفات

يتمحور React حول إعادة استخدام التعليمات البرمجية ، ويوصى بتقسيم مكوناتك إلى ملفات منفصلة.

للقيام بذلك ، قم بإنشاء ملف جديد .js بامتداد ملف ووضع الكود بداخله:

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

export default Car;

لتتمكن من استخدام مكون السيارة ، يجب عليك استيراد الملف في التطبيق الخاص بك.

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));

function (props) {
  return <h2>Hi, I'm {props.name}</h2>;
}