مرحبًا بك مرة أخرى في رحلتنا إلى React.js! في منشورنا السابق، قدمنا ​​أساسيات React، وسلطنا الضوء على نقاط قوتها كمكتبة لبناء واجهات مستخدم ديناميكية. سنتعمق اليوم في ثلاثة مفاهيم أساسية ضرورية لإنشاء تطبيقات React: المكونات، والحالة، والدعائم. دعونا نستكشف هذه المفاهيم بالتفصيل!

ما هي مكونات رد الفعل؟

مكونات React هي اللبنات الأساسية لأي تطبيق React. إنها أجزاء قابلة لإعادة الاستخدام من التعليمات البرمجية التي تحدد كيف يجب أن يبدو ويتصرف جزء معين من واجهة المستخدم. يمكن اعتبار المكونات عناصر HTML مخصصة، وهي تأتي في نوعين رئيسيين: المكونات الوظيفية ومكونات الفئة.

1. المكونات الوظيفية
المكونات الوظيفية هي وظائف JavaScript بسيطة تُرجع عناصر React. غالبًا ما يتم تفضيلها لبساطتها وسهولة قراءتها.

مثال للمكون الوظيفي:

function Greeting(props) {
    return 
Hello, {props.name}!
;
}

2. مكونات الفئة
مكونات الفصل أكثر تعقيدًا. يتم تعريفها على أنها فئات ES6 التي تمتد من React.Component. يمكن لمكونات الفئة أن تحتفظ بحالتها الخاصة وتستخدم أساليب دورة الحياة.

مثال لمكون الفصل:

class Greeting extends React.Component {
    render() {
        return 
Hello, {this.props.name}!
;
    }
}

لماذا نستخدم المكونات؟

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

فهم الدعائم

الدعائم (اختصار للخصائص) هي آلية لتمرير البيانات من مكون إلى آخر. وهي غير قابلة للتغيير، مما يعني أن المكون لا يمكنه تعديل الدعائم الخاصة به.

استخدام الدعائم
يمكنك تمرير الدعائم إلى مكون تمامًا مثلما تقوم بتمرير السمات إلى عنصر HTML.

مثال على تمرير الدعائم:

function App() {
    return ;
}

في هذا المثال، يعرض مكون التطبيق مكون الترحيب، ويمرر خاصية الاسم بالقيمة "John".

الوصول إلى الدعائم
داخل المكون، يمكن الوصول إلى الدعائم عبر كائن الدعائم.

مثال للوصول إلى الدعائم:

function Greeting(props) {
    return 
Hello, {props.name}!
;
}

إدارة الدولة

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

استخدام الحالة في المكونات الوظيفية
في المكونات الوظيفية، يمكنك استخدام useStatehook لإدارة الحالة.

مثال على استخدام useStateHook:

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0); // Initialize state

    return (
        

            
Count: {count}
             setCount(count   1)}>Increment
        
    );
}

في هذا المثال، useState يقوم بتهيئة متغير الحالة count إلى 0، وsetCount هي دالة تقوم بتحديث الحالة

استخدام مكونات الحالة في الفصل

في مكونات الفئة، تتم إدارة الحالة باستخدام كائن this.state وأسلوب setState.

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

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 }; // Initialize state
    }

    increment = () => {
        this.setState({ count: this.state.count   1 }); // Update state
    }

    render() {
        return (
            

                
Count: {this.state.count}
                Increment
            
        );
    }
}

الدولة مقابل الدعائم

• الحالة: تتم إدارتها داخل المكون. يمكن أن يتغير بمرور الوقت، وعادةً ما يكون ذلك استجابةً لإجراءات المستخدم.
• الدعائم: تم تمريرها إلى المكون بواسطة أحد الوالدين. غير قابل للتغيير داخل المكون.

في هذا المنشور، استكشفنا المفاهيم الأساسية لـ React: المكونات والحالة والدعائم. لقد تعلمنا أن المكونات تعمل بمثابة اللبنات الأساسية لتطبيقات React، مما يتيح إمكانية إعادة الاستخدام وتنظيم التعليمات البرمجية بشكل أفضل. توفر المكونات الوظيفية البساطة والوضوح، بينما توفر مكونات الفئة ميزات إضافية مثل أساليب الحالة ودورة الحياة.

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

أخيرًا، ناقشنا الحالة، وهي جانب حاسم في React يمكّن المكونات من إدارة تفاعلات المستخدم والاستجابة لها. بمساعدة الخطاف useState في المكونات الوظيفية والأسلوب setState في مكونات الفئة، يمكن للمطورين إنشاء تطبيقات تفاعلية تعكس التغييرات في البيانات بمرور الوقت.

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