React

مرحبًا أحمد.

اللغات التي اعتدنا استخدامها سابقًا "منذ نشأة الويب" في بناء المواقع كانت HTML و CSS و JavaScript و لكن بالاعتماد على هذه اللغات الثلاث فقط ظهرت لنا بعض المشاكل منها أنه كل متصفح كان له طريقة و معايير في ترجمة أكواد JavaScript مما شكَّل عبئًا كبيرًا على المُطورين لاضطرارهم لكتابة أكواد مُختلفة لكل متصفح.

لذلك ظهرت مكتبة مثل JQuery حيث أنه وفرت طريقة موحدة لكتابة الأكواد لتتناسب مع جميع المتصفحات.و لكن مع التطبيقات الكبيرة مثل facebook مثلًا ظهرت مشاكل كبيرة مُتعلقة ب JQuery فيما يخص الأداء أيضًا التعامل مع ال DOM و مستمعات الأحداث تعتبر واحدة من أكبر الأمور التي تسبب مشاكل في أداء المواقع performance bottle neck.

مما دفع المُطورين لبناء مكتبات مثل Angular و React و Vue لبناء المواقع لحل المشاكل التي واجهت المطورين مع JQuery حيث أنه كل ما عليك هو وصف الموقع الخاص بك و كيف تريد أن يكون شكل صفحة ما و هكذا و ستتولى المكتبة أمر التعامل مع ال DOM بما ترى أنه مناسب و لا يؤثر على أداء الموقع.

و بالتالي أصبح تعلُم أحد هذه المكتبات أمرًا مهمًا جدًا هذه الأيام و لا يمكن الاكتفاء ب HTML و CSS و JavaScript فقط.

يمكنك تعلُم أي مكتبة منهم و لكن أنصح ب React فهي الأكثر شُهرة و طلبًا في سوق العمل هذه الأيام "على كلٍ إذا تعلمت أحد هذه المكتبات و تقدمت إلى وظيفة تطلب مكتبة أخرى سيقومون بتعليمك إيّاها إذا وجدوا أن أعمالك و مهاراتك ممتازة و مناسبة للوظيفة "

و لكن هذا لا يعني أننا قُمنا بالاستغناء تمامًا عن التقنيات السابقة.

و لكن فيما يخص JQuery بدأ المُجتمع البرمجي بالاستغناء عنها الآن "نسخة bootstrap 5 النسخة الأخيرة استغنت كُليًا الآن عن JQuerry و أصبحت تستخدم DOM ب Vanilla JavaScript " بسبب المشاكل التي تحدث بسببها خاصةً أنه يمكن القيام بنفس الوظائف التي تقوم بها JQuery ب DOM ب Vanilla JavaScript الآن أي جافاسكريبت بدون أي مكتبات. لذلك أنصحك بتعلُم DOM بدلًا من JQuery.

بالتوفيق.

قبل أن نسأل عن React فلنسأل : لماذا يجب أن أستخدم الجافاسكريبت في أمور أستطيع فعلها في HTML ﻷن React ما هي إلا Javascript Framework.

الجواب هو أننا لا نستخدم javascript في أمور نستطيع فعلها بالـHTML بل في أمور لا تستطيع HTML وحدها فعله مثل إظهار modal عند الضغط على زر أو إظهار رسائل الخطأ الخاصة بالـform validation عند submit أو Ajax وغير ذلك من اﻷمور.

اﻵن بعد أن علمنا لم نستخدم الجافاسكريبت يصير سؤال React أسهل وهو: لماذا نستعمل React في أمور نستطيع حلها بالـvanilla javascript ؟ الجواب: ﻷن الـReact يعطيك طريقة Declarative UI في بناء الواجهات ومثال على ذلك هو Todo List المشهور فبدلاً من أن تقول "عند الضغط على زر كذا أنشئ div ، ضع محتواها إلى كذا وأضفها بعد آخر عنصر" أو "عند الضغط على أيقونة السلة على يمين المهمة قم بالبحث عن المهمة المراد حذفها بخوارزمية ما ثم احذفها من DOM ولا تنسى أن تعدل عداد المهام وغير ذلك"

بدلاً من كل هذا تخبر الـReact : "واجهة Todo list عبارة عن ul وعنصر li من أجل كل مهمة موجودة ضمن متحول state وspan خارج ul يحوي عداد المهام وهو state.tasks.length" بهذه الطريقة يصير حذف مهمة مجرد حذف عنصر من مصفوفة وإضافة مهمة مجرد push وتعديل مهمة مجرد تعديل عنصر داخل مصفوفة وهكذا، هذه الطريقة أسهل بكثير من vanilla javascript ولا يعلم ذلك حق المعرفة إلا من جرب العمل بدون React أو أمثاله.

مثل ماذا ؟