كيفية إعداد Storybook في React

تتمثل إحدى مزايا استخدام React في أنه يمكنك إنشاء مكونات واجهة المستخدم ، وإعادة استخدامها في جميع أنحاء تطبيقك ، وفي النهاية تجنب اضطراب الكود. ومع ذلك ، من الصعب إنشاء مكونات واجهة مستخدم مستقلة تمامًا باستخدام React وحدها. ستحتاج إلى إنشاء طرق عرض تعرض هذه المكونات لرؤيتها.

هذا هو المكان الذي يأتي فيه Storybook. يتيح لك إنشاء مكونات واجهة المستخدم واختبارها في بيئة وقت تشغيل مستقلة وفي هذا البرنامج التعليمي ستتعلم كيفية استخدامها في React. بنهاية هذا المنشور ، ستكون قد أنشأت مكون زر ووثقت بعض حالاته المحتملة في React.

ما هو القصص القصيرة؟

القصص القصيرة هي أداة تطوير تتيح لك تشغيل واختبار مكونات واجهة المستخدم الخاصة بك بدون بيئة React كاملة. هذا يجعل تطوير يحركها المكون أسهل لأنه يمكنك تطوير المكونات بشكل منفصل.

باستخدام Storybook ، بمجرد إنشاء مكون ، يمكنك إنشاء قصص متعددة تحدد الحالات المختلفة للمكون. بالنسبة لمكون الزر ، يمكن أن تتضمن هذه الحالات الحالة الأساسية والحالة الثانوية والحالة المعطلة وما إلى ذلك.

نظرًا لأن Storybook يسمح لك بتضمين التعليمات البرمجية عند إنشاء القصص ، فإنه يمكن أيضًا أن يكون بمثابة أداة توثيق.

لاستخدام Storybook ، ستحتاج إلى تثبيت Node على جهازك ولديك فهم أساسي لـ React.

إنشاء تطبيق React

لبدء استخدام Storybook ، ستقوم أولاً بإنشاء مشروع React ومن ثم إنشاء المكونات وقصصها.

قم بتشغيل الأمر التالي لإنشاء تطبيق React:

npx خلق-react-app btn-storybook

سيؤدي هذا إلى إنشاء مجلد يسمى btn-storybook مع جميع التبعيات التي يحتاجها تطبيق React.

بعد ذلك ، ببضع خطوات أخرى ، يمكنك تثبيت وتشغيل Storybook.

تثبيت Storybook

انتقل إلى مجلد btn-storybook وقم بتثبيت Storybook:

قرص مضغوط btn- ستوريبوك
npx Storybook init

نظرًا لأنك استخدمت create-reaction-app ، فهذا هو الأمر الوحيد الذي تحتاجه لتشغيله لإعداد Storybook. سيقوم Storybook بتثبيت جميع التبعيات المطلوبة وإجراء جميع التكوينات اللازمة. سيؤدي أيضًا إلى إنشاء بعض القصص المعيارية لتبدأ.

بمجرد الانتهاء من تشغيل الأمر أعلاه ، ابدأ Storybook باستخدام الكود التالي.

تشغيل npm Storybook

سيؤدي هذا إلى فتح لوحة معلومات Storybook في متصفحك. يجب أن يبدو مثل هذا:

إنشاء مكون الزر

في المجلد ./src ، أنشئ مجلدًا يسمى المكونات ، وأنشئ فيه مجلدًا آخر يسمى Button. يجب أن يكون مجلد الأزرار في هذا المسار: ./src/Components/Button.

الآن ، في هذا المجلد ، قم بإنشاء Button وأضف الكود التالي:

يستورد PropTypes من "أنواع الدعامة"
زر الوظيفة ({التسمية ، لون الخلفية = "# 6B4EFF"، اللون = "أبيض"، borderRadius ="48 بكسل"، الحدود ="لا أحد"}) {
مقدار ثابت النمط = {
 لون الخلفية،
 حشوة: "0.5 ريم 1 ريم",
 اللون،
 الحدود
 الحدود
 }
إرجاع (
<نمط الزر = {style}>
 {ضع الكلمة المناسبة}
</button>
 )
}
Button.propTypes = {
ضع الكلمة المناسبة: PropTypes.سلسلة,
لون الخلفية: PropTypes.سلسلة,
اللون: PropTypes.سلسلة,
الحدود: PropTypes.string,
الحدود: PropTypes.سلسلة,
}
يصدّرإفتراضي زر؛

هذا المكون يقبل بعض رد الفعل الدعائم التي تتضمن تسمية الزر وأنماطه. أنت تستخدم أيضًا propTypes للتحقق من أنواع الدعائم التي تم تمريرها ورفع تحذير إذا كنت تستخدم نوعًا خاطئًا. يقوم المكون بإرجاع عنصر زر.

إنشاء قصص الأزرار

عندما قمت بتثبيت Storybook في مشروع React ، فقد أنشأ مجلدًا يحتوي على بعض أمثلة القصة ، باسم قصص. انتقل إلى هذا المجلد واحذف كل شيء بداخله. سوف تخلق القصص من الصفر.

ستنشئ قصتين تمثلان الزر الأساسي والزر الثانوي. كل زر من هذه الأزرار له نمط مختلف يفصله عن الباقي. ستتمكن من رؤية كل منهم في لوحة معلومات Storybook بمجرد إنشاء القصص.

في مجلد القصص ، قم بإنشاء ملف جديد يسمى button.stories.js. من المهم أن تشمل .stories قبل .js لأن هذا هو ما يخبرنا عن Storybook وهو عبارة عن ملف قصص.

قم باستيراد مكون الزر.

يستورد زر من "../Components/Button/Button"

بعد ذلك ، قم بتصدير عنوان المكون والمكون نفسه. لاحظ أن العنوان اختياري.

يصدّرإفتراضي {
 لقب: "المكونات / الزر",
 المكون: زر ،
}

القصة الأولى التي ستقوم بإنشائها هي للزر الأساسي. لذلك ، قم بإنشاء وظيفة جديدة تسمى Primary وقم بتصديرها.

تصدير const Primary = () =><زر backgroundColor ="# 6B4EFF" التسمية ="الأولية"/>

الآن إذا انتقلت إلى لوحة معلومات Storybook ، فستتمكن من رؤية الزر المعروض.

لتحرير المكون الذي تم عرضه مباشرة وتغيير حالته على لوحة معلومات Storybook ، ستستخدم args. تسمح لك Args بتمرير الوسائط إلى Storybook والتي عند تغييرها تؤدي إلى إعادة تصيير المكون.

لتحديد وسائط قصة الزر ، قم بإنشاء قالب وظيفة.

قالب const = args =><زر {... args} />

يقبل هذا القالب args ويمررها كدعامات إلى مكون Button.

يمكنك الآن إعادة كتابة القصة الأساسية باستخدام القالب كما هو موضح أدناه.

يصدّرمقدار ثابت الأساسي = Template.bind ({})
Primary.args = {
 لون الخلفية: "# 6B4EFF",
 ضع الكلمة المناسبة: "الأولية",
}

إذا قمت بفحص لوحة معلومات Storybook ، فسترى عناصر التحكم في الأسفل. تتيح لك عناصر التحكم هذه تغيير طريقة عرض الزر. يمكنك تغيير لون الخلفية ولون النص والتسمية والحدود ونصف قطر الحدود.

ما عليك سوى تغيير قيم args لإنشاء القصص الأخرى. على سبيل المثال لإنشاء زر ثانوي ، استخدم الكود التالي.

يصدّرمقدار ثابت ثانوي = Template.bind ({})
Secondary.args = {
 لون الخلفية: "# E7E7FF",
 اللون: "# 6B4EFF",
 ضع الكلمة المناسبة: "ثانوي",
}

في لوحة معلومات Storybook ، انتقل إلى قصص مختلفة من خلال النقر عليها في الشريط الجانبي. سترى كيف يتم عرض كل منها. يمكنك الاستمرار في إضافة المزيد من الحالات إلى قصص الأزرار كما تريد. حاول إضافة مخطط أو قصة مخطط تفصيلي.

اختبار مكونات واجهة المستخدم

قدم لك هذا البرنامج التعليمي مقدمة موجزة عن استخدام Storybook مع مكونات React UI. لقد تعلمت كيفية إضافة Storybook إلى مشروع React وكيفية إنشاء قصة أساسية لمكون Button باستخدام args.

ربما لاحظت أنه خلال هذه العملية ، كنت تختبر كيفية عرض مكون الزر في حالات مختلفة. ربما تكتب المزيد من التعليمات البرمجية ، ولكن بمجرد كتابة قصص المكونات ، ستقلل من أي أخطاء قد تظهر عند إعادة استخدام المكونات عبر تطبيقك. علاوة على ذلك ، سيكون من الأسهل تعقب الخطأ في حالة حدوثه. هذا هو جمال التنمية المدفوعة بالمكونات.