React.js: الأساسيات

Name: React.js: الأساسيات
Author: Tony Davydets

تغطي هذه الدورة أساسيات React وهي مكتبة JavaScript لإنشاء واجهات المستخدم. ستقدم مكونات Reactوهي لبنات بناء تطبيقات React. سنشرح أيضًا الاختلافات بين JSX وHTML…

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

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

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

مرحبا، اسمي توني وفي. هذه الدروس سوف نلقي نظرة على. ما هي مكونات الفئة، هيكلها ودوال دورة حياتها، والخاصيات Props، والإدارة والاستخدام. وكذلك إدارة State واستخدامها. في هذا الدرس سنلقي نظرة على ماهية مكون React وكيفية استخدامها وكيف يمكن أن تكون مفيدة لنا في كتابة تطبيق بسرعة وكفاءة بلطف. الآن، المكون هو قطعة من. كود جانب العميل مشابه جدًا لدالة JavaScript القياسية مع اختلاف واحد واضح وهو أن المكون سيرجع دائمًا HTML. وهذا أمر لا بد منه لأنه جزء مرئي سيراه مستخدمنا ويتفاعل معه. عند بناء مكون، فمن الأفضل هيكلته بطريقة تجعله مكتفيًا بذاته ولا يحتوي على أي ترابط على أي شيء آخر في التطبيق. وهذا يعني أنه يمكننا استخدامه بشكل مستقل في أي مكان نريده في تطبيقنا دون إنشاء أي عواقب غير مقصودة التي تأتي من التبعيات الصريحة أو الضمنية. دعنا نلقي نظرة على الشكل الذي تبدو عليه مكونات React. لنبدأ تطبيقنا هنا عن طريق تشغيل أمر NPM start وتطبيقنا. سيبدأ على المنفذ 3000. لهذا الجزء. لقد تقدمت وقمت بالفعل بإنشاء المكونات مسبقًا لحفظ. القليل من الوقت وعدم شعوركم بالملل فقط عن مشاهدتي وأنا أكتب. لذلك دعنا نسقط مكون الفئة في. واجهتنا وانظر كيف يبدو. يمكنك أن ترى ما هو هذا. في الأساس منتقي الألوان وعندما نغير لوننا، يمكننا أن نرى أنه يتم تحديث كل شيء في الوقت الفعلي. الشاشة ويمكن للمستخدم رؤيته في المتصفح. مثال الفئة لديناا يبدو هكذا. لذا. تعمل جميع مكونات فئة React على توسيع مكون React وهو الكيان الذي يتم إنشاؤه وصيانته بواسطة مجموعة React. لذا فهو يأتي مع دالة دورة حياة معينة متاحة له. وسوف نتطرق إلى كل ذلك لاحقًا. في الوقت الحالي، نحن فقط نلقي نظرة على ماهية المكون ونعرف أنفسنا. عليه وعلى طبيعته. الآن هذه الدالة التي يمكنك رؤيتها هي الدالة الوحيدة المطلوبة حقًا لأن هذا هو ما سيعيد HTML أو التمثيل المرئي ل. المكون لدينا وهو ما سيراه المستخدم ويتفاعل معه. كما ذكرنا سابقا. الآن دعنا نلقي نظرة على ما. يبدو عليه المكون الوظيفي. دعنا نسقطه في تطبيقنا أيضًا. يمكننا أن نرى ذلك بصريا ومن الناحية الوظيفية، فهو لا يختلف عن المكون القائم على فئتنا. يبدو ويشعر ويعمل بطريقة مماثلة تماما. ولكن عندما يتعلق الأمر بتنفيذه إنه يختلف قليلاً. يمكنك أن ترى أنه لا يمتد حقًا إلى أي شيء و React ليست حقا مذكورة في أي مكان هنا باستثناء داخل هذا المكون الذي يستخدم بعض الدوال الخاصة التي يتم توزيعها بواسطة مجموعة React. ولكننا سوف نتناولها لاحقًا، دعنا. لا نقلق بشأن هؤلاء أيضا. هناك الكثير في الوقت الحالي، لكننا سنرى. أننا نرى أن هذا مجرد كائن جافا سكريبت عادي وهنا بالطبع هي جزء HTML الخاص بها، وهو مطابق للجزء القائم على الفئة Class لدينا. وهذا ما يراه المستخدم ويتفاعل معه. ولكن كما ترون، فإن هذا يعد مرشحًا جيدًا للمكون لأنه يمرر. واحد آخر من معاييرنا التي قمنا بتحديدها مسبقًا هو أنه مستقل تمامًا ولا يعتمد على أي شيء آخر في التطبيق، مما يعني أننا يمكننا استخدامه بمفرده مع أشياء أخرى في أي مكان آخر في التطبيق دون خلق أي نوع من العواقب غير المقصودة التي تأتي من التبعيات الضمنية أو الصريحة. في درسنا القادم سنأخذ. نظرة على مدى اختلاف JSX. عن HTML العادي وكيفية استخدامه في سياق تطبيق React. شكرا للمشاهدة.

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

وصف الدورة

تغطي هذه الدورة أساسيات React وهي مكتبة JavaScript لإنشاء واجهات المستخدم. ستقدم مكونات Reactوهي لبنات بناء تطبيقات React. سنشرح أيضًا الاختلافات بين JSX وHTML العادي. بالإضافة إلى ذلك، سوف تستكشف استخدام ES6+ و JSX معًا في تطوير React.

تتمثل إحدى الميزات الفريدة لـ React في استخدام JSX وهو امتداد بناء الجملة الذي يسمح بتضمين كود يشبه HTML داخل JavaScript. ستستكشف هذه الوحدة الاختلافات بين JSX وHTML العادية وتوضح كيفية استخدام JSX لإنشاء واجهات مستخدم ديناميكية ومعبرة. بالإضافة إلى JSX ستغطي هذه الوحدة أيضًا استخدام ميزات ES6+ في تطوير React. ES6+ هو إصدار من JavaScript قدم العديد من الميزات والتحسينات الجديدة على اللغة. سوف تتعلم كيفية استخدام ميزات ES6+ مثل دوال Arrow والفئات والنماذج الحرفية بالتزامن مع JSX لإنشاء كود React حديث وفعال.

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

ما ستتعلمه

فهم ماهية مكونات React باعتبارها اللبنات الأساسية لتطبيقات React
التمييز بين JSX ولغة HTML العادية
استخدام JSX لإنشاء واجهات مستخدم ديناميكية وتعبيرية
تطبيق ميزات ES6+ مثل الدوال السهمية، والفئات، والنصوص البرمجية القالبية مع JSX
بناء واجهات مستخدم غنية وتفاعلية باستخدام React

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

إن React هي مكتبة JavaScript لبناء واجهات المستخدم، والمكونات هي اللبنات الأساسية لتطبيقات React.
إن JSX هو امتداد لبنية اللغة يسمح بتضمين كود يشبه HTML داخل JavaScript، وهو يختلف عن لغة HTML العادية.
قدمت ES6+ ميزات مثل الدوال السهمية، والفئات، والنصوص البرمجية القالبية التي تُستخدم مع JSX في تطوير React الحديث.
بنهاية الدورة، سيكون لدى المتعلمين فهم قوي لمكونات React، وJSX، واستخدام ES6+ في تطوير React.

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

ماذا تغطي هذه الدورة؟

تغطي الدورة أساسيات React، بما في ذلك مكونات React، والاختلافات بين JSX ولغة HTML العادية، واستخدام ES6+ مع JSX في تطوير React.

ما هو JSX في React؟

إن JSX هو امتداد لبنية اللغة يسمح بتضمين كود يشبه HTML داخل JavaScript، وتشرح الدورة كيف يختلف عن لغة HTML العادية وكيفية استخدامه لإنشاء واجهات مستخدم ديناميكية وتعبيرية.

ما هي ميزات ES6+ التي سأتعلم استخدامها مع React؟

ستتعلم كيفية استخدام ميزات ES6+ مثل الدوال السهمية، والفئات، والنصوص البرمجية القالبية بالاقتران مع JSX لإنشاء كود React حديث وفعال.

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

سيكون لديك فهم قوي لمكونات React، وJSX، واستخدام ES6+، وستكون مجهزًا لإنشاء تطبيقات React الخاصة بك وبناء واجهات مستخدم تفاعلية وغنية.