راهنمای مبتدیان برای کتاب داستان – انجمن DEV

Storybook یک ابزار منبع باز است که به توسعه دهندگان کمک می کند تا اجزای خود را جدا از بقیه برنامه بسازند، آزمایش کنند و به نمایش بگذارند. این یک رابط کاربری فراهم می کند که به شما امکان می دهد به طور تعاملی اجزای خود را توسعه و آزمایش کنید. در این پست وبلاگ، یک راهنمای مبتدی برای Storybook به شما ارائه می دهیم و به شما نشان می دهیم که چگونه از آن برای توسعه اجزای خود استفاده کنید.

چرا از کتاب داستان استفاده کنیم؟

Storybook یک ابزار عالی برای توسعه و آزمایش کامپوننت‌ها است، زیرا به شما امکان می‌دهد جدا از بقیه برنامه‌های خود روی آنها کار کنید. این بدان معنی است که می توانید اجزای خود را بدون نگرانی در مورد نحوه تعامل آنها با سایر اجزا یا ویژگی های برنامه خود توسعه دهید. همچنین به این معنی است که می توانید اجزای خود را در یک محیط کنترل شده آزمایش کنید و پیدا کردن و رفع اشکالات را آسان تر می کند.

شروع کار با کتاب داستان

برای شروع کار با Storybook، باید آن را به عنوان یک وابستگی در پروژه خود نصب کنید. با اجرای دستور زیر در ترمینال خود می توانید این کار را انجام دهید:

npm install @storybook/react --save-dev

هنگامی که Storybook را نصب کردید، باید آن را برای کار با پروژه خود پیکربندی کنید. می توانید این کار را با ایجاد یک فایل پیکربندی در دایرکتوری ریشه پروژه خود به نام انجام دهید .storybook/main.js. در این فایل، باید محل استوری های خود و هر افزونه ای را که می خواهید استفاده کنید، مشخص کنید. در اینجا یک نمونه فایل پیکربندی است:

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};

در این فایل پیکربندی، ما مشخص می‌کنیم که داستان‌های ما در قسمت قرار دارند src/components دایرکتوری و اینکه آنها یک .stories.js فرمت فایل. ما همچنین دو افزونه اضافه می کنیم: @storybook/addon-actions و @storybook/addon-links.

ایجاد داستان
هنگامی که Storybook را پیکربندی کردید، می توانید شروع به ایجاد داستان برای اجزای خود کنید. داستان یک نمایش بصری از مؤلفه شما در یک حالت خاص یا با ورودی های خاص است. برای ایجاد یک داستان، باید یک فایل جدید در پروژه خود با استفاده از .stories.js فرمت فایل. در اینجا یک داستان مثال برای a Button جزء:

import React from 'react';
import { action } from '@storybook/addon-actions';

import Button from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const Text = () => <Button onClick={action('clicked')}>Hello, Button</Button>;

export const Emoji = () => (
  <Button onClick={action('clicked')}>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

در این داستان، ما در حال ایجاد دو نسخه از خود هستیم Button جزء: یکی با متن و دیگری با ایموجی. ما همچنین از @storybook/addon-actions افزونه برای ورود به سیستم زمانی که دکمه کلیک می شود.

مشاهده داستان ها

برای مشاهده داستان های خود، باید سرور Storybook را راه اندازی کنید. با اجرای دستور زیر در ترمینال خود می توانید این کار را انجام دهید:

npm run storybook

با این کار سرور Storybook راه اندازی می شود و آن را در مرورگر وب پیش فرض شما باز می کند. از آنجا، می توانید به داستان های مؤلفه خود بروید و با آنها تعامل داشته باشید.

نتیجه

در پایان، Storybook یک ابزار عالی برای توسعه و آزمایش اجزا است. این به شما اجازه می دهد تا بر روی اجزای خود جدا از سایر برنامه های خود کار کنید و این کار را آسان تر می کند