react exercise
1.0.0
يهدف هذا التمرين إلى التعرف على مفاهيم React الأساسية بطريقة تفاعلية ، بالإضافة إلى أن تشعر بالراحة في التطور في بيئة Node.js الحديثة. سيتم تقسيم هذا المشروع إلى أجزاء متعددة. سيغطي كل جزء مفهوم رد الفعل/الواجهة الأمامية الأساسية.
سيكون دليل المبتدئين في React ودليل المبتدئين في React مفيدًا للغاية للذهاب للحصول على فهم كامل حول أساسيات React. سيكون من المفيد أيضًا الحصول على غوص مريح في مستندات React ومستندات JavaScript كجزء من هذا التمرين.
تثبيت العقدة و NPM هنا.
تحقق مما إذا كان لديك الإصدارات الصحيحة عن طريق تشغيل الأوامر التالية في المحطة الخاصة بك:
node -v
npm -v
قم بتثبيت DevTools React للتصحيح بسهولة ومعرفة ما يجري في تطبيق React الخاص بك.
قد لا يدعم محرر النصوص الخاص بك أصلاً لبناء JSX الذي يتم استخدامه في هذا المشروع ، ولكن قد يكون هناك مكونات إضافية للحصول على تسليط الضوء على بناء الجملة. على سبيل المثال ، يستخدم Sublime Text البرنامج المساعد Babel .
أولا ، شوكة هذا المستودع. زر الشوكة في الجزء العلوي الأيمن الخاص بك. ما يفعله هذا هو نسخ هذا المستودع إلى حسابك. الآن يجب أن يكون لديك مستودع يحمل اسم <yourusername>/react-exercise .
يجب أن يبدو هذا (اسم المستخدم الخاص بي هو Davidachang): 
بعد ذلك ، استنساخ هذا المستودع (انقر فوق الزر الأخضر قائلاً "استنساخ أو تنزيل" ، واختر HTTP ، ونسخه ولصقه في الموقع <url> ) وانتقل إليه:
$ git clone <url>
$ cd react-exercise
تثبيت تبعيات المشروع:
npm install
بعد ذلك ، قم بتشغيل هذا لبدء التطوير:
npm start
سيبدأ هذا في تشغيل التطبيق وفتحه تلقائيًا على http: // localhost: 3000. في أي وقت تقوم فيه بتغيير وحفظ الكود ، سيتم إعادة تحميله تلقائيًا! ستبقى هذه عملية تشغيل في المحطة الخاصة بك ، لذلك ستحتاج إلى فتح علامة تبويب أو نافذة جديدة لتنفيذ أوامر أخرى.
Purttier هي أداة تقوم تلقائيًا بإعادة تهيئة الكود لمتابعة مجموعة معينة من إرشادات نمط الترميز. تم تكوينه لتشغيله تلقائيًا قبل التزام. هذا يضمن أن جميع التعليمات البرمجية لدينا تتبع نفس أنماط التعليمات البرمجية ، وفرض الممارسات الجيدة وتقليل النزاعات.
من المؤكد أنه ليس من الضروري لهذا التمرين ، ولكن هناك ملحقات أجمل يمكنك تثبيتها للمحرر الخاص بك. انظر التعليمات هنا.
الهدف: تعرف على بناء جملة JSX ، بنية المكون ، ومرض الدعائم
المهام:
shouldDisplayImage في مكون Instructions الذي يحدد ما إذا كان سيتم عرض تلميح شعار H4I أم لا الهدف: تعرف على قوائم التقديم ووظائف صفيف JavaScript
المهام:
items دعامة إلى مكون Instructions الذي يحتوي على قائمة بالسلاسلitemsfor أو while الحلقاتالهدف: تعرف على حالة المكون
المهام:
Counter جديدcount على 0الهدف: تعرف على إدخال المستخدم
المهام:
App.js ، قم بعمل إدخال وزر إرسال يضبط حالة initialCountinitialCount كقائد للمكون Counter ، واستخدم هذه القيمة count أولي في Counter . تأكد من الانتباه إلى الأنواع عند القيام بذلك ، نظرًا لأن إدخال المستخدم عبارة عن String ونريد إرسال Number .<button type="button" ... الهدف: فهم تواصل الدولة/الدعائم بين مكونات الأخوة
المهام:
input والإرسال في مكونه الخاص يسمى InitialCountForm وهو طفل لمكون Appالهدف: تعرف على CSS/SCSS والتصميم
المهام: لا شيء محدد ، العب مع التصميم!
ملاحظة: يمكنك إنشاء ملفات SCSS ، وسيتم تجميعها تلقائيًا إلى ملفات CSS عند حفظها ، ولكن تحتاج إلى استيراد ملف CSS إلى المكون الخاص بك.
بعض الموارد ذات الصلة بالتصميم:
دليل المبتدئين
MDN - إعادة تقديم إلى JavaScript
دليل المبتدئين للرد
مستندات رد فعل
دليل نمط جافا سكريبت Airbnb
دليل أسلوب رد الفعل الخاص بـ Airbnb
دليل نمط CSS Airbnb
عندما تنتهي من جميع الخطوات ، ادفع التغييرات الخاصة بك إلى repo github!
قبل أن تتمكن من إرسال العلاقات العامة ، سيتعين عليك دفع فرعك إلى فرع بعيد (واحد على Github ، وليس محليًا).
تحقق لترى أنك في فرعك:
git branch
إذا كنت ترغب في التأكد من أن جميع الاهتمامات الخاصة بك في:
git log
اضغط على Q لإنهاء شاشة git log .
ادفع ارتباطاتك إلى فرعك البعيد:
git push
في المرة الأولى التي تقوم فيها بذلك ، قد تحصل على خطأ لأن فرعك البعيد غير موجود بعد. عادة ما يخبرك بالأمر الصحيح لاستخدامه:
git push --set-upstream origin <YOUR_BRANCH_NAME>
ملاحظة: يجب القيام بذلك فقط في المرة الأولى التي تدفع فيها فرعًا جديدًا. يمكنك استخدام git push فقط بعد ذلك.
بمجرد الانتهاء من ذلك ، يرجى إرسال بريد إلكتروني إلى [email protected] مع الرابط لمستودعك المتشعب واسم فرعك. سنحتاج إلى هذين الأمرين لعرض تقديمك.
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
