لماذا React في 2026

على الأرجح كتبتَ من قبل شيئًا من JavaScript يغيّر الصفحة: تجد عنصرًا، تضبط نصّه، تضيف class، تُلحق عنصرًا بالقائمة. هذا ينجح مع زر واحد. ثم تضيف عدّادًا في الترويسة يجب أن يطابق القائمة، وفلترًا يُخفي بعض العناصر، ورسالة تظهر حين تكون القائمة فارغة. صارت كل نقرة مضطرة لتحديث أربعة أماكن بالترتيب الصحيح، وفي اليوم الذي تنسى فيه واحدًا منها، ستقول الترويسة «3 to watch» بينما القائمة تعرض فيلمين فقط.

هذه المحاسبة اليدوية هي المشكلة التي بُنيت React لإزالتها.

صِف النتيجة، لا الخطوات

مع React تكتب components (مكوّنات): دوال JavaScript تستقبل بعض البيانات وتُرجع وصفًا للشاشة. عندما تتغيّر البيانات، تستدعي React دوالك من جديد، وتقارن الوصف الجديد بالسابق، ولا تجري في الـ DOM إلا التغييرات اللازمة للانتقال من أحدهما إلى الآخر.

function WatchCount({ movies }) {
  const left = movies.filter((m) => !m.watched).length;
  return <p>{left} to watch</p>;
}

لا يوجد في أي مكان كود من نوع «عندما يُعلَّم فيلم كمُشاهَد، اعثر على الترويسة وأنقص الرقم». العدد يُحسب من القائمة في كل مرة، لذلك لا يمكن أن يخرج عن التزامن معها. يلخّص الناس هذه الفكرة بعبارة الواجهة دالةٌ في الـ state: البيانات نفسها تُنتج دائمًا الشاشة نفسها.

هذه الفكرة الواحدة تفسّر معظم ما ستتعلّمه. الـ props هي طريقة دخول البيانات إلى الـ component. والـ state (حالة المكوّن) بيانات تتغيّر مع الوقت. والأحداث هي طريقة المستخدم في طلب تغيير. والـ effects هي طريقتك للتزامن مع أشياء خارج React، مثل عنوان الصفحة أو localStorage.

لماذا React، ولماذا الآن

هناك بدائل جيدة (Vue وSvelte وSolid وAngular)، والأفكار تنتقل بينها بسهولة. لكن React ما زالت الخيار الآمن لمن يتحوّل إلى البرمجة، لثلاثة أسباب عملية: تظهر في إعلانات وظائف الواجهات الأمامية أكثر من أي شيء آخر، ولديها أكبر منظومة من المكتبات والإجابات الجاهزة، وReact Native تتيح لك استخدام المهارات نفسها لبناء تطبيقات الجوّال.

React 19 هو الإصدار الرئيسي الحالي، وقد جعل بعض الأمور أبسط: أصبح ref مجرّد prop عادي، وحصلت النماذج على دعم مباشر عبر Actions، ويمكن لـ React Compiler الاختياري أن يتولّى عنك كثيرًا من تحسينات الأداء. ستلتقي بكل واحدة من هذه حيث تهمّ فعلًا، من دون حفظ التاريخ. أمّا الدروس القديمة التي تستخدم Create React App أو الـ class components فقد تجاوزها الزمن؛ تخطَّها.

ما الذي ستبنيه

الدورة كلها تبني تطبيقًا واحدًا: Watchlist للأفلام التي تريد مشاهدتها. في النهاية سيتيح لك إضافة فيلم من خلال نموذج، وتعليمه كمُشاهَد، وتصفية القائمة حسب الحالة، وحفظ كل شيء في localStorage حتى لا يمحوه تحديث الصفحة. وفي القسم الأخير تنسّقه باستخدام Tailwind CSS وتنشره على Vercel، فتنتهي برابط حقيقي تضعه في سيرتك الذاتية.

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

في الدرس التالي تجهّز مشروعًا حقيقيًا على جهازك باستخدام Vite، وترى أين تعيش React فعليًا داخله.