React مكتبة JavaScript لبناء واجهات المستخدم من مكوّنات قابلة لإعادة الاستخدام. نستخدمها للوحات التحكم والبوابات وأي شاشة يقضي فيها الشخص ساعات — حيثما تحمل الواجهة من الحالة ما يجعل إعادة بناء الصفحة عند كل نقرة إحساسًا خاطئًا.
ما هي React؟
React مكتبة لا إطار عمل، وهذا التمييز مهم حين تدفع ثمنه. فهي تحل مشكلة واحدة بالضبط: إبقاء ما على الشاشة متزامنًا مع البيانات خلفه. وكل ما عداه — التوجيه، وجلب البيانات، والنماذج، والعرض من الخادم — قرار لا يزال على أحد أن يتخذه.
الفكرة الأساسية هي المكوّنات: قطعة من الواجهة والمنطق الذي يحركها، مجموعان معًا وقابلان لإعادة الاستخدام. صف في جدول، أو منتقي تاريخ، أو خطوة دفع كاملة. وحين تتغير البيانات، تحسب React أصغر مجموعة تحديثات DOM لازمة وتطبقها. أنت تصف كيف ينبغي أن تبدو الشاشة؛ وهي تتولى الوصول إلى ذلك.
بنتها Meta وتستخدمها بمقياس لن يقترب منه شيء نبنيه، وهذا يستحق شيئًا: فحالات الأداء الحدّية الصعبة اكتشفها غيرنا أولًا.
متى نختار React
نختار React حين تحمل الشاشة حالة — حين يعتمد ما تراه على ما فعلته سلفًا. برج تحكم لوجستي بمواقع حية، أو مسار حجز بقوائم متتابعة، أو لوحة بمرشّحات تتراكب. هذه بائسة البناء بإعادة تحميل الصفحات، وممتعة البناء بالمكوّنات.
وهو الخيار الصحيح أيضًا حين يملك العميل، أو يخطط لامتلاك، مطوّري واجهات داخليين. فلـ React أكبر تجمّع توظيف بين تقنيات الواجهة بفارق واسع، وفي دبي هذه ميزة عملية لا نظرية: فمنظومة تستطيع التوظيف لها هي منظومة تستطيع الاحتفاظ بها.
وحين يكون تطبيق جوال على خارطة الطريق، فإن React على الويب يجعل React Native محادثة أقصر بكثير لاحقًا — إذ ينتقل النموذج الذهني وقدر كبير من المنطق معه.
متى لا نستخدم React
لا نستخدم React وحده لموقع تسويقي. فصفحة عامة تُعرض كليًا في المتصفح ترسل هيكلًا فارغًا إلى الزاحف وإلى عميل على 4G، وكلاهما ينتظر. ولتلك نستخدم Next.js، وهو React مع عرض من الخادم، أو Laravel مع Blade حين تكون الاستضافة مقيدة.
ونعترض أيضًا حين يُقترح React لشاشة هي في حقيقتها نموذج. فنموذج تواصل من خمسة حقول لا يحتاج شجرة مكوّنات وخطوة بناء؛ بل يحتاج نموذجًا. واللجوء إلى React هناك يضيف حزمة وخط بناء والتزام تحديث اعتماديات لحل مشكلة حلّتها HTML قبل عقود.
وإن كانت الواجهة نصًا في معظمها — مقالًا أو سياسة أو تقريرًا — فـ React شكل خاطئ تمامًا. فالمحتوى يريد أن يكون HTML.
ما الذي نبنيه بـ React
لوحات العمليات
الشاشة التي تحل محل جدول البيانات الذي تُدار به الشركة فعلًا. بيانات حية، ومرشّحات تتراكب، وتصديرات تفتحها المالية، وعروض حسب الدور فيرى السائق والمرسِل والمدير كل منهم ما يخصه. هكذا بنينا برج تحكم Meridian Freight — أكثر من 300 شحنة حية على شاشة واحدة.
بوابات العملاء
حيث يتحقق عملاؤك من طلب، أو ينزّلون فاتورة، أو يحجزون موعدًا، أو يفتحون تذكرة دون الاتصال بأحد. وتجلس عادةً أمام نظام ERP أو حجوزات تشغّله أصلًا، وتتحدث إليه عبر واجهة برمجية بدل استبداله — فيبقى المشروع في نطاق أسابيع بدل سنة يستغرقها الترحيل.
مسارات متعددة الخطوات تحتفظ بالحالة
الطلبات، والانضمام، وبناة عروض الأسعار، ونماذج التأمين. والقيمة فيما يحدث بين الخطوات: التحقق مبكرًا، وحفظ التقدم فلا يضيّع انقطاع اتصال عشرين دقيقة من الكتابة، وعرض سعر يتحدث مع كل اختيار.
أنظمة تصميم يعيد فريقك استخدامها
حين تشغّل شركة عدة منتجات، نبني مكتبة المكوّنات المشتركة مرة واحدة — الأزرار والنماذج والجداول وكل شيء — ورموز العلامة مدمجة فيها. فتصبح كل شاشة تالية أسرع بناءً ويستحيل رسمها خارج العلامة، وهذا هو العائد الفعلي منها.
كيف نطلق مشاريع React
دائمًا TypeScript، لا JavaScript عارية. ففي قاعدة كود سيمسّها غير كاتبها الأصلي، الأنواع أرخص توثيق موجود، وهي تلتقط صنف الأخطاء الذي لا يظهر إلا حين يكون حقل فارغًا في الإنتاج.
ودائمًا داخل إطار عمل — Next.js لأي شيء عام، وVite لأداة داخلية. فـ React وحده يعني كتابة التوجيه وجلب البيانات يدويًا، والتوجيه اليدوي هو حيث تسكن أخطاء إتاحة الوصول.
تغطي الاختبارات المنطق الذي يكلّف مالًا إن أخطأ: حساب السعر، وفحص الصلاحية، والتعارض حين يحجز شخصان الموعد نفسه. لا لون الزر. ويعمل كل شيء مقابل ميزانية أداء في CI، وأي طلب دمج يتراجع عنها لا يُدمج.
ما تكلّفك React
يرسل React كود JavaScript إلى المتصفح، وJavaScript أغلى ما يمكن أن ترسله إلى هاتف: إذ يجب تنزيله وتحليله وتنفيذه قبل أن يعمل أي شيء. ونرصد لذلك ميزانية صراحةً، لكن شاشة React لن تكون أبدًا بسرعة HTML المعروض من الخادم في أول رسم. وهذه مقايضة تستحق للوحة تحكم ولا تستحق لصفحة هبوط.
كما تتحرك المنظومة بسرعة، وتطبيق React يُترك دون مساس ثلاث سنوات يراكم تنبيهات أمنية في شجرة اعتمادياته. ونرصد نافذة ترقية كل سنتين بدل اكتشاف ذلك عند النقطة التي تصبح فيها الترقية إعادة كتابة.
وأخيرًا، React لا يعطيك شيئًا مجانًا. فالتوجيه والنماذج وجلب البيانات وإتاحة الوصول كلها قرارات. وإن أُسيء اتخاذها كانت المصدر الفعلي لمعظم تطبيقات React السيئة، ولهذا لا نبدأ من React عاريًا.
أسئلة تُطرح علينا عن React
لا أحدهما أفضل؛ فكلاهما يحل المشكلة نفسها جيدًا. لدى React تجمّع توظيف أكبر بكثير، وهذا عادةً ما يحسم الأمر لشركة تريد نقل التطوير إلى الداخل مستقبلًا. وVue أسرع تعلمًا إن كان فريقك قادمًا من PHP أو JavaScript عادية. نسأل من سيصونه في السنة الثانية ونختار بناءً على ذلك.
فقط إن كان معروضًا من الخادم. تستطيع Google تنفيذ JavaScript، لكنها تفعل ذلك بتأخير وبعدم اتساق، والزواحف الأخرى — ومنها معظم زواحف الذكاء الاصطناعي — لا تنفذه إطلاقًا. ولأي شيء عام نبني بـ Next.js فيصل HTML كاملًا. أما React وحده خلف تسجيل دخول فلا متطلب لتحسين محركات البحث عليه ولا بأس به كما هو.
تبدأ تطبيقات الويب من 15,000 دولار وتقع عادةً بين 25,000 و60,000 حسب عدد الشاشات، وكم دورًا يحتاج عرضًا مختلفًا، وما الذي يجب التكامل معه. ويعود التقدير مسعّرًا سطرًا بسطر فتحذف شاشة بدل أن تفاوض على المجموع.
