جافا سكريبت

ما هو React JS؟

React JS هي مكتبة JavaScript تُستخدم في تطوير الويب لبناء عناصر تفاعلية على مواقع الويب. ولكن إذا لم تكن معتادًا على استخدام مكتبات جافا سكريبت أو جافا سكريبت ، فهذا ليس تعريفًا مفيدًا. لذلك دعونا نتراجع خطوة إلى الوراء ونتعامل مع هذه الشروط أولاً.
ما هي مكتبة جافا سكريبت؟
من المقال السابق يمكنك أن ترى كيف تلعب JavaScript دورًا مهمًا في تطوير مواقع الويب وتطبيقات الويب. ولكن هناك أوقات تحتاج فيها إلى JavaScript لأداء وظائف متكررة – أشياء مثل تأثيرات الرسوم المتحركة للمخزون أو ميزات شريط البحث الإكمال التلقائي. تصبح إعادة ترميز هذه الوظائف في كل مرة تحدث فيها حالة “إعادة اختراع العجلة”. مزعج. هذا هو المكان الذي تأتي فيه مكتبات JavaScript. مكتبات JavaScript عبارة عن مجموعات من تعليمات JavaScript البرمجية المكتوبة مسبقًا والتي يمكن استخدامها لمهام JS الشائعة ، مما يسمح لك بتجاوز عملية الترميز التي تستغرق وقتًا طويلاً (وغير الضرورية) يدويًا. إذا كانت هناك وظيفة جافا سكريبت جاهزة للاستخدام والتي لا تزال بحاجة إلى ترميزها (والمطورين الآخرين قبل أن تحتاجهم لمشاريعهم الخاصة) ، فمن المحتمل وجود مكتبة JS لتخفيف العبىء . منطقي؟ حسنًا ، فلنعد إلى React.
هناك العديد من مكتبات JS المختلفة ، و React JS هي واحدة منها – ولكن ما الذي يجعلها فريدة من نوعها؟ ما هو استخدام React JS ، ولماذا يجب أن تتعلم React JS؟ وهل هي أفضل من مكتبات JavaScript الأخرى؟
لماذا يستخدم مطورو جافا سكريبت React JS؟
React هي مكتبة JavaScript متخصصة في مساعدة المطورين على بناء واجهات مستخدم أو واجهات مستخدم. من حيث مواقع الويب وتطبيقات الويب ، فإن واجهات المستخدم هي مجموعة من القوائم التي تظهر على الشاشة وأشرطة البحث والأزرار وأي شيء آخر يتفاعل معه شخص ما لاستخدام موقع ويب أو تطبيق.
قبل React JS ، كان المطورون عالقين في بناء واجهات المستخدم يدويًا باستخدام “vanilla JavaScript” (يتحدث المطور عن لغة JavaScript الأولية من تلقاء نفسه) أو باستخدام أسلاف React الأقل تركيزًا على واجهة المستخدم مثل jQuery. وهذا يعني أوقات تطوير أطول وفرصًا كثيرة للأخطاء والأخطاء
بالإضافة إلى توفير رمز مكتبة React القابل لإعادة الاستخدام (توفير وقت التطوير وتقليل فرصة حدوث أخطاء في الترميز) ، تأتي React بميزتين رئيسيتين تضيفان إلى جاذبيتها لمطوري JavaScript:
JSX
Virtual DOM

للحصول على فهم أفضل لـ React JS ولماذا يجب عليك استخدامها ، دعنا نلقي نظرة على كليهما.
(JSX (JavaScript extensions
توجد مستندات HTML في قلب أي موقع ويب أساسي. تقرأ مستعرضات الويب هذه المستندات وتعرضها على الكمبيوتر أو الجهاز اللوحي أو الهاتف كصفحات ويب. أثناء هذه العملية ، تنشئ المتصفحات شيئًا يسمى نموذج كائن المستند (DOM) ، وهو شجرة تمثيلية لكيفية ترتيب صفحة الويب. يمكن للمطورين بعد ذلك إضافة محتوى ديناميكي إلى مشاريعهم عن طريق تعديل DOM بلغات مثل JavaScript.
JSX (اختصار لـ JavaScript extensions) هو امتداد React يجعل من السهل على مطوري الويب تعديل DOM الخاص بهم باستخدام كود بسيط على غرار HTML
وبما أن دعم متصفح React JS يمتد إلى جميع متصفحات الويب الحديثة ، فإن JSX متوافق مع أي نظام أساسي للمتصفح قد تعمل معه.
هذه ليست مجرد مسألة راحة ، على الرغم من أن استخدام JSX لتحديث DOM يؤدي إلى تحسينات كبيرة في أداء الموقع وفعالية التطوير. كيف؟ الأمر كله يتعلق بميزة React التالية ، Virtual DOM.

Virtual DOM
إذا كنت لا تستخدم React JS (و JSX) ، فسيستخدم موقع الويب الخاص بك HTML لتحديث DOM الخاص به (العملية التي تجعل الأشياء “تتغير” على الشاشة دون أن يضطر المستخدم إلى تحديث الصفحة يدويًا). يعمل هذا بشكل جيد مع مواقع الويب الثابتة والثابتة ، ولكن بالنسبة لمواقع الويب الديناميكية التي تتضمن تفاعلًا كثيفًا من المستخدم ، يمكن أن تصبح مشكلة (نظرًا لأن DOM بأكمله يحتاج إلى إعادة التحميل في كل مرة ينقر فيها المستخدم على ميزة تدعو إلى تحديث الصفحة).
ومع ذلك ، إذا استخدم مطور JSX لمعالجة وتحديث DOM الخاص به ، فإن React JS ينشئ شيئًا يسمى Virtual DOM. DOM الظاهري (كما يوحي الاسم) هو نسخة من DOM للموقع ، ويستخدم React JS هذه النسخة لمعرفة أجزاء DOM الفعلية التي تحتاج إلى تغيير عند حدوث حدث (مثل نقر المستخدم على زر).
لنفترض أن مستخدمًا أدخل تعليقًا في نموذج مشاركة مدونة وضغط على الزر “تعليق”. بدون استخدام React JS ، سيتعين على DOM بأكمله للتحديث ليعكس هذا التغيير (باستخدام الوقت وقوة المعالجة اللازمين لإجراء هذا التحديث). من ناحية أخرى ، تقوم React بمسح DOM الظاهري لمعرفة ما تغير بعد إجراء المستخدم (في هذه الحالة ، يتم إضافة تعليق) وتحديث هذا القسم بشكل انتقائي من DOM فقط.
يتطلب هذا النوع من التحديث الانتقائي طاقة حوسبية أقل ووقت تحميل أقل ، والذي قد لا يبدو كثيرًا عندما تتحدث عن تعليق مدونة واحد ، ولكن – عندما تبدأ في التفكير في كل الديناميكيات والتحديثات المرتبطة حتى مع موقع الويب ستدرك أنه يضيف الكثير.
هل يجب أن أتعلم React JS؟
إذا كنت ترغب في العمل كمطور ويب أمامي (مما يعني إنشاء واجهات مستخدم) ، فإن الإجابة هي نعم!إن تحقيق النجاح في تطوير الويب يعني استخدام الأدوات المناسبة لجعل فعالة وفعالة قدر الإمكان.
وعندما يتعلق الأمر ببناء واجهات المستخدم ، فإن React JS هي أداة تحتاج إلى معرفة كيفية الاستفادة منها. إذا كنت مستعدًا للتفاعل (بالإضافة إلى مهارات مطوري الويب المهمة الأخرى مثل JavaScript و HTML و CSS)

اظهر المزيد

مقالات ذات صلة

زر الذهاب إلى الأعلى

أنت تستخدم إضافة Adblock

الاعلانات هي مصدرنا الوحيد لدفع التكلفة التشغيلية لهذا المشروع الريادي يرجى الغاء تفعيل حاجب الأعلانات