ما هو React؟ دليل بلغة بسيطة لغير المطوّرين

React مكتبة JavaScript لبناء واجهات المستخدم، أي الجزء من التطبيق الذي يراه الناس وينقرون عليه. تبني الشاشات من قطع قابلة لإعادة الاستخدام تسمى مكوّنات (Components)، مثل زر أو بطاقة منتج أو صفحة كاملة، ويُبقي React الشاشة متزامنة مع بياناتك: فحين تتغير البيانات، يحدّث React الأجزاء من الصفحة التي تعتمد عليها. وقد أنشأته Facebook (وهي اليوم Meta)، وهو مفتوح المصدر، ويُعد من أكثر الطرق استخداماً لبناء تطبيقات الويب.

لماذا يهم React عند البناء بالذكاء الاصطناعي

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

لا تحتاج إلى كتابة React لتبني بالذكاء الاصطناعي. لكن معرفة القليل منه تساعدك على:

• وصف التغييرات بدقة. "غيّر مكوّن ProductCard بحيث يظهر السعر بخط عريض" أوضح من "اجعل الأسعار بارزة في مكان ما".
• فهم الأخطاء. رسائل مثل "Cannot read properties of undefined" أو "Too many re-renders" تصبح أوضح.
• اتخاذ قرارات سليمة. تطبيقات React البسيطة تُعرض في المتصفح، وهذا يؤثر في ظهورها في محركات البحث وفي سرعة التحميل الأولى. ومعرفة ذلك تساعدك على تحديد متى تطلب إعداداً مختلفاً.
• العمل مع المطورين لاحقاً. React مهارة شائعة، لذلك يستطيع المطور عادةً أن يتولى شيفرة React بسهولة.

تشبيه من الحياة اليومية

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

مكوّنات React هي تلك المكعبات. فمكوّن Button يُستخدم داخل ProductCard، الذي يُستخدم داخل ProductGrid، الذي هو جزء من ShopPage. وحين تغيّر Button مرة واحدة، يتغير كل زر في التطبيق.

والجزء الثاني من التشبيه: تخيّل أن نموذج LEGO يعيد بناء نفسه كلما غيّرت التعليمات. هذه هي الحيلة الثانية في React: تصف الشكل الذي يجب أن تكون عليه الشاشة للبيانات الحالية، ويحسب React ما الذي يجب تغييره في الصفحة.

الأفكار الأساسية

المكوّنات (Components)

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

JSX

تُكتب المكوّنات عادةً بصيغة JSX، وهي تشبه HTML مخلوطاً بـ JavaScript:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX اختياري، لكن وثائق React تشير إلى أن معظم المشاريع تستخدمه. ويُحوَّل إلى JavaScript عادي قبل أن يعمل في المتصفح.

الخصائص (Props)

الخصائص هي المدخلات التي تمررها إلى المكوّن، مثل الإعدادات في قطعة قابلة لإعادة الاستخدام:

<ProductCard name="Lavender Candle" price={24} />

يمكن للمكوّن نفسه ProductCard أن يعرض أي منتج.

الحالة (State)

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

الخطافات (Hooks)

الخطافات دوال تبدأ أسماؤها بـ use، مثل useState (لتذكّر قيمة) وuseEffect (لتشغيل شيفرة بعد الرسم، مثل جلب البيانات). ستراها في كل مكان في شيفرة React التي يولّدها الذكاء الاصطناعي.

مثال عملي: عداد سلة التسوق

لنفترض أن متجرك الإلكتروني فيه زر "أضف إلى السلة" وأيقونة سلة تعرض عدد العناصر. في React يبدو الأمر تقريباً هكذا:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

ما الذي يحدث حين ينقر المتسوق على "Add to cart":

1. يستدعي onClick الزر الدالة onAdd، التي تستدعي بدورها setCartCount.
2. يحدّث React حالة cartCount من 0 إلى 1.
3. يعيد React رسم Shop، ويمرر count={1} إلى CartIcon.
4. تعرض الصفحة الآن "Cart (1)". لم يكتب أحد شيفرة تقول "ابحث عن نص السلة وغيّره"، فالشاشة تتبع البيانات.

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

أين يقع React في تطبيق الويب

تطبيق "Vite + React" يُعرض في المتصفح (تطبيق صفحة واحدة، أو SPA). أما تطبيق Next.js فيمكنه عرض الصفحات على الخادم أولاً، مما يساعد محركات البحث وسرعة التحميل الأولى.

شرح المصطلحات الشائعة

أخطاء شائعة ومفاهيم خاطئة

• "React لغة برمجة." إنه مكتبة مكتوبة بلغة JavaScript (أو TypeScript) وتُستخدم منها.
• "React يخزّن بياناتي." الحالة تعيش في المتصفح وتختفي عند التحديث. وتحتاج البيانات الدائمة إلى خلفية وقاعدة بيانات.
• وضع أسرار داخل شيفرة React. كل ما في تطبيق React يُرسل إلى متصفح الزائر. ومفاتيح API الموضوعة هناك تصبح عامة. أبقها على الخادم.
• "تطبيقات React لا يمكن أن تظهر في البحث." العرض من جهة العميل فقط أضعف للبحث، لكن العرض المسبق أو عرض الخادم يحل معظم المشكلة.
• المكوّنات العملاقة. مكوّن من 1,000 سطر يصعب تغييره بأمان على البشر والذكاء الاصطناعي على حد سواء. اطلب مكوّنات أصغر.
• افتراض أن تطبيق React للويب هو تطبيق هاتف. يعمل في المتصفح، بما في ذلك على الهواتف، لكنه ليس تطبيقاً من متجر التطبيقات.

ماذا تطلب من أداة البناء بالذكاء الاصطناعي

• "قسّم هذه الصفحة إلى مكوّنات صغيرة وبأسماء واضحة، وأخبرني في أي ملف يوجد كل منها."
• "اجعل مكوّن ProductCard قابلاً لإعادة الاستخدام، مع الاسم والسعر والصورة كخصائص."
• "احفظ السلة في قاعدة البيانات حتى تبقى بعد تحديث الصفحة."
• "احتفظ بكل مفاتيح API على الخادم، ولتستدعِ شيفرة React واجهتنا البرمجية الخاصة."
• "أضف حالات التحميل والخطأ للبيانات القادمة من الخادم."
• "إذا كان ظهور هذه الصفحات في البحث مهماً، فاعرضها مسبقاً أو استخدم إعداداً يعرض على الخادم."
• "اشرح بلغة بسيطة ما يعنيه هذا الخطأ، وأي مكوّن يأتي منه."

للصورة الأوسع، راجع الواجهة الأمامية مقابل الخلفية، ولمراجعة ما كتبه الذكاء الاصطناعي، راجع كيف تراجع الشيفرة المولّدة بالذكاء الاصطناعي.

React في Mythex

ما لم تطلب غير ذلك، يبدأ Mythex المشاريع الجديدة على Vite + React + TypeScript + Tailwind، مع معاينة حية تعمل أثناء الدردشة. ويمكنك تسمية إعداد آخر في رسالتك الأولى، مثل "استخدم Next.js" أو "صفحة هبوط HTML ثابتة بسيطة"، ويختاره Mythex مما تكتبه، ولا توجد شاشة إعدادات لذلك. تشرح صفحة الوثائق حول كيفية اختيار التقنية الخيارات. ومحرر الشيفرة للقراءة فقط في الخطة المجانية، وفي خطة Pro يمكنك تعديل شيفرة React مباشرة وتصدير المشروع لمواصلة العمل عليه في مكان آخر.

الأسئلة