React.js: مقدّمة إلى React.js

مرحبا، اسمي توني. ستتعلم في هذه الدروس سبب اختيار React بدلاً من العادي JavaScript بتنسيق HTML وإنشاء تطبيق React جديد باستخدام أداة Create React App. في هذا الدرس سوف نلقي نظرة على ما هي React فعلا وكيف أصبحت. React هي مكتبة جافا سكريبت. وهي مفتوحة المصدر، أي أنه شفرة أو كود. مصدر يمكن الوصول إليها وعرضها من قبل أي شخص. وتم إنشاؤها بواسطة الفيسبوك مع. نية توحيد الويب أيضًا. كتصميم واجهة مستخدم متنقلة تحت مظلة واحدة مشتركة. لقد كانت موجودًا بالفعل منذ فترة طويلة مع الإصدار الأول من React تم تقديمه للجمهور عام 2013. ومع ذلك، منذ عام 2018 تقريبًا، تطورت بسرعة كبيرة مما أدى إلى ظهور أطر عمل متقدمة أخرى مثل NextJS في الواقع باستخدام React كقاعدة والبناء على القمة. لقدراتها المدهشة والشاملة بالفعل. يستخدم React في الغالب للتطبيقات الديناميكية. وهذا يعني أن محتواها يتغير مع تغير البيانات وراء الواجهة. الآن مع الموقع القديم القياسي لم يكن الأمر كذلك. لذلك في كل مرة يذهب المستخدم. إلى عنوان URL جديد مرتبط بتطبيق، يجب إصدار طلب Http جديد وجميع المحتويات التي تتكون منها الصفحة. لذا فإن كل رسم، وكل شيء في القائمة العلوية، والشريط الجانبي، والتذييل سينبغي إعادة الحصول عليه من الصفر وإعادة عرضها مرارًا وتكرارًا. إذا كنت تستطيع أن تتخيل، فهذا ليس فعال للغاية ويحل React هذه المشكلة. من خلال استخدام العرض الجزئي وترطيب البيانات. ما يعنيه ذلك هو أنه بمجرد تحميل القالب الخاص بنا في المتصفح، سيتم فقط. تحديث البيانات التي تختلف عن الحالة المعروضة حاليًا. على عكس موقع المدرسة القديمة الذي تم الاعتماد عليه. نموذج خادم عميل المدرسة القديمة. ما يعنيه هذا أن الأجزاء الوحيدة التي تتغير في شاشة المستخدم هي تلك التي تختلف عن الحالة المعروضة حاليًا. على هذا النحو، لم يعد التنقل من صفحة إلى أخرى يتسبب في إعادة عرض كاملة لكل شيء يراه المستخدم. يؤدي هذا إلى استراتيجية إنتاجية بيانات أكثر كفاءة حيث يلزم نقل بيانات أقل من الخادم إلى العميل. بالإضافة إلى ذلك، هناك ميزة أخرى تستخدمها React لتحقيق تعزيز الأداء وهي استخدام Shadow Dom. الآن من المحتمل جدًا أن تكون مألوفًا. مع Dom القياسية، ولكن فقط للتأكد من أننا جميعا على. متفقين على نفس الشيء dom هو اختصار. الذي يرمز إلى وحدة كائن المستند Document Object Module. عندما يتم تحميل صفحة الويب الخاصة بنا، والتي يشار إليها على أنها مستند في المتصفح، يتم تحليل محتواها ويتم تحميل كل المعلومات حول الكائن، وهيكله، وجميع أجزائه التي تشكله، في ذاكرة العميل أو المتصفح. لكن لسوء الحظ بالنسبة لنا، إلى جانب كل ما يتعلق بتطبيقنا، تنتهي أشياء أخرى هناك أيضًا و إنها تتعلق بالوظيفة الأساسية للمتصفح. هذا ليس مفيدا جدا بالنسبة لنا. وهذا هو المكان الذي يأتي فيه Shadow Dom، Shadow Dom هو مجموعة فرعية من Dom العادي، وميزته الرئيسية هي. أن المعلومات الوحيدة التي يحتفظ بها هي المعلومات المتعلقة بتطبيقنا ولا شيء آخر على الإطلاق. وجود أشياء أقل في Shadow Dom من Dom هو بالطبع مفيد. وتطبيق كل ذلك على تطبيقنا يعني فقط أننا نستطيع تخزين واستخراج ومعالجة الأجزاء التي نحتاجها فقط وهذا يؤدي إلى زيادة كبيرة في الأداء. رد الفعل يعتمد على المكونات، وهذا يعني أن. لتحقيق النتائج التي نسعى إليها، سنقوم بتقسيم تطبيقنا إلى سلسلة من المكونات لتغليف كل جزء مرئي من واجهة المستخدم وهذا يمنحنا القدرة على إعادة استخدام. مكوننا في جميع أنحاء الموقع، مما يؤدي إلى تسريع جهود التطوير لدينا. وبالإضافة إلى ذلك، فإنه يؤدي إلى التوحيد في. التطبيق، وبالتالي تمكين تجربة مستخدم أكثر سلاسة وأقل إرباكًا وأكثر شمولاً، حيث أنه سيتم استخدام المكونات المستخدمة لأشياء مماثلة بطريقة مماثلة خلال التطبيق. أخيرًا، بالنسبة لأولئك الذين قد يكونون على دراية بأطر عمل JavaScript الأخرى، توفر React ربطًا للبيانات باتجاه واحد. ما يعنيه ذلك هو البيانات الموجودة في داخل التطبيق لدينا تتدفق في اتجاه واحد، في اتجاه واحد فقط، من الأصل العلوي. إلى المكون التابع السفلي. في الدرس القادم، سوف نلقي نظرة على سبب استخدامنا React عبر جافا سكريبت العادي في HTML. شكرا لمشاهدتك. إلى اللقاء.