دروس ستوريبوك مع رياكت
ستوريبوك يعمل جنبا إلى جنب مع تطبيقك في بيئة التطوير. يساعدك على بناء مكونات واجهة مستخدم منعزلة عن منطق العمل وسياق التطبيق الخاص بك. هذه النسخة من درس "مقدمة عن ستوريبوك" مخصصة لرياكت, نسخ اخرى من هذا الدرس: رياكت نايتف, فيو, انجيولار, سفيلت وإمبر.
تنصيب ستوريبوك رياكت
سنحتاج إلى اتباع بعضا من الخطوات لتجهيز عملية البناء في بيئتنا. للبدأ, نريد ان نستخدم ديجيت لتجهيز نظام البناء. عن طريق هذه الرزمة, يمكنك تحميل قوالب (تطبيقات مبنية جزئيا مع إعدادات افتراضية) لمساعدتك على تتبع سير عمل التطوير بشكل سريع
لنقم بتنفيذ الأوامر التالية
# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox
cd taskbox
# Install dependencies
yarn
الأن يمكننا وبسرعة التحقق من أن البيئات المختلفة لتطبيقنا تعمل بنجاح:
# Run the test runner (Jest) in a terminal:
yarn test --watchAll
# Start the component explorer on port 6006:
yarn storybook
# Run the frontend app proper on port 3000:
yarn start
--watchAll في أمر الاختبار, إدخال هذا العلم يضمن لنا أن كل الاختبارات تنفذ.أثناء تقدمك في هذا الدرس سيتم تعريفك بسيناريوهات اختبار مختلفة. قد ترغب في تعديل نصوص package.json وفقا إلى ذلك.
أشكال واجهة تطبيقنا الأمامية الثلاث: اختبار مميكن (جست) وتطوير المكونات (ستوريبوك) والتطبيق بحد ذاته.
بناء على أي جزء من التطبيق تعمل عليه, قد ترغب في تنفيذ أحد أو بعض من هذه الأوامر بشكل متزامن. بما أن تركيزنا الأن هو انشاء مكون واجهة امامية واحد, سنلتزم بتنفيذ ستوريبوك فقط.
تنفيذ التغييرات
في هذه المرحلة من الآمن أن نضيف ملفاتنا إلى مستودع محلي. نفذ الأوامر التالية لتهيئة مستودع محلي, اضف ونفذ التغييرات التي قمنا بها حتى الأن.
git init
يتبعها:
git add .
ثم أخيرا:
git commit -m "first commit"
لنقم ببناء أول مكون لنا!