دروس ستوريبوك مع رياكت

جهّز ستوريبوك في بيئة التطوير الخاصة بك

ستوريبوك يعمل جنبا إلى جنب مع تطبيقك في بيئة التطوير. يساعدك على بناء مكونات واجهة مستخدم منعزلة عن منطق العمل وسياق التطبيق الخاص بك. هذه النسخة من درس "مقدمة عن ستوريبوك" مخصصة لرياكت, نسخ اخرى من هذا الدرس: رياكت نايتف, فيو, انجيولار, سفيلت وإمبر.

ستوريبوك وتطبيقك

تنصيب ستوريبوك رياكت

سنحتاج إلى اتباع بعضا من الخطوات لتجهيز عملية البناء في بيئتنا. للبدأ, نريد ان نستخدم ديجيت لتجهيز نظام البناء. عن طريق هذه الرزمة, يمكنك تحميل قوالب (تطبيقات مبنية جزئيا مع إعدادات افتراضية) لمساعدتك على تتبع سير عمل التطوير بشكل سريع

لنقم بتنفيذ الأوامر التالية

# 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"

لنقم ببناء أول مكون لنا!

Next Chapter
مكون بسيط
قم ببناء مكون بسيط بشكل منعزل