ماهو اطار react؟

[Mohammed Tarek 0]

اليوم ، أصبحت أطر العمل والمكتبات الأمامية جزءًا أساسيًا من مجموعة تطوير الويب الحديثة. React.js هي مكتبة أمامية أصبحت تدريجيًا إطار عمل go-to لتطوير الويب الحديث داخل مجتمع JavaScript.

بالنسبة لأولئك المبتدئين في مجال تطوير الويب، أو الذين يحاولون اكتشاف سبب كل هذا العناء ، فلنلقِ نظرة على React، وكيف يعمل، وما الذي يجعله مختلفًا عن أطر عمل JavaScript الأخرى.

 

ما هو React.js؟

إطار عمل React.js هو إطار عمل JavaScript ومكتبة مفتوحة المصدر تم تطويرها بواسطة Facebook. يتم استخدامه لبناء واجهات مستخدم تفاعلية وتطبيقات ويب بسرعة وكفاءة مع رمز أقل بكثير مما تفعله مع Vanilla JavaScript. 

في React ، تقوم بتطوير تطبيقاتك عن طريق إنشاء مكونات قابلة لإعادة الاستخدام يمكنك التفكير فيها على أنها كتل Lego مستقلة. هذه المكونات عبارة عن أجزاء فردية من الواجهة النهائية، والتي، عند تجميعها، تشكل واجهة مستخدم التطبيق بالكامل.

يتمثل الدور الأساسي لـ React في تطبيق ما في التعامل مع طبقة العرض الخاصة بهذا التطبيق تمامًا مثل V في نموذج متحكم عرض النموذج (MVC) من خلال توفير تنفيذ العرض الأفضل والأكثر كفاءة. بدلاً من التعامل مع واجهة المستخدم بأكملها كوحدة واحدة ، يشجع React.js المطورين على فصل واجهات المستخدم المعقدة هذه إلى مكونات فردية قابلة لإعادة الاستخدام تشكل اللبنات الأساسية لواجهة المستخدم بأكملها. عند القيام بذلك، يجمع إطار عمل ReactJS بين سرعة وكفاءة JavaScript وطريقة أكثر فاعلية لمعالجة DOM لعرض صفحات الويب بشكل أسرع وإنشاء تطبيقات ويب ديناميكية وسريعة الاستجابة.

 

ماذا يفعل React.js؟

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

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

بالإضافة إلى ذلك، عندما تتغير البيانات في تطبيق JavaScript تقليدي ، فإنها تتطلب معالجة DOM يدويًا لتعكس هذه التغييرات. يجب تحديد البيانات التي تم تغييرها وتحديث DOM لتعكس تلك التغييرات ، مما يؤدي إلى إعادة تحميل الصفحة بالكامل.

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

يُعرف هذا النمط باسم التوجيه من جانب العميل لأنه لا يتعين على العميل إعادة تحميل صفحة الويب الكاملة للحصول على صفحة جديدة في كل مرة يقدم فيها المستخدم طلبًا جديدًا. بدلاً من ذلك، تعترض React الطلب وتقوم فقط بجلب وتغيير الأقسام التي تحتاج إلى تغيير دون الحاجة إلى تشغيل إعادة تحميل صفحة كاملة. ينتج عن هذا النهج أداء أفضل وتجربة مستخدم أكثر ديناميكية كما نري في Talent Supplier.

تعتمد React على DOM ظاهري ، وهو نسخة من DOM الفعلي. تتم إعادة تحميل DOM الظاهري لـ React على الفور لعكس هذا التغيير الجديد كلما حدث تغيير في حالة البيانات. بعد ذلك ، يقارن React بين DOM الظاهري و DOM الفعلي لمعرفة ما الذي تغير بالضبط.

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