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

Name: React.js: مقدّمة إلى React.js
Author: Tony Davydets

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

شاهد الدرس الأول مجانًا — احصل على وصول كامل إلى جميع الدروس الـ1.

اطلب عرضًا توضيحيًا تسجيل الدخول

دورة تدريبية: عند الطلب

مرحبا، اسمي توني. ستتعلم في هذه الدروس سبب اختيار 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. شكرا لمشاهدتك. إلى اللقاء.

مقدِّم الخدمة : Tony Davydets 1 الدروس · 11m باللغات: العربية, الألمانية, الإنجليزية, الإسبانية, الفرنسية, البرتغالية, Chinese

وصف الدورة

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

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

للبدء في React ستكتشف كيفية استخدام الأداة المساعدة لـ Create-React-App لإعداد مشروع React الجديد بسرعة وسهولة. ستتعلم كيفية تثبيت الأداة وتكوينها واستخدامها لإنشاء تطبيق React الأساسي.

بحلول نهاية هذا القسم، سيكون لديك فهم قوي لماهية React ولماذا هي أداة شائعة لتطوير الويب، وكيفية إنشاء تطبيقات React الخاصة بك باستخدام الأداة المساعدة لـ Create-React. ستشكل هذه المعرفة أساسًا قويًا لبقية الدورة التدريبية، حيث تستكشف مواضيع React أكثر تقدمًا وبناء تطبيقات متزايدة التعقيد.

ما ستتعلمه

فهم ماهية React ولماذا تعد أداة قوية لبناء واجهات المستخدم
مقارنة React بلغة JavaScript العادية وفوائد النهج القائم على المكونات
شرح كيف يقوم React Virtual DOM بتحسين الأداء عن طريق تقليل تحديثات العرض
إعداد بيئة تطوير React باستخدام أداة create-react-app
إنشاء تطبيق React أساسي باستخدام create-react-app
تحديد متى يجب استخدام React ولماذا ظهرت React في المقام الأول

النقاط الرئيسية

تعد React أداة لبناء واجهات المستخدم وتوفر مزايا تفوق لغة JavaScript العادية.
تتيح لك React إنشاء مكونات قابلة لإعادة الاستخدام يمكن تحديثها وتعديلها بسهولة، مما يجعلها مناسبة لتطبيقات الويب الكبيرة والمعقدة.
يعمل React Virtual DOM على تحسين الأداء من خلال تقليل عدد التحديثات المطلوبة لعرض التغييرات.
تتيح لك أداة create-react-app إعداد مشروع React جديد وتكوينه بسرعة وسهولة.
تشكل هذه المقدمة أساساً لاستكشاف موضوعات React الأكثر تقدماً وبناء تطبيقات متزايدة التعقيد.

الأسئلة الشائعة

ماذا سأتعلم في هذه الدورة؟

ستتعلم ما هي React ولماذا هي قوية لبناء واجهات المستخدم، ومزايا React مقارنة بلغة JavaScript العادية، والنهج القائم على المكونات، وReact Virtual DOM، وكيفية إعداد بيئة React باستخدام أداة create-react-app.

هل أحتاج إلى خبرة سابقة في JavaScript؟

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

ما هي الموضوعات التي تغطيها الدروس؟

تغطي الدروس موضوعات: ما هي React؟، ولماذا React وليست JavaScript؟، وإنشاء تطبيق React باستخدام أداة create-react-app.

ما الذي سأكون قادراً على القيام به في النهاية؟

في النهاية، سيكون لديك فهم قوي لماهية React، ولماذا هي أداة شائعة لتطوير الويب، وكيفية إنشاء تطبيقات React الخاصة بك باستخدام أداة create-react-app.

هل هذه الدورة مخصصة للمبتدئين في React؟

نعم. إنها مقدمة تغطي سبب ظهور React، ومتى يتم استخدام React، وأداة create-react-app، مما يشكل أساساً لموضوعات React الأكثر تقدماً.