React

فتح العاملون في Meta (فيسبوك آنذاك) React سنة 2013. الصفحة ليست ملفاً واحداً ضخماً. كل مكون يحفظ بياناته ومظهره. JSX يشبه HTML لكنه داخل JavaScript. المتصفح لا يقرأ JSX وحده. أداة البناء تحوّله إلى JavaScript عادي.

React للشاشة التي تتغير: تطول القائمة وتتبدل حالة الزر وتُستخدم البطاقة نفسها في أماكن كثيرة.

• استخدام الزر نفسه في عدة أماكن
• بناء قائمة من البيانات
• إظهار خطأ النموذج على الشاشة
• صفحة داخل إطار مثل Next.js

بـ React تكتب بطاقة وقائمة وبحثاً. حين تتغير الحالة يحاول React تحديث الجزء المتغير فقط. ليس قاعدة بيانات ولا يبني الخادم وحده. React Native مكتبة منفصلة لتطبيق الهاتف. ليست الشيء نفسه.

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

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

المكون دالة. Props قيمة تأتي من الخارج. State قيمة تتغير داخله.

• JSX يكتب المظهر داخل JavaScript
• Props لا تغيّر المكون، هي بيانات واردة
• حين تتغير State يتجدد ذلك الجزء
• المفتاح يحفظ أي صف هو أي صف في القائمة

هذه الدالة تُرجع عنواناً. لرؤيته في المتصفح ما زلت تربطه بالصفحة وتترجم JSX.

function Hello() {
  return <h1>Salam</h1>;
}

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

جملة تأخذ اسماً

Greeting مكوّن. name داخل القوسين prop: يأتي ممن يستعمل المكوّن. المكوّن لا يخترع الاسم. {name} يضع تلك القيمة في الجملة. إذا مرّر الأب Aysel فالشاشة تقول Salam, Aysel. إذا تغير الـ prop تتغير الجملة. الدالة نفسها تبقى.

function Greeting({ name }) {
  return <p>Salam, {name}</p>;
}

مكوّن واحد يُستعمل لأسماء كثيرة. لا تنسخ الفقرة لكل شخص.

زر يعدّ

count هو state. يبدأ من 0. الطريق الوحيد لإعطائه رقماً جديداً هو setCount. الزر يُظهر الرقم الحالي. onClick يعمل حين يضغط الإنسان. count + 1 لا يغيّر count بنفسه. setCount يخبر React بالقيمة الجديدة وReact يرسم الزر مرة أخرى. كتابة count = count + 1 تتجاوز React وتبقى الشاشة على الرقم القديم.

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

كل ضغطة تُظهر الرقم التالي: 0 ثم 1 ثم 2. الصفحة لا تُعاد تحميلها.

قائمة من مصفوفة

names بيانات عادية. map يمر على كل اسم ويرجع li. React يحتاج key كي يعرف أي صف هو أي صف حين تتغير القائمة لاحقاً. هنا الاسم نفسه هو المفتاح وهذا مناسب فقط لأن الاسمين مختلفان. المصفوفة الفارغة لا ترسم صفاً. أضف Nigar إلى المصفوفة فيظهر صف ثالث بلا سطر HTML جديد.

const names = ["Aysel", "Murad"];

function NameList() {
  return (
    <ul>
      {names.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

الشاشة تُظهر عنصرين: Aysel وMurad. ul هي القائمة. البيانات ليست مكتوبة داخل الوسوم واحداً واحداً.

جملة تعتمد على الدرجة

score يصل كـ prop مثل الاسم أعلاه. علامة السؤال تختار إحدى كلمتين. إذا كانت الدرجة 50 أو أكثر فالفقرة تقول Keçdi. وإلا تقول Qaldı. الخمسون نفسها نجاح لأن الشرط أكبر أو يساوي. هذا ما زال مكوّناً واحداً. القرار داخل تعبير JavaScript لا في ملف HTML منفصل.

function Score({ score }) {
  return <p>{score >= 50 ? "Keçdi" : "Qaldı"}</p>;
}

الدرجة 85 تُظهر Keçdi. الدرجة 40 تُظهر Qaldı. المكوّن لا يخزّن الدرجة. المستدعي يخزّنها.

• هل React وJavaScript الشيء نفسه؟ لا. React مكتبة. JavaScript هو الذي يكتبها.
• هل React إطار؟ يسمي نفسه مكتبة. مسار الصفحة والخادم عادة يضيفان أداة أخرى.
• هل يحل React محل HTML؟ لا. في النهاية المتصفح يرى عناصر.