כיצד להגדיר ספר סיפורים ב-React

אחד היתרונות של השימוש ב-React הוא שאתה יכול ליצור רכיבי ממשק משתמש, לעשות בהם שימוש חוזר בכל האפליקציה שלך ובסופו של דבר להימנע מחישת קוד. ובכל זאת, קשה ליצור רכיבי ממשק משתמש עצמאיים לחלוטין עם React בלבד. תצטרך ליצור תצוגות שמציגות את הרכיבים האלה כדי לראות אותם.

כאן נכנס לספר סיפורים. זה מאפשר לך ליצור ולבדוק רכיבי ממשק משתמש בסביבת זמן ריצה עצמאית ובמדריך זה תלמד כיצד להשתמש בו ב-React. בסוף הפוסט הזה, תיצור רכיב כפתור ותתעד כמה מהמצבים האפשריים שלו ב-React.

מהו ספר סיפורים?

ספר סיפורים הוא כלי פיתוח המאפשר לך להפעיל ולבדוק את רכיבי ממשק המשתמש שלך ללא סביבת React שלמה. זה עושה פיתוח מונחה רכיבים קל יותר כי אתה יכול לפתח את הרכיבים בבידוד.

עם Storybook, ברגע שאתה יוצר רכיב, אתה יכול ליצור מספר סיפורים המגדירים את המצבים השונים של הרכיב. עבור רכיב לחצן, מצבים אלה יכולים לכלול את המצב הראשוני, המצב המשני, מצב השבתה וכן הלאה.

מכיוון ש-Storybook מאפשר לך לכלול קוד בעת יצירת הסיפורים, הוא יכול לשמש גם ככלי תיעוד.

כדי להשתמש ב-Storybook, יהיה עליך להתקין את Node במחשב שלך ולהיות בעל הבנה בסיסית של React.

יצירת אפליקציית React

כדי להתחיל להשתמש ב-Storybook, תחילה תיצור פרויקט React ולאחר מכן ליצור רכיבים והסיפורים שלהם.

הפעל את הפקודה הבאה כדי ליצור יישום React:

npx לִיצוֹר-react-app btn-storybook

זה יפיק תיקיה בשם btn-storybook עם כל התלות שאפליקציית React צריכה.

לאחר מכן, עם מספר שלבים נוספים, תוכל להתקין ולהפעיל את Storybook.

התקנת ספר סיפורים

נווט אל תיקיית btn-storybook והתקן את ספר הסיפורים:

CD btn-סיפורים
npx storybook init

מכיוון שהשתמשת ב-create-react-app, זו הפקודה היחידה שאתה צריך להפעיל כדי להגדיר Storybook. Storybook יתקין את כל התלות הדרושות ויבצע את כל התצורה הדרושה. זה גם ייצור כמה סיפורי תבנית כדי להתחיל.

לאחר שהפקודה לעיל תסיים לפעול, התחל את ספר הסיפורים באמצעות הקוד הבא.

ספר סיפורים להפעיל npm

פעולה זו תפתח את לוח המחוונים של ספר הסיפורים בדפדפן שלך. זה אמור להיראות בערך כך:

יצירת רכיב הכפתור

בתיקייה ./src, צור תיקיה בשם Components, ובתוכה צור תיקיה נוספת בשם Button. התיקיה Button צריכה להיות בנתיב הזה: ./src/Components/Button.

כעת, בתיקייה זו, צור כפתור והוסף את הקוד הבא:

יְבוּא PropTypes מ "סוגי אביזרים"
function Button({ label, backgroundColor = "#6B4EFF", צבע = "לבן", borderRadius="48 פיקסלים", גבול="אף אחד"}) {
const סגנון = {
 צבע רקע,
 ריפוד: "0.5 רם 1 רם",
 צֶבַע,
 borderRadius,
 גבול
 }
לַחֲזוֹר (
<כפתור סגנון={סגנון}>
 {תווית}
</button>
 )
}
Button.propTypes = {
תווית: PropTypes.חוּט,
צבע רקע: PropTypes.חוּט,
צֶבַע: PropTypes.חוּט,
גבול:PropTypes.string,
borderRadius: PropTypes.חוּט,
}
יְצוּאבְּרִירַת מֶחדָל לַחְצָן;

רכיב זה מקבל חלק אביזרי תגובה הכוללים את תווית הכפתור והסגנונות שלו. אתה גם משתמש ב-propTypes כדי לבדוק את סוגי האביזרים שהועברו ולהעלות אזהרה אם אתה משתמש בסוג הלא נכון. הרכיב מחזיר רכיב כפתור.

יצירת סיפורי הכפתורים

כאשר התקנת Storybook בפרויקט React, הוא יצר תיקיה המכילה כמה דוגמאות סיפור, בשם סיפורים. נווט לתיקיה הזו ומחק את כל מה שיש בה. אתה תיצור את הסיפורים מאפס.

אתה תיצור שני סיפורים המייצגים את הכפתור הראשי ואת הכפתור המשני. לכל אחד מהכפתורים הללו יש סגנון שונה שמפריד בינו לבין השאר. תוכל לראות כל אחד מהם בלוח המחוונים של Storybook לאחר שתיצור את הסיפורים.

בתיקיית הסיפורים, צור קובץ חדש בשם button.stories.js. חשוב לכלול .סיפורים לפני .js שכן זה מה שאומר Storybook שהוא קובץ סיפורים.

ייבא את רכיב הלחצן.

יְבוּא לַחְצָן מ "../רכיבים/כפתור/לחצן"

לאחר מכן ייצא את הכותרת של הרכיב ואת הרכיב עצמו. שימו לב שהכותרת היא אופציונלית.

יְצוּאבְּרִירַת מֶחדָל {
 כותרת: "רכיבים/כפתור",
 רכיב: כפתור,
}

הסיפור הראשון שתיצור הוא עבור הכפתור הראשי. אז, צור פונקציה חדשה בשם Primary וייצא אותה.

ייצוא const ראשי = () =><רקע לחצן צבע="#6B4EFF" תווית="יְסוֹדִי"/>

כעת, אם תעבור ללוח המחוונים של Storybook, תוכל לראות את הכפתור המעובד.

כדי לערוך את הרכיב המעובד בזמן אמת ולשנות את מצבו בלוח המחוונים של Storybook, תשתמש ב- args. Args מאפשרים לך להעביר ארגומנטים ל-Storybook, שכאשר הם משתנים גורמים לרכיב לעיבוד מחדש.

כדי להגדיר את ה-ars של סיפור הכפתורים, צור תבנית פונקציה.

const Template = args =><לחצן {...args}/>

תבנית זו מקבלת ארגומנטים ומעבירה אותם כאביזרים לרכיב הלחצן.

כעת תוכל לשכתב את הסיפור הראשי באמצעות התבנית כפי שמוצג להלן.

יְצוּאconst Primary = Template.bind({})
Primary.args = {
 צבע רקע: "#6B4EFF",
 תווית: "יְסוֹדִי",
}

אם תבדוק את לוח המחוונים של Storybook, אתה אמור לראות פקדים בתחתית. פקדים אלה מאפשרים לך לשנות את אופן הצגת הלחצן. אתה יכול לשנות את צבע הרקע, צבע הטקסט, התווית, הגבול ורדיוס הגבול.

אתה רק צריך לשנות את ערכי args כדי ליצור את הסיפורים האחרים. לדוגמה כדי ליצור כפתור משני, השתמש בקוד הבא.

יְצוּאconst Secondary = Template.bind({})
Secondary.args = {
 צבע רקע: "#E7E7FF",
 צֶבַע: "#6B4EFF",
 תווית: "מִשׁנִי",
}

בלוח המחוונים של Storybook נווט לסיפורים שונים על ידי לחיצה עליהם בסרגל הצד. אתה תראה איך כל אחד מהם מעבד. אתה יכול להמשיך להוסיף מצבים נוספים לסיפורי הכפתורים כרצונך. נסה להוסיף קו מתאר או סיפור מתאר.

בדיקת רכיבי ממשק משתמש

מדריך זה נתן לך מבוא קצר לשימוש ב-Storybook עם רכיבי ממשק המשתמש של React. למדת כיצד להוסיף Storybook לפרויקט React וכיצד ליצור סיפור בסיסי עבור רכיב Button עם args.

אולי שמתם לב שבמהלך תהליך זה בדקתם כיצד רכיב הכפתור הוצג במצבים שונים. יתכן שאתה כותב יותר קוד, אך לאחר שכתבת את סיפורי הרכיבים, תוכל למזער את כל השגיאות שעלולות להתעורר בעת שימוש חוזר ברכיבים באפליקציה שלך. יתר על כן, יהיה קל יותר לאתר את השגיאה אם ​​היא מתרחשת. זה היופי בפיתוח מונחה רכיבים.