ما هي React؟
React مكتبة JavaScript مفتوحة المصدر لبناء واجهات المستخدم. وُلدت داخل شركة Facebook، التي أصبحت اليوم Meta، وأُتيحت مفتوحة المصدر عام 2013. وفي React تتكون الواجهة من شجرة مكوّنات: زر أو بطاقة أو نموذج أو صفحة كاملة، وكل منها جزء مستقل من الشيفرة يمكن إعادة استخدامه حيثما دعت الحاجة.
تعمل React بأسلوب تصريحي: فبدلًا من أن نخبر المتصفح خطوة بخطوة بما يجب تغييره، نصف شكل الواجهة في حالة معينة، مثل «السلة فارغة» أو «ثلاثة منتجات»، فتحدّث React الأجزاء التي تغيّرت فقط من الصفحة. وتُكتب المكوّنات عادة بـ JSX التي تشبه HTML داخل JavaScript، وتتلقى بياناتها عبر الخصائص (props)، بينما تتولى الخطافات (hooks) مثل useState وuseEffect إدارة الحالة ومهام مثل تحميل البيانات.
React مجانية بترخيص MIT. وفي فبراير 2026 سلّمتها Meta إلى React Foundation، وهي مؤسسة مستقلة تستضيفها Linux Foundation ومن أعضائها Meta وMicrosoft وAmazon، بينما يبقى توجيهها التقني بيد من يطورونها ويحافظون عليها. وتركّز React على الواجهة نفسها، لذا تُقرن غالبًا بإطار عمل مثل Next.js للتوجيه والعرض على الخادم وSEO.
أين نستخدم React
نلجأ إلى React عندما يجب أن تتصرف الصفحة كتطبيق لا كمستند. وهي تناسب هذه المهام أكثر من غيرها:
لوحات التحكم وبوابات العملاء
لوحات يسجّل فيها فريقك أو عملاؤك الدخول، فيطّلعون على بياناتهم، ويفلترون الجداول، ويحدّثون السجلات. وتُبقي React الشاشات المعقدة سريعة ومنظمة مع نموها.
أقسام تفاعلية
حاسبة أسعار، أو أداة لتخصيص منتج، أو نموذج حجز داخل صفحة بسيطة فيما عدا ذلك. نضيف مكوّن React حيث يلزم فقط، ونُبقي بقية الصفحة خفيفة.
مكوّنات من مكتبة Figma
نحوّل مكوّنات نظام تصميمك في Figma، مثل الأزرار والبطاقات والنماذج، إلى مكوّنات React بالأسماء والأشكال نفسها، فيسير التصميم والشيفرة جنبًا إلى جنب.
تطبيقات ويب مع Next.js
في المواقع والتطبيقات الأكبر نستخدم React مع Next.js: تُعرض الصفحات العامة على الخادم من أجل السرعة ومحركات البحث، ويتولى الإطار التوجيه، بما في ذلك عناوين منفصلة لكل لغة.
لماذا React؟
قطع قابلة لإعادة الاستخدام
يُبنى الزر أو البطاقة مرة واحدة ويُستخدم في كل مكان. وتحسينه في موضع واحد يحدّث كل الشاشات، فتبقى الواجهات الكبيرة متسقة ويصبح كل تعديل أسرع.
قابلة للتنبؤ مع النمو
تتدفق البيانات في اتجاه واحد، من المكوّن الأب إلى أبنائه، ويعرض كل مكوّن ما تقوله حالته بالضبط، فتصبح الشاشات المعقدة أسهل في التتبع والاختبار والتوسعة.
منظومة واسعة ومستقرة
تقف خلف React مؤسسة مستقلة ومجتمع كبير، وتتوافر لها أدوات تحظى بصيانة جيدة للنماذج والرسوم البيانية والخرائط وسهولة الوصول. ويعرفها كثير من المطورين، مما يسهّل ترتيب الصيانة مستقبلًا.
كيف نعمل على مشروعك
ننطلق من نظام التصميم في Figma: نحصر المكوّنات بأشكالها وحالاتها، ثم نبنيها في React، وغالبًا مع TypeScript، من أصغر القطع حتى الشاشات الكاملة. ويُفحص كل مكوّن وحده قبل أن يدخل أي صفحة.
قبل الإطلاق نختبر الشاشات بلوحة المفاتيح وبقارئ شاشة، ونقيس السرعة وسرعة الاستجابة عبر Lighthouse وPageSpeed Insights، ونتأكد من أن المحتوى الموجّه إلى محركات البحث يصل بصيغة HTML جاهزة. وعند التسليم يتسلّم فريقك الشيفرة مع شرح عملي لطريقة تحديث المحتوى.
