السابق

التالي

مقدمة

مكتمل

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

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

الأهداف

في هذه الوحدة النمطية، ستقوم بما يلي:

• إضافة حالة إلى تطبيق.
• إضافة معالجات الأحداث.
• استخدام Effect Hook للاستجابة إلى تغييرات الحالة.

المتطلبات الأساسية

• معرفة JavaScript، وHTML، وCSS
• فهم أساسي لمكونات React
• محرر التعليمات البرمجية، مثل Visual Studio Code
• Node.js تم تثبيته محلياً
• Git تم تثبيته محلياً
• مشروع البداية موضح في المقطع التالي

استنساخ المشروع

تستخدم هذه الوحدة النمطية مشروع مبتدئ. استنساخ المشروع وفتحه في Visual Studio Code.

1. للحصول على مشروع البداية، قم بتشغيل الخطوات التالية في نافذة الأمر أو نافذة الوحدة الطرفية. تنسخ هذه الخطوة المستودع، وتفتح مجلد البدء في Visual Studio Code.

   # Windows
   git clone https://github.com/MicrosoftDocs/mslearn-react
   cd mslearn-react\code\3-state-events\start
   code .
   

   # macOS or Linux
   git clone https://github.com/MicrosoftDocs/mslearn-react
   cd mslearn-react/code/3-state-events/start
   code .
   

2. في Visual Studio Code، افتح "Integrated Terminal" عن طريق تحديد "View>Terminal". أو حدد Ctrl+`. (على Mac، حدد Cmd+`.)

3. في الوحدة الطرفية «Terminal»، قم بتشغيل التعليمة البرمجية التالية؛ لتثبيت الحزم الضرورية، وبدء تشغيل خادم التطوير.

   npm install
   npm start
   

4. يجب فتح المتصفح الافتراضي تلقائيًا. إذا لم يحدث ذلك، افتح المتصفح وانتقل إلى http://locahost:8080. يتم فتح صفحة البداية.

متابعة