ما هي React js وما اهميتها ؟

 (React JS)

ما هي React JS?

هي مكتبة JavaScript تُستخدَم لبناء واجهات المستخدم. تُدار React من شركة Facebook بالإضافة إلى مجتمع كبير من المطورين، فهي مشروعٌ مفتوح المصدر.
تُسهِّل React عملية إنشاء واجهات مستخدم تفاعليّة. عليك فقط تصميم عروض (views) لكل حالة في تطبيقك، وستُحدِّث React المكوّنات الصحيحة بكفاءة وتقوم بتُصيّرها عندما تتغير بياناتك.
تعتمد React بشكل أساسي على مفهوم المكوّنات (Components). حيث يجب عليك بناء مكوّنات مُغلَّفة تُدير حالتها الخاصّة، ومن ثمّ تُركِّب هذه المكوّنات مع بعضها لإنشاء واجهات مستخدم مُعقّدة. ولمّا كان منطق المكوّنات مكتوبا باستخدام JavaScript بدلًا من صيغة القوالب، فبإمكانك تمرير الكثير من البيانات عبر تطبيقك بسهولة وإبقاء الحالة بعيدة عن DOM.
تسير React على مبدأ «تعلّم مرّة واكتب في أي مكان»، إذ لا تفترض تعاملك مع تقنية مُحدّدة، بل تستطيع تطوير ميزات جديدة فيها دون إعادة كتابة شيفرة جديدة. يُمكِن تصيير React على الخادم باستخدام Node.js، ويُمكن من خلالها إنشاء تطبيقات الهواتف النقالة عبر React Native.

لماذا يستخدم مطورو جافا سكريبت React JS؟

React هي مكتبة JavaScript متخصصة في مساعدة المطورين على بناء واجهات مستخدم UI.وواجهة المستخدم في تطبيقات الويب هي مجموعة من القوائم التي تظهر على الشاشة وأشرطة البحث والأزرار وأي شيء آخر يتفاعل معه الزائر عند استخدام موقع الويب.
قبل React JS ، كان المطورون يستخدمون Javascritpt يدويًا بدون مكتبات في بناء واجهات المستخدم  أو باستخدام مكتبات قبل اختراع React مثل jQuery. وهذا يعني أوقات تطوير أطول وفرصًا كثيرة للأخطاء. لذلك ، في عام 2011 ، أنشأ المهندس Jordan Walke  والذى يعمل فى Facebook مكتبة React JS لتحسين عملية تطوير واجهة المستخدم.
بالإضافة إلى ميزة توفير وقت التطوير وتقليل فرصة حدوث أخطاء في الكود ، تأتي React بميزتين رئيسيتين تضيفان إلى جاذبيتها لمطوري JavaScript:

• JSX

• Virtual DOM

للحصول على فهم أفضل لـ React JS ولماذا يجب عليك استخدامها ، دعنا نلقي نظرة على كليهما.

JSX

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

JSX (اختصار لـ JavaScript XML) هو امتداد React يجعل من السهل على مطوري الويب تعديل DOM الخاص بهم باستخدام كود بسيط على غرار HTML. وبما أن دعم متصفح React JS يمتد إلى جميع متصفحات الويب الحديثة ، فإن JSX متوافق مع أي نظام أساسي للمتصفح قد تعمل معه.

Virtual DOM

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

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

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

تقلل هذه الطريقة من الزمن والموارد اللازمة لمعالجة تحديث DOM، وكما ذكرنا فى المواقع الصغيرة وذات التفاعل القليل مع واجهة المستخدمة لا تفيد هذه الطريقة لان تأثير تحديث DOM صغيرًا ولكن مع التطبيقات التى تحتوى الكثير من التفاعل مع واجهة المستخدم  فأن مسألة استخدام Virtual DOM تصبح اكثر اهمية.

تشتهر React js بعدة ميزات تجعلها على رأس القائمة عند الحديث عن متطلبات سوق العمل ومنها:

• التفاعل ضمن الواجهات

من السهل بناء واجهة تفاعلية مميزة باستخدام الرياكت، حيث تعتمد على الحالة في التنقل بين العناصر، يمكن بناء View لكل حالة تمر بها البيانات وستقوم الرياكت بالتنقل بمرونة بين الحالات عند حصول أي تغيير للبيانات، مما يجعلها توفر الكثير من العناء والجهد في بناء واجهات تفاعلية.

• واجهات معتمدة على المكونات

تعتمد واجهات الرياكت على ترتيب مجموعة من المكونات المبنية بشكلٍ منفصل لتشكيل الواجهة، حيث يكون لكل مكون Component قواعده البرمجية الخاصة وحالاته وتفاعله مع البقية ويمكن بسهولة إعادة استخدامه في أي واجهة أخرى، وبما أن المكونات تبنى عن طريق لغة جافا سكريبت؛ فهذا يجعل من السهل تمرير ما يلزم من البيانات للمكونات وهذا بديل جيد لاستخدام القوالب الجاهزة.

• تعدد الاستخدامات

يوضح الموقع الرسمي للرياكت إمكانية إعادة استخدامها في أماكن مختلفة، حيث يكفي أن تتعلم القواعد الأساسية لاستخدامها لتتمكن من بناء واجهات مرنة للمواقع الإلكترونية والانتقال لبناء برمجيات تتعلق بالسيرفر عن طريق استخدام Node، وأيضًا بناء تطبيقات موبايل قوية لمختلف المنصات عن طريق React Native.

ما هو Component?

ذكرنا أن الرياكت تعتمد على المكونات وهنا أهم ما يجب معرفته حول المكونات Components بصفتها العنصر الأهم في الرياكت :

• البساطة: تتميز المكونات ضمن الرياكت ببساطة تكوينها، حيث يمكننا كتابة اسم المكون أو حتى تعريف المكون بكامله ضمن العملية render والتي تأخذ البيانات اللازمة لتعيد لنا العناصر الواجب عرضها على الشاشة.

• سهولة التحكم: تعتمد المكونات على الخصائص والحالات، أي أنه إذا كان العنصر زرًا مثلًا ونود استخدامه في مكان آخر؛ فعلينا فقط استدعاؤه بكتابة اسمه في المكان الواجب ظهوره فيه مع تمرير خاصية الاسم له دون الحاجة إلى أي كود إضافي، وبالنسبة للحالات فهي تتغير بتغير حالة التطبيق ففي مثالنا عند الاعتماد على الحالة ودون كتابة أي كود سيتغير اسم المكون.

• بناء تطبيقات كاملة من المكونات: يمكن فقط بالاعتماد على المكونات وتغيير حالتها وخصائصها بناء تطبيقات كاملة ومرنة، حيث يمكن إضافة أي كود JavaScript إلى الواجهة بمرونة وبرمجة ما يلزم من المكونات وهذا كل شيء.

بالتوفيق للجميع