Reactالمكونات

مفهوم المكوّن في React

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

بشكل عام أي جزئية سيتم إضافتها في واجهة المستخدم يتم بناؤها كمكوّن و من بعدها يتم عرضها في المكان المناسب كما يلي.

مثال

فائدة المكونات في React

بناء محتوى واجهة المستخدم في عالم الويب يتطلب كتابة آلاف الأسطر البرمجية و التي سيكون جزء منها بلغة HTML و جزء بلغة CSS و جزء بلغة JavaScript و كلها في النهاية يتم ربطها مع بعضها البعض.

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

ربط المكونات في React

في React يتم ربط مكونات واجهة المستخدم ببعضها البعض بشكل شجري كما يلي.

إفتراضياً، أعلا مكوّن في المشروع إسمه <App/> مما يعني أن جميع مكونات الصفحة يجب أن تضاف تحته.
هذا المكوّن يكون موجود في المشروع بداخل المجلد src في ملف إسمه App.js.

إنشاء مكوّن في React

المكون في React يمكن تعريفه على شكل كلاس ( Class Component ) أو على شكل دالة ( Function Component ).

بناء المكوّن ككلاس

لبناء كلاس يمثّل مكوّن فإنه يجب فعل ما يلي:

1. تضمين الحزمة import React from 'react'
2. تعريف كلاس ليمثل المكوّن مع جعله يرث من الكلاس React.Component
3. بداخل الكلاس، يجب استدعاء الدالة render() و جعلها ترجع محتوى المكوّن.

import React from 'react';

class Demo extends React.Component {
    render() {
        return <h1>Demo Component</h1>;
    }
}

بناء المكوّن كدالة

بناء دالة تمثّل مكوّن أمر أسهل بكثير، فلو أردنا بناء المكّون السابق كدالة فإن الكود سيصبح كما يلي.

function Demo() {
    return <h1>Demo Component</h1>;
}

عرض المكوّن في React

بدايةً، حتى يكون مشروعك منظّم ننصحك بالتوجه إلى المجلد src و إنشاء مجلد إسمه components فيه لكي تضع جميع المكونات التي تنشئها مستقبلاً بداخله. هكذا ستصبح جميع مكونات المشروع مرتبة في مكان واحد.

أي مكوّن جديد ستنشئه في المشروع، قم بوضعه بداخل ملف خاص إمتداده .js و بنفس إسم المكوّن.

في المثال التالي قمنا بإنشاء مكوّن جديد إسمه <Demo> و من ثم عرضنا محتواه بداخل المكوّن <App>.

// Demo هنا قمنا بتعريف دالة تمثل مكون إسمه
function Demo() {
    return (
        <div>
            <h2>Demo Component</h2>
            <p>The demo component is exists in Demo.js</p>
        </div>
    );
}

// يمكن الوصول إليه من خارج هذا الملف Demo هنا قمنا بجعل المكون
export default Demo;

// Demo.js الموجود في الملف Demo هنا قمنا بتضمين المكون
import Demo from "./components/Demo";

// فقط <Demo/> قمنا بعرض المكون <App> بداخل المكون
function App() {
    return (
        <Demo/>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;