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

1. هل React إطار عمل أم مكتبة؟

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

2. DOM الظاهري

يرمز DOM إلى Document Object Model بكلمات بسيطة تمثل واجهة المستخدم الخاصة بالتطبيق. في كل مرة نقوم فيها بتغيير واجهة المستخدم، يتم تحديث DOM لتمثيل هذا التغيير. يتم تمثيل DOM كبنية بيانات شجرة. عندما نغير واجهة المستخدم، يقوم DOM بإعادة عرض العناصر التابعة له وتحديثها. إعادة عرض واجهة المستخدم تجعل التطبيق بطيئًا.

لهذا الحل نستخدم Virtual DOM. DOM الافتراضي هو مجرد تمثيل افتراضي لـ DOM. عندما تتغير حالة التطبيق، يتم تحديث Virtual DOM بدلاً من DOM الحقيقي.

يقوم DOM الافتراضي في كل مرة بإنشاء شجرة ويتم تمثيل العناصر كعقدة. إذا تغير أي من العناصر، فسيتم إنشاء شجرة DOM افتراضية جديدة. ثم تتم مقارنة الشجرة الجديدة أو "تختلف" مع الشجرة السابقة.

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

في ملخص:

1. يتم تحديث DOM الافتراضي بالكامل.
2. تتم مقارنة DOM الافتراضي بالشكل الذي كان يبدو عليه قبل تحديثه. تكتشف React الكائنات التي تغيرت.
3. يتم تحديث الكائنات التي تم تغييرها، والكائنات التي تم تغييرها فقط، على DOM الحقيقي.
4. التغييرات على DOM الحقيقي تتسبب في تغيير الشاشة.

3. JSX

يسمح لك JSX (JavaScript XML) بكتابة تعليمات برمجية تشبه HTML في React. يقوم بتحويل علامات HTML إلى عناصر React باستخدام وظيفة React.createElement(component,props, …children).

على سبيل المثال:
رمز JSX:

  Hello, Good Morning!

يُترجم هذا المثال إلى:

React.createElement(
  MyText,
  { color: 'red' },
  'Hello, Good Morning!'
)

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

4. الدعائم في JSX

يمكن تحديد الخاصيات بعدة طرق في JSX:

تعبيرات جافا سكريبت كدعائم:

هنا، قيمة Props.sum هي 6.

سلسلة حرفية:

كلا المثالين أعلاه متكافئان.

الدعائم الافتراضية إلى "صحيح"
إذا لم نقم بتمرير قيمة للخاصية، فستكون القيمة الافتراضية صحيحة.

على سبيل المثال،

كلا المثالين أعلاه متكافئان.

5. مكونات الفئة

يمكن تعريف المكونات في React كفئات أو وظائف. إليك كيفية تحديد مكون الفصل:

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

6. دورة حياة المكون

تحتوي المكونات على أساليب دورة الحياة التي يمكنك تجاوزها لتشغيل التعليمات البرمجية في مراحل محددة:

التثبيت: عندما يتم إنشاء مكون وإدراجه في DOM.

• المنشئ ()
• يجعل()
• componentDidMount()

التحديث: عندما تتغير الدعائم أو الحالة.

• يجعل()
• componentDidUpdate()

إلغاء التثبيت: عند إزالة مكون من DOM.

• componentWillUnmount()

7. خصائص الفئة

defaultProps يسمح لك بتحديد القيم الافتراضية للدعائم:

class MyText extends React.Component {
  // Component code here
}

MyText.defaultProps = {
  color: 'gray'
};

إذا لم يتم توفير Props.color، فسيتم تعيينه افتراضيًا على "رمادي".

8. أنواع الدعامة

يمكننا استخدام أنواع الدعامة للتحقق من أنواع الخصائص التي تم تمريرها للمكونات. يعطي أخطاء، عندما لا تتطابق.

import PropTypes from 'prop-types';

const studentPropTypes = {
  studentName: PropTypes.string,
  id: PropTypes.number
};

const props = {
  studentName: 'Asima',
  id: 'hi' // Invalid
};

PropTypes.checkPropTypes(studentPropTypes, props, 'prop', 'MyComponent');

سيحذر هذا من عدم تطابق النوع للمعرف.

9. تحسين الأداء

تم تصميم React للأداء، ولكن يمكنك تحسينه بشكل أكبر:

استخدام الإصدار الإنتاجي:

npm run build

يؤدي هذا إلى إنشاء نسخة إنتاجية مع التحسينات.

تصغير كود المصدر: كن حذرًا عند إجراء تغييرات على كود مصدر React.

تقسيم التعليمات البرمجية: قم بتجميع تعليمات JavaScript البرمجية إلى أجزاء لتحميلها حسب الحاجة.

10. خطافات التفاعل

الخطافات هي وظائف تتيح لك استخدام الحالة وميزات React الأخرى في مكونات الوظيفة. الخطافان الأكثر شيوعًا هما:

useState: إضافة الحالة إلى مكونات الوظيفة.

function Example() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

useEffect: إدارة الآثار الجانبية في مكونات الوظيفة.

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

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

بينما تستمر في استكشاف React وتنفيذه في مشاريعك، تذكر أن البقاء على اطلاع بأحدث الممارسات والميزات سيبقيك في المقدمة في المشهد التكنولوجي المتغير باستمرار. إذا وجدت هذه المقالة ذات قيمة، فلا تنسَ الإعجاب بها ومشاركتها مع زملائك المطورين المتحمسين لتعميق معرفتهم بـ React!

شكرًا لك على القراءة، وسعيدة بالبرمجة! ?