مختصر كتابي: What React Does: Your First Card in Yawmi

ماذا تضيف React إلى صفحة تستطيع كتابتها بلغة HTML؟

تخيل أنك تسجل وجبات يومك في ورقة: فطار وغداء، وتحت كل وجبة اسمها ورقم تجريبي للسعرات. تستطيع عرض هذا الكلام في موقع باستخدام HTML. ما تضيفه React هو أنها تساعدك على وصف الواجهة في صورة مكونات (Components) صغيرة؛ كل مكون يأخذ بيانات ويُخرج الشكل الذي يظهر على الشاشة، وعندما تتغير البيانات لاحقًا تتولى React تحديث الواجهة معك.

ستبني طوال الدورة تطبيقًا اسمه «يومي»: تبدأ ببطاقة بسيطة، ثم تضيف نموذجًا وقائمة وتصفية وصفحات. لا يلزمك أن تعرف React مسبقًا، لكنك تحتاج أساسيات HTML وCSS وJavaScript. إذا لم تتضح لك الدوال والمصفوفات بعد فراجعها على مهل، لأن React مبنية عليها وليست بديلًا عنها.

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

import React from "react";
export default function App() {
  return (
    <main dir="rtl">
      <h1>يومي</h1>
      <article>
        <h2>فطار</h2>
        <p>فول — 250</p>
      </article>
    </main>
  );
}

يُصدّر الملف المكون بعبارة export default كي يستطيع ملف البداية استيراده وعرضه. ملف البداية جاهز في المحرر، فلا تكتب أوامر npm داخل App.js.

عندما تكتب غدا مكان فطار ثم تشغّل الكود، يتغير وصف البطاقة فقط. لا يوجد في الكود زر ولا حالة (State) حتى الآن؛ التعديل هنا تعديل في الكود نفسه. والرقم 250 نص مكتوب، لا يُحسب من اسم الوجبة، وليس معلومة صحية عن الطعام؛ إنه رقم تجريبي نتعلم به كيف تتحرك البيانات.

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

• React تصف الواجهة في مكونات، وكل مكون يحوّل البيانات إلى شكل على الشاشة.
• المكون دالة يبدأ اسمها بحرف كبير مثل App، وتُرجع وصفًا مكتوبًا بلغة JSX.
• أداة التشغيل تحوّل JSX إلى كود يفهمه المتصفح.
• export default يتيح لملف البداية استيراد المكون وعرضه.
• إذا نسيت إغلاق عنصر ظهرت رسالة خطأ في المحرر؛ راجع العنصر من أوله إلى آخره بدل حذف الملف كله.
• النص العربي داخل العناصر طبيعي، أما أسماء الدوال والاستيرادات فيجب أن تبقى مطابقة للكود.

جرّب في المحرر تحت الدرس: حوّل البطاقة إلى وجبة غدا باسم عدس ورقم 300، وأضف تحتها فقرة تقول إن البيانات للتدريب، وتأكد أن عنوان يومي ما زال ظاهرًا.

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