Back to Intro to Storybook
Chapters
  • !ابدأ
  • مكون بسيط
  • مكون مركب
  • البياتات
  • واجهات
  • أطلق
  • الاختبار
  • الإضافات
  • الخلاصة
  • ساهم

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

جهّز ستوريبوك في بيئة التطوير الخاصة بك
هذه الترجمة المجتمعية لم يتم تحديثها إلى اخر اصدار من ستوريبوك بعد. ساعدنا في تحديثها عن طريق اتباع التغييرات في دليل العربية في هذه الترجمة طلبات Pull مرحب بها.

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

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

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

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

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

# 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 وفقا إلى ذلك.

أشكال واجهة تطبيقنا الأمامية الثلاث: اختبار مميكن (جست) وتطوير المكونات (ستوريبوك) والتطبيق بحد ذاته.

ثلاث أشكال

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

تنفيذ التغييرات

في هذه المرحلة من الآمن أن نضيف ملفاتنا إلى مستودع محلي. نفذ الأوامر التالية لتهيئة مستودع محلي, اضف ونفذ التغييرات التي قمنا بها حتى الأن.

Copy
git init

يتبعها:

Copy
git add .

ثم أخيرا:

Copy
git commit -m "first commit"

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

Keep your code in sync with this chapter. View bf3514f on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
مكون بسيط
قم ببناء مكون بسيط بشكل منعزل
✍️ Edit on GitHub – PRs welcome!
Join the community
6,614 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI