بنية و صيغة أنواع المكونات (Component Types/Syntax) في مكتبة React

السلام عليكم ورحمة الله، 

عدنا لكم من جديد بعد سلسلة بدأنا كتابتها حول تعلم و فهم مكتبة React، اذا كنت جديداً معنا يمكنك العودة للمقال السابق الذي افتتحنا به مجلسنا يتحدث حول مفهوم JSX:

درس اليوم هام و جديد كلياً ، قلّما تجد الدورات الأجنبية تركّز عليه و تبسّطه للمتعلمين، لأنه بصراحة يحتاج الى شخص لديه تجربة سابقة بـالجافاسكربت و OOP و ES6، اذا كنت غير دارس لأحد أهمّ هذه المحطات الثلاث فلا أنصحك باكمال قراءة المقال لأنه سيكون مبهماً  غير واضح. لنبدأ:

أنواع المكونات (Component)

الفرق يا أخي العزيز أنه في مكتبة الرياكت يوجد صنفين لكتابة المكونات (Components)  - هم غير موجودين بالأساس لكن المبتدأ لازم يفهم - النوع الأول يسمى : 

1. مكونات رياكت مبسّطة (Simple React components)
2. مكونات رياكت مركّبة (Complex React components)

- في مكونات رياكت البسيطة [1] يمكنك من : 

• ادخال معلومات مباشرة (hardcoded) أو ثابتة (static) على شكل صيغة HTML. 
• استرجاع معلومات حيوية بسيطة مسترجعة من قاعدة بيانات محلية في شكل جيسون (JSON data)
• يمكنك دمجها في عدة مكونات أخرى و تركيبها في بعضها البعض.

- في مكونات رياكت مركّبة [2] :

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

• استعمال العمليات المنطقية و الدوال البرمجية المتعلقة بادخال و اخراج و تنظيم المعلومات.
• استعمال الدالة الخاصة بتغير الحالات (State).
• اضافة أساليب دورة الحياة (lifecycle).
• اضافة أساليبك الخاصة (custom methods) التي تود تشغيلها حيثما أردت أنت مثلاً، كالضغط على الأيقونة اظهار واجهة ما ..الخ.

هذا كل ما تحتاجه لمعرفة المكونات، و الآن أصبحت لديك نظرة شاملة حول مفهومها و دواعي استعمالها. لننتقل الى خطوة أكبر ? 

صيغة بنية المكوّن (Component Syntax)

غريبة هذه الجملة صح! يا عبدالهادي ما هذه الترجمة اللفظية غير واضحة ؛ بنية و صيغة و مكوّن! ايش الفرق يعني .. ?

- في مكونات رياكت البسيطة و الأصح تدعى بتسميتها الصحيحة بـ المشردة (stateless) :

// Simple (stateless) React component
const Headline = () => {
    return <h1>React Cheat Sheet</h1>
}

في هذه الشفرة المبسطة، كما أخبرتكم أنها تعود بصيغة HTML فقط! لاحظ أنها تعود بجملة ذات عنوان عريض (H1). 

كما يمكنك ادخال عدة مكونات بسيطة تلو بعضها كـ : 

// Component must only return ONE element (eg. DIV)
const Intro = () => {
    return <div>
        <Headline />
        <p>Welcome to the React world!</p>
    </div>
}
 
const Intro = () => {
    return (
        <div>
            <Headline />
            <p>Welcome to the React world!</p>
        </div>
    )
}
 
const Intro = () => (
    <div>
        <Headline />
        <p>Welcome to the React world!</p>
    </div>
)

ماذا تلاحظ في المثال السابق! المثال الأول/الثاني و الثالث مختلف عن بعضه، الفرق أننا استعملنا نهاية الأول و الثاني بقوسين معكوفتين {} و الأخير بقوسين () و كلاهما يؤديان نفس الغرض. فقط الاختلاف أننا نسهل من قراءة الشفرة البرمجية و نكتفي بعدم استعمال دالة العودة (return). 

- في مكونات رياكت المركبة (المتقدمة) تدعى بــ  (ES6 classes) و تسمى أيضاً بـ الذكية.

class App extends React.Component {
    render() {
        return (
            <h1>React Cheat Sheet</h1>
        )
    }
}

الشفرة السابقة شفرة بسيطة تؤدي نفس غرض المكوّن البسيط (stateless) لكن لا حاجة لنا بهذا، نود استعمال تعليمات منطقية أكبر، و من ضمنها دالة البناء (constructor) و دالة الحالة (State) لنتقدم أكثر و أكثر ..

class App extends React.Component {
 
    // fires before component is mounted
    constructor(props) {
 
        // makes this refer to this component
        super(props);
 
        // set local state
        this.state = {
            date: new Date()
        };
 
    }
 
    render() {
        return (
            <h1>
                It is {this.state.date.toLocaleTimeString()}.
            </h1>
        )
    }
}

تعقدت الشفرة قليلاً، لا عليك كل ما في الأمر أننا استعملنا مكوّن يعطينا الوقت الحالي كل لحظة بالوقت الحقيقي (Real Time). حيث:

• أضفنا البناء (constructor) معها super() لنجعل كل حدث يشير إلى هذا المكون و يجب حتما استعماله في صيغة ES6. 
• قمنا بتعريف الحالات المتغيرة (local state) و قيمتها المبدئية : دالة التاريخ.
• أعدنا في دالة العودة (return) بارجاع قيمة التاريخ المتغيرة كل حين بدالة this.state مرفقة باسم المتغير Date و خاصيته toLocaleTimeString() . 

وصلنا لنهاية موضوع اليوم، في المقال القادم انتظرنا بحول الله سنتعمق في دالة الحالة (State) المتغيرة و دالة (Props)  و كيف أنها ستفيدنا في كتابة المشاريع البرمجية و تطبيقات SPA.

أتمنى أن تكون المعلومة قد وصلت، كان معكم أخوكم عبدالهادي من الجزائر.

(المقال هذا نُقلت أجزائه و شفراته البرمجية بتصرفي من مقال أجنبي سمح لي صاحبه بأخذه جَعله تحت رخصة مجانية).