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

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

جهّز ستوريبوك في بيئة التطوير الخاصة بك
هذه الترجمة المجتمعية لم يتم تحديثها إلى اخر اصدار من ستوريبوك بعد. ساعدنا في تحديثها عن طريق اتباع التغييرات في دليل العربية في هذه الترجمة طلبات 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 وفقا إلى ذلك.

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

ثلاث أشكال

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

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

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

git init

يتبعها:

git add .

ثم أخيرا:

git commit -m "first commit"

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

Keep your code in sync with this chapter. View 9245261 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!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify