المبادئ الأساسية لـ REACT

تعلم المبادئ الأساسية لـ REACT يعتبر من الخطوات الأولى لتعلم React، حيث يمهد الطريق لفهم المفاهيم المتقدمة وبناء تطبيقات ويب معقدة. “REACT هي مكتبة JavaScript مفتوحة المصدر لبناء واجهات تفاعلية غنية.”
تتميز بسهولة التعلم وقوة الأداء، مما يجعلها الخيار الأمثل لبناء تطبيقات ويب حديثة وقابلة للتطوير.

ما هي المبادئ الأساسية لـ REACT؟

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

1- المبادئ الأساسية: مكونات REACT

هي مكونات REACT وحدات بناء واجهات المستخدم.
يمكن كتابتها باستخدام JSX، لغة برمجة امتداد لـ JavaScript، وكل مكون يحدد بوظيفة تُعيد تمثيل جزء من واجهة المستخدم.

خصائص المكونات

هي خصائص مكونات البيانات التي يتم استخدامها لتنسيق البيانات وتحديد سلوكها.
يتم تمريرها كمعاملات إلى وظيفة المكون.

مثال :

function Button(props) {
  return (
    <button onClick={props.handleClick}>{props.label}</button>
  );
}

في هذا المثال،تم تعريف مكون في دالة Button يتم استخدامه كزر.
نمرر خصائص label و handleClick كمعاملات إلى الوظيفة.
نستخدم خاصية label لتحديد نص الزر،

بينما نستخدم خاصية handleClick لتحديد الوظيفة التي سيتم تنفيذها عند الضغط على الزر.

2- المبادئ الأساسية : ما هو JSX؟

JSX هي لغة برمجة امتداد لـ JavaScript تسمح بدمج HTML داخل JavaScript.
نستخدم لبناء هيكل واجهة المستخدم بشكل أكثر وضوحًا وسهولة

المبادئ الأساسية لـ REACT

<div className="App">
  <h1>عنوان التطبيق</h1>
  <p>هذا مثال على فقرة.</p>
  <Button label="اضغط هنا" handleClick={handleClick} />
</div>

في هذا المثال، يتم استخدام JSX لبناء هيكل واجهة المستخدم.
يتم إنشاء عناصر HTML مثل div، h1، و p باستخدام JSX.
كما يتم استخدام مكون Button المُعرّف سابقًا داخل هيكل JSX.

3- المبادئ الأساسية : حالة التطبيق

هي البيانات التي من خلالها يتم تحديد سلوك واجهة المستخدم.
تتغير حالة التطبيق استجابة لتفاعلات المستخدم أو الأحداث المختلفة.

كيف يتم إدارة حالة التطبيق في REACT؟

يتم إدارة حالة التطبيق في REACT باستخدام Hooks.
Hooks هي وظائف خاصة تمكننا من الوصول إلى حالة التطبيق وتحديثها.

مثال:

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>العد: {count}</p>
      <button onClick={handleClick}>زيادة</button>
    </div>
  );
}

في هذا المثال، يتم استخدام Hook useState لإدارة حالة التطبيق.
يخزن المتغيرة count قيمة العداد، بينما تستخدم الوظيفة setCount لتحديث قيمة العداد.
يتم تحديث قيمة العداد عند الضغط على الزر باستخدام الوظيفة handleClick.

4-المبادئ الأساسية : props و state:

props هي البيانات التي يتم تمريرها من مكون أبوي إلى مكون فرعي.
تستخدم لتنسيق وتحديد سلوك المكون الفرعي

state هي البيانات الداخلية للمكون التي يمكنه الوصول إليها وتحديثها.
تتحكم state في سلوك المكون وتفاعله مع المستخدم.

الفرق بين الـ props و الـ state في React:

بما ان كل من الـ props و الـ state من اهم المبادئ الأساسية لـ REACT فهما مفهومان أساسيان في React للتحكم في البيانات وعرضها. على الرغم من انهما يتم استخدامهما لتمرير البيانات وتحديث واجهة المستخدم، إلا أنهما يختلفان في بعض النقاط الرئيسية:

الـ props:

التعريف : هو كائن JavaScript يتم تمريره من مكون أبوي إلى مكون فرعي لتزويده بالمعلومات.
الاستخدام: يتم استخدامه لتمرير البيانات الثابتة أو المتغيرة من مكون أبوي إلى مكون فرعي.
التعديل: لا يمكن تعديل قيمة الـ props من قبل المكون الفرعي، بل هي قيمة للقراءة فقط.
التدفق: يتبع اتجاه تدفق البيانات أحادي الاتجاه، حيث يتحكم المكون الأبوي في البيانات التي يتلقاها المكون الفرعي.

المثال:

// في المكون الأبوي:
<ChildComponent name="John" age={30} />

// في المكون الفرعي:
function ChildComponent(props) {
  return (
    <div>
      <p>الاسم: {props.name}</p>
      <p>العمر: {props.age}</p>
    </div>
  );
}

الـ state:

تعريفه: هو كائن JavaScript يقوم بتخزين البيانات الداخلية للمكون والقابلة للتغيير.
الاستخدام: يتم استخدامه لتخزين البيانات الديناميكية التي تتغير بمرور الوقت، مثل حالة مدخلات المستخدم أو نتائج عمليات الحساب.
التعديل: يمكن تعديل قيمة الـ state باستخدام دالة setState داخل المكون نفسه.
التدفق: يعمل داخليًا في المكون ولا يُمرّر إلى مكونات أخرى.
المثال:

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>العد: {count}</p>
      <button onClick={increment}>زيادة</button>
      <button onClick={decrement}>نقصان</button>
    </div>
  );
}