The Philosophy of React
| الميزة أو المفهوم | آلية العمل الهندسية في ريأكت | الفائدة المباشرة للمطور وتهيئة الـ SEO |
|---|---|---|
| المكونات القابلة لإعادة الاستخدام | تفكيك الواجهة الممتدة إلى مكعبات برمجية مستقلة ومنفصلة عن بعضها | اختصار آلاف أسطر الأكواد المتكررة وتسهيل صيانة وتحديث التطبيق لاحقاً |
| التحديث أحادي الاتجاه للبيانات | تدفق البيانات بشكل صارم من المكون الأب إلى المكون الابن فقط | منع العشوائية البرمجية وتسهيل تتبع الأخطاء وحلها في المشاريع الضخمة |
| تطبيقات الصفحة الواحدة | تحميل الهيكل الأساسي مرة واحدة وتبديل المحتوى داخلياً بدون إعادة تحميل المتصفح | تصفح فائق السرعة يشبه تطبيقات الهاتف الذكي مما يرفع تقييم تجربة المستخدم |
عندما بدأت رحلتك في تطوير الويب باستخدام HTML و CSS وجافا سكريبت العادية، كنت تبني مواقع ثابتة أو بسيطة التفاعل. ولكن، تخيل أنك تبني موقعاً ضخماً مثل فيسبوك أو نتفليكس، حيث تتغير الإشعارات، الرسائل، وقائمة المنشورات في نفس اللحظة دون أن يعيد الموقع تحميل الصفحة بأكملها!
إذا حاولت بناء هذا بجافا سكريبت العادية (Vanilla JS)، ستجد نفسك غارقاً في آلاف الأسطر المعقدة لتتبع كل عنصر في الشاشة وتحديثه يدويّاً. هنا تحديداً تتدخل React لتغير قواعد اللعبة بالكامل.
ريأكت (React) هي مكتبة جافا سكريبت (JavaScript Library) مفتوحة المصدر، متخصصة في بناء واجهات المستخدم (User Interfaces) للموقع. تم تطويرها بواسطة مهندسي شركة فيسبوك (Meta) عام 2013 لإيجاد حل جذري لمشاكل بطء المواقع وتداخل الأكواد في الأنظمة الضخمة، وهي اليوم التكنولوجيا الأكثر طلباً في سوق عمل تطوير الويب عالمياً.
💡 نصيحة
تنبيه هام: ريأكت تُصنف كمكتبة (Library) وليس إطار عمل (Framework). الفارق الهيكلي هنا أن إطار العمل يفرض عليك قواعد صارمة ويتحكم في كل خطوة بمشروعك، بينما المكتبة تمنحك الحرية الكاملة لدمجها مع أدوات ومكتبات خارجية أخرى بناءً على حاجة مشروعك.
تعتمد ريأكت على فلسفة هندسية فريدة ترتكز على ثلاثة أعمدة أساسية جعلتها تتفوق على الطرق التقليدية:
بدلاً من كتابة صفحة HTML واحدة عملاقة تحتوي على آلاف الأسطر، تُجبرك ريأكت على التفكير بطريقة "تفكيك الواجهة". تقوم بتقسيم الموقع إلى مكعبات صغيرة مستقلة تُسمى مكونات (Components)؛ مثل: زر الإعجاب، شريط التنقل العلوي، بطاقة المنتج. كل مكون يُكتب في ملف مستقل يحتوي على شكله وتفاعله، ويمكنك إعادة استخدام هذا المكون في أي صفحة أخرى بالموقع بكتابة سطر واحد فقط!
في جافا سكريبت العادية، أنت تتبع الأسلوب "الأمري" (Imperative)؛ أي أنك تأمر المتصفح خطوة بخطوة بكيفية تعديل العناصر (مثل: اذهب واستهدف الزر، غير لونه، امسح النص القديم، اكتب النص الجديد). أما في React, أنت تتبع الأسلوب "الإعلاني"؛ أنت فقط تصف للمتصفح الشكل النهائي الذي تريده بناءً على البيانات الحالية، وتترك لريأكت المهمة المعقدة لخلف الكواليس لتحديث الشاشة تلقائياً وبأسرع طريقة ممكنة عند تغير البيانات.
المواقع التقليدية عندما تضغط فيها على رابط ينقلك لصفحة أخرى، يختفي الموقع تماماً وتظهر شاشة بيضاء ويقوم المتصفح بإعادة تحميل الصفحة بالكامل من السيرفر. ريأكت تقضي على هذا تماماً عبر نظام تطبيق الصفحة الواحدة؛ حيث يتم تحميل الهيكل الأساسي للموقع مرة واحدة فقط، وعند التنقل، يتم استبدال المحتوى الداخلي لمحرك البحث والمستخدم بلَمح البصر وبشكل فوري دون أي إعادة تحميل للمتصفح، مما يعطي تجربة مستخدم تشبه تطبيقات الهواتف الذكية.
دعنا نرى الفارق البرمجي بين جافا سكريبت العادية وبين أسلوب ريأكت عند بناء زر بسيط يغير النص بداخله عند النقر عليه:
الطريقة القديمة
| 1 | <!-- نضطر لربط العناصر بالـ ID وتحديثها خطوة بخطوة --> |
| 2 | <button id="myBtn">اضغط هنا</button> |
| 3 | |
| 4 | <script> |
| 5 | const btn = document.getElementById('myBtn'); |
| 6 | btn.addEventListener('click', function() { |
| 7 | btn.innerText = 'تم الضغط بنجاح!'; |
| 8 | }); |
| 9 | </script> |
في ريأكت نقوم بدمج منطق البرمجة مع المظهر في كتلة واحدة ذكية كما سنرى بالتفصيل في الدروس القادمة:
| 1 | // نحدد الحالة فقط، وريأكت تتولى التحديث البصري فوراً |
| 2 | function ClickButton() { |
| 3 | const [text, setText] = useState('اضغط هنا'); |
| 4 | |
| 5 | return ( |
| 6 | <button onClick={() => setText('تم الضغط بنجاح!')}> |
| 7 | {text} |
| 8 | </button> |
| 9 | ); |
| 10 | } |