Storybook برای React

16 دقیقه زمان برای خواندن این مطلب نیاز است.

---

Storybook برای React: راهنمای جامع و تخصصی ساخت مؤلفه‌های ایزوله و مقیاس‌پذیر

در دنیای مدرن توسعه فرانت‌اند، React به عنوان یکی از محبوب‌ترین کتابخانه‌ها برای ساخت رابط کاربری شناخته می‌شود. پروژه‌ها بزرگ‌تر و پیچیده‌تر می‌شوند، توسعه و نگهداری مؤلفه‌ها (Components) به چالشی بزرگ تبدیل می‌شود. اینجا جایی است که وارد می‌شود. Storybook برای React یک ابزار منبع‌باز قدرتمند است که به شما امکان می‌دهد مؤلفه‌های React را به صورت ایزوله، مستقل از منطق اصلی برنامه، طراحی، مستندسازی و تست کنید. در این مقاله از دانا پدیا، قصد داریم با عمق کامل به بررسی Storybook برای React بپردازیم، مزایا، نصب، پیکربندی، داستان‌نویسی، افزونه‌ها، تکنیک‌های پیشرفته، یکپارچه‌سازی با تیم‌های طراحی و بهترین شیوه‌ها را پوشش دهیم. اگر شما یک توسعه‌دهنده React هستید یا قصد دارید تیم خود را به سطح حرفه‌ای برسانید، این مقاله دقیقاً همان چیزی است که نیاز دارید.

MySQL Performance Schema

---

چرا Storybook برای React ضروری است؟

قبل از هر چیز، بیایید بفهمیم چرا Storybook برای React تا این حد مهم شده است. در توسعه سنتی React، مؤلفه‌ها در بستر کل برنامه بارگذاری می‌شوند. این وابستگی به داده‌ها، روت‌ها و stateهای سراسری، فرآیند توسعه و تست را کند و شکننده می‌کند. Storybook برای React با ایجاد یک محیط ایزوله، این مشکل را حل می‌کند. در Storybook برای React، شما برای هر حالت (state) یک مؤلفه، یک «داستان» (Story) می‌نویسید. این داستان‌ها مانند یک کاتالوگ تعاملی عمل می‌کنند که در آن می‌توانید ظاهر، رفتار، دسترسی‌پذیری و تعاملات مؤلفه را بدون نگرانی از بقیه برنامه بررسی کنید.

از دیگر دلایل ضرورت می‌توان به همکاری بهتر بین توسعه‌دهندگان و طراحان، مستندسازی زنده، تست‌های بصری و یکپارچگی با ابزارهای تست مانند Jest و Chromatic اشاره کرد. امروزه شرکت‌های بزرگ مانند Airbnb، Slack، Shopify و BBC از Storybook برای React برای کتابخانه مؤلفه‌های خود استفاده می‌کنند. اگر به دنبال افزایش بهره‌وری و کیفیت در پروژه React خود هستید، یک انتخاب هوشمندانه است.

React Native Expo Router

---

نصب و راه‌اندازی Storybook در پروژه React

نصب Storybook برای React به طرز شگفت‌آوری ساده است. تیم Storybook ابزاری به نام Storybook CLI ارائه داده که فرآیند راه‌اندازی را کاملاً خودکار می‌کند. برای شروع، فرض می‌کنیم شما یک پروژه React دارید (مثلاً با استفاده از Create React App، Vite یا Next.js). برای نصب Storybook برای React، کافی است در ریشه پروژه خود دستور زیر را اجرا کنید:

npx storybook@latest init

این دستور تمام وابستگی‌های لازم را نصب می‌کند، اسکریپت‌های لازم را به package.json اضافه می‌نماید و یک پوشه stories شامل نمونه داستان‌ها ایجاد می‌کند. پس از اتمام نصب، برای اجرای دستور زیر را وارد کنید:

npm run storybook

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

پایتون Type Hints

ساختار پوشه‌ها پس از نصب

پس از نصب Storybook برای React، پوشه .storybook در ریشه پروژه ایجاد می‌شود. این پوشه شامل فایل‌های پیکربندی اصلی است:

• main.ts: تنظیمات کلی مانند محل داستان‌ها، افزونه‌ها و تنظیمات webpack.
• preview.ts: تنظیمات سراسری مانند decoratorها، پارامترها و زمینه‌های جهانی.

همچنین به طور معمول داستان‌ها در کنار مؤلفه‌ها قرار می‌گیرند (مثلاً Button.stories.tsx). در Storybook برای React، شما کنترل کاملی روی پیکربندی دارید.

OpenAPI Generator

---

نوشتن اولین داستان در Storybook برای React

قلب داستان‌ها هستند. هر داستان یک تابع است که یک مؤلفه React را با props خاصی رندر می‌کند. بیایید یک مثال ساده بزنیم. فرض کنید یک مؤلفه Button داریم:

// Button.tsx
import React from 'react';

interface ButtonProps {
  label: string;
  primary?: boolean;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps> = ({ label, primary, onClick }) => {
  return (
    <button
      onClick={onClick}
      style={{
        backgroundColor: primary ? 'blue' : 'gray',
        color: 'white',
        padding: '8px 16px',
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer'
      }}
    >
      {label}
    </button>
  );
};

حال برای این مؤلفه در Storybook برای React یک داستان می‌نویسیم:

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

export default meta;
type Story = StoryObj<typeof Button>;

// هر export یک داستان است
export const Primary: Story = {
  args: {
    primary: true,
    label: 'دکمه اصلی',
  },
};

export const Secondary: Story = {
  args: {
    primary: false,
    label: 'دکمه فرعی',
  },
};

با این کار، Storybook برای React به طور خودکار دو داستان برای شما ایجاد می‌کند. شما می‌توانید از پنل کنترل (Controls) برای تغییر props به صورت زنده استفاده کنید. این همان قدرت اصلی Storybook برای React است.

API Gateway با Nginx

---

مزایای استفاده از Storybook برای React در پروژه‌های بزرگ

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

1. توسعه ایزوله مؤلفه‌ها

یکی از بزرگترین نقاط قوت امکان توسعه مؤلفه‌ها بدون نیاز به اجرای کل برنامه است. شما می‌توانید روی یک دکمه، یک فرم، یک کارت یا هر مؤلفه دیگری کار کنید، در حالی که محیط اطراف کاملاً کنترل شده است. این کار سرعت توسعه را تا 50% افزایش می‌دهد.

2. مستندسازی زنده و تعاملی

با ، دیگر نیازی به نوشتن مستندات جداگانه در ویکی یا Notion نیست. خود داستان‌ها مستندات اجرایی هستند. افزونه‌هایی مانند @storybook/addon-docs مستندات Markdown را به داستان‌ها اضافه می‌کنند. هر کسی که وارد Storybook برای React شما شود، می‌تواند مؤلفه‌ها را ببیند، با props بازی کند و کد دقیق استفاده را مشاهده کند.

3. تست بصری (Visual Testing) با Chromatic

تست بصری در Storybook برای React به کمک ابزاری به نام Chromatic انجام می‌شود. Chromatic هر بار که کد شما تغییر می‌کند، از تمام داستان‌ها اسکرین‌شات می‌گیرد و تغییرات ناخواسته را به شما نشان می‌دهد. این کار به خصوص برای پروژه‌هایی با مؤلفه‌های مشترک در چندین اپلیکیشن حیاتی است.

4. تست تعامل (Interaction Testing)

با افزونه @storybook/addon-interactions، می‌توانید تعاملات کاربر مانند کلیک، تایپ و hover را در تست کنید. این تست‌ها مستقیماً در مرورگر اجرا می‌شوند و نتیجه را در پنل Tests نشان می‌دهند.

5. یکپارچگی با طراحی (Design System)

اگر از ابزارهای طراحی مانند Figma استفاده می‌کنید، افزونه @storybook/addon-designs به شما امکان می‌دهد مستقیماً طرح‌های Figma را کنار مؤلفه‌های Storybook برای React قرار دهید. این همکاری بین تیم طراحی و توسعه را به سطح بی‌نظیری می‌رساند.

SvelteKit Form Actions

---

پیکربندی پیشرفته Storybook برای React

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

استفاده از decoratorها برای ارائه Context

اگر پروژه شما از React Context (مثل ThemeProvider یا Redux Provider) استفاده می‌کند، باید آن‌ها را در Storybook برای React ارائه دهید. این کار با decoratorهای سراسری در فایل preview.ts انجام می‌شود:

// .storybook/preview.ts
import React from 'react';
import { ThemeProvider } from '../src/contexts/ThemeContext';

export const decorators = [
  (Story) => (
    <ThemeProvider>
      <Story />
    </ThemeProvider>
  ),
];

افزودن فونت‌ها و استایل‌های سراسری

برای افزودن فونت یا CSS سراسری در Storybook برای React، می‌توانید آن را در فایل preview-head.html در پوشه .storybook قرار دهید:

<!-- .storybook/preview-head.html -->
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" />
<style>
  body {
    font-family: 'Inter', sans-serif;
  }
</style>

مدیریت مسیرهای alias در Webpack

Storybook برای React

اگر در پروژه React خود از alias استفاده می‌کنید (مثلاً @components به جای ../components)، باید webpack را در تنظیم کنید. در فایل main.ts:

import { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [...],
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@components': path.resolve(__dirname, '../src/components'),
    };
    return config;
  },
};

export default config;

پایتون Walrus Operator

---

افزونه‌های ضروری برای Storybook در React

اکوسیستم Storybook برای React سرشار از افزونه‌های مفید است. در ادامه مهم‌ترین آنها را معرفی می‌کنیم:

1. @storybook/addon-essentials

این افزونه مجموعه‌ای از افزونه‌های ضروری مانند Actions, Controls, Viewport, Backgrounds, Toolbars و Docs را یکجا ارائه می‌دهد. تقریباً هر پروژه‌ای به آن نیاز دارد.

2. @storybook/addon-a11y

دسترسی‌پذیری (Accessibility) یکی از اصول حیاتی است. این افزونه با استفاده از موتور axe، مشکلات دسترسی‌پذیری مؤلفه‌های Storybook برای React را در زمان واقعی نشان می‌دهد.

3. storybook-addon-react-router-v6

اگر از React Router v6 استفاده می‌کنید، این افزونه به شما امکان می‌دهد مؤلفه‌های وابسته به روت را در Storybook برای React به راحتی تست کنید.

4. @storybook/addon-interactions

برای تست تعاملات کاربر (مانند کلیک و تایپ) عالی است. نتایج تست در پنل Tests نمایش داده می‌شود.

5. @storybook/addon-coverage

این افزونه میزان پوشش تست مؤلفه‌ها را در نشان می‌دهد و به شما کمک می‌کند تا مؤلفه‌های بدون تست را شناسایی کنید.

الگوی طراحی Chain of Responsibility

---

بهترین شیوه‌ها در استفاده از Storybook برای React

برای اینکه بیشترین بهره را از ببرید، رعایت چند اصل طلایی ضروری است. این نکات بر اساس تجربه تیم‌های بزرگ و مستندات رسمی گردآوری شده است.

1. هر مؤلفه یک داستان اصلی (Primary) داشته باشد

همیشه یک داستان به عنوان حالت پیش‌فرض مؤلفه در Storybook برای React بنویسید. سپس داستان‌های دیگر را برای حالت‌های حاشیه‌ای (loading، error، disabled و …) ایجاد کنید.

2. از پارامترها برای متادیتا استفاده کنید

پارامترها به شما امکان می‌دهند تنظیماتی مانند layout یا پس‌زمینه را برای یک داستان خاص تنظیم کنید.

3. داستان‌ها را بر اساس دامنه سازماندهی کنید

از命名‌گذاری سلسله‌مراتبی در عنوان داستان استفاده کنید، مانند Forms/Input، Layout/Card و Feedback/Alert. این کار جستجو در Storybook برای React را برای تیم آسان می‌کند.

4. از کنترل‌ها برای props پیچیده استفاده کنید

برای props از نوع شی یا آرایه، در argTypes کنترل مناسب تعریف کنید تا اعضای تیم بتوانند به راحتی مقادیر را در Storybook برای React تغییر دهند.

5. مستندات را درون کد بنویسید

از کامنت‌های JSDoc یا افزونه Docs استفاده کنید تا توضیحات هر مؤلفه و هر prop به صورت خودکار در Storybook برای React نمایش داده شود.

6. تست‌های تعامل را برای سناریوهای حیاتی بنویسید

برای مؤلفه‌های دارای رفتار (مثل درگ‌انددراپ یا انیمیشن)، حتماً تست تعامل در اضافه کنید.

Next.js App Router Caching

---

مقایسه Storybook با سایر ابزارها (Bit, Styleguidist, Ladle)

گاهی سؤال پیش می‌آید که چرا باید از Storybook برای React استفاده کنیم در حالی که ابزارهای دیگری هم وجود دارند؟ بیایید مقایسه کوتاهی انجام دهیم:

ابزار	مزایا نسبت به Storybook برای React	معایب
Bit	تمرکز بر اشتراک مؤلفه بین ریپازیتوری‌ها	منحنی یادگیری بالاتر، کمتر جامعه باز
Styleguidist	سادگی بیشتر برای پروژه‌های کوچک	عدم پشتیبانی از تست‌های پیشرفته، افزونه‌های کمتر
Ladle	بسیار سریع (بدون Webpack)	جامعه کوچک، مستندات محدود
Storybook	بزرگترین اکوسیستم، پشتیبانی از 10+ فریمورک، ابزار تست قوی	پیکربندی اولیه سنگین‌تر برای پروژه‌های عظیم

CSS :where() و :is() Selectors

---

یکپارچه‌سازی Storybook با Next.js و Vite

اگر پروژه React شما از Next.js یا Vite استفاده می‌کند، جای نگرانی نیست. Storybook برای React به طور رسمی از هر دو پشتیبانی می‌کند.

برای Next.js:

از builder مخصوص Next.js استفاده کنید:

npx storybook@latest init --builder webpack5

سپس افزونه @storybook/addon-next-router را نصب کنید تا مشکلات روتینگ حل شود.

برای Vite:

Vite به طور قابل توجهی سریع‌تر از webpack است. برای استفاده از Storybook برای React با Vite:

npx storybook@latest init --builder vite

این کار زمان راه‌اندازی و بازسازی داستان‌ها را تا 90% کاهش می‌دهد. تیم Storybook برای React به شدت استفاده از Vite را برای پروژه‌های جدید توصیه می‌کند.

Docker Secrets Management

---

تست خودکار با Storybook و Chromatic

یکی از ارزشمندترین قابلیت‌های Storybook برای React، تست بصری است. Chromatic که توسط تیم اصلی Storybook ساخته شده، هر بار که پول‌رکوئست ایجاد می‌کنید، از تمام داستان‌های شما اسکرین‌شات می‌گیرد و تغییرات را side-by-side نشان می‌دهد. مراحل کار:

1. در Chromatic ثبت‌نام کنید و یک پروژه ایجاد کنید.
2. توکن پروژه را دریافت کنید.
3. دستور زیر را در CI خود اجرا کنید:

npx chromatic --project-token=<your-token>

4. Chromatic نتیجه را در Pull Request نمایش می‌دهد و شما می‌توانید تغییرات را تأیید یا رد کنید.

تست Regression چیست

---

عیب‌یابی مشکلات رایج در Storybook برای React

در این بخش به چند مشکل متداول در Storybook برای React و راه حل آنها می‌پردازیم:

مشکل 1: مؤلفه رندر نمی‌شود یا ارور می‌دهد

راه‌حل: بررسی کنید که مؤلفه وابسته به Provider خاصی (مثل Redux یا React Router) نباشد. در صورت وابستگی، از decorator استفاده کنید.

مشکل 2: استایل‌ها اعمال نمی‌شوند

راه‌حل: مطمئن شوید فایل CSS/SCSS به درستی در .storybook/preview-head.html یا از طریق decorator استایل لود شده باشد. برای CSS Modules، Storybook برای React به صورت پیش‌فرض از آنها پشتیبانی می‌کند.

مشکل 3: هات ریلود (Hot Reload) کار نمی‌کند

راه‌حل: در فایل main.ts مطمئن شوید core: { disableWebpackDefaults: false } تنظیم نشده باشد. یا فایل‌های stories الگوی درستی داشته باشند.

مشکل 4: افزونه‌ها کار نمی‌کنند

راه‌حل: نسخه Storybook برای React و افزونه‌ها را بررسی کنید. معمولاً بهتر است همه افزونه‌ها با نسخه اصلی Storybook همخوانی داشته باشند. دستور npx storybook@latest upgrade را اجرا کنید.

برنامه نویسی با هوش مصنوعی Claude

---

داستان‌نویسی برای مؤلفه‌های پیچیده (با Hook و Context)

گاهی مؤلفه‌های React از Hookهایی مثل useState، useEffect یا Context استفاده می‌کنند. Storybook برای React به شما امکان می‌دهد این مؤلفه‌ها را نیز به راحتی تست کنید. برای مثال، فرض کنید مؤلفه Counter با state داخلی دارید. داستان آن در کاملاً کار می‌کند. اما اگر مؤلفه به Context وابسته است، باید مقداردهی اولیه Context را در decorator انجام دهید.

برای مؤلفه‌هایی که از API خارجی (fetch) استفاده می‌کنند، بهتر است در از Mock کردن استفاده کنید. برای این کار می‌توانید از msw (Mock Service Worker) استفاده کنید. افزونه @storybook/addon-interactions نیز برای شبیه‌سازی پاسخ‌های API بسیار کارآمد است.

Rust Error Handling

---

تبدیل Storybook به یک Design System کامل

یکی از پیشرفته‌ترین کاربردهای Storybook برای React، ایجاد و نگهداری یک Design System است. Design System مجموعه‌ای از مؤلفه‌ها، قوانین طراحی و مستندات است که در تمام پروژه‌های سازمان استفاده می‌شود. پایه و اساس بسیاری از Design Systemهای معروف مثل Chakra UI، Material-UI و Ant Design است.

برای تبدیل Storybook برای React به Design System:

• از افزونه @storybook/addon-docs برای مستندات غنی استفاده کنید.
• فایل preview.ts را با تم‌ها و استایل‌های سراسری تنظیم کنید.
• از argTypes برای کنترل حداکثری props استفاده کنید.
• داستان‌های واریانت‌های مختلف را بنویسید (اندازه‌ها، حالت‌ها، رنگ‌ها).
• تست دسترسی‌پذیری (a11y) را فعال کنید.
• خروجی را به صورت یک پکیج npm منتشر کنید.

با این کار، تمام تیم‌های داخل سازمان شما می‌توانند از شما به عنوان منبع رسمی مؤلفه‌ها استفاده کنند.

CSS Anchor Positioning

---

سئو و عملکرد در Storybook برای React

شاید بپرسید مگر بهینه‌سازی سئو نیاز دارد؟ خود Storybook یک ابزار توسعه است و معمولاً در محیط توسعه یا استیجینگ اجرا می‌شود. اما اگر خروجی را به صورت استاتیک منتشر می‌کنید (مثلاً در GitHub Pages یا Netlify)، سئو برای صفحات مستندات مؤلفه‌ها اهمیت پیدا می‌کند. برای بهبود سئو:

• از افزونه‌هایی که متاتگ‌های مناسب اضافه می‌کنند استفاده کنید.
• فایل preview-head.html را با متاتگ‌های description و keywords بهینه کنید.
• URL داستان‌ها را خوانا نگه دارید.
• برای هر داستان توضیحات متا بنویسید.

اما نکته مهمتر: استفاده از Storybook برای React به طور غیرمستقیم روی سئوی برنامه نهایی شما تأثیر مثبت می‌گذارد، زیرا باعث می‌شود مؤلفه‌های بهتر، سریع‌تر و در دسترس‌تر بسازید که همه اینها فاکتورهای رتبه‌بندی گوگل هستند.

React Forget Compiler چیست

---

نتیجه‌گیری نهایی

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

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

Docker Secrets Management

---

سوالات متداول (FAQ)

1. آیا Storybook برای React با React 18 و همزمانی (Concurrent Features) کار می‌کند؟

بله، Storybook برای React از React 18 پشتیبانی کامل دارد. همچنین با ویژگی‌هایی مثل useId، useTransition و Suspense به خوبی کار می‌کند. فقط کافی است نسخه Storybook شما 7.0 یا بالاتر باشد.

2. آیا می‌توان از Storybook برای React در پروژه‌های TypeScript استفاده کرد؟

قطعاً. Storybook برای React پشتیبانی عالی از TypeScript دارد. داستان‌ها را می‌توانید با پسوند .stories.tsx بنویسید و از typing کامل بهره‌مند شوید. همچنین افزونه‌ها نیز معمولاً فایل‌های تایپینگ را ارائه می‌دهند.

3. هزینه استفاده از Storybook برای React چقدر است؟

خود Storybook برای React کاملاً رایگان و متن‌باز است. اما اگر بخواهید از Chromatic برای تست بصری استفاده کنید، پلن رایگان با محدودیت 5000 اسکرین‌شات در ماه دارد. پلن‌های پولی از 25 دلار در ماه شروع می‌شوند.

4. آیا Storybook برای React جای تست‌های واحد (Jest) را می‌گیرد؟

خیر، Storybook برای React مکمل Jest است، نه جایگزین. Jest برای تست منطق و توابع خالص مناسب است، در حالی که Storybook برای تست بصری و تعاملات مؤلفه در مرورگر طراحی شده. بسیاری از تیم‌ها از هر دو ابزار در کنار هم استفاده می‌کنند.

5. چگونه می‌توانم Storybook برای React را در CI/CD خود ادغام کنم؟

بسیار ساده. دستور npm run build-storybook یک خروجی استاتیک در پوشه storybook-static ایجاد می‌کند. سپس می‌توانید این پوشه را در سرویسی مثل Netlify، Vercel یا GitHub Pages منتشر کنید. همچنین می‌توانید از اکشن‌های GitHub یا GitLab CI برای خودکارسازی این فرآیند استفاده کنید.

6. آیا می‌توان از Storybook برای React در پروژه‌های بزرگ با بیش از 1000 مؤلفه استفاده کرد؟

بله، Storybook برای React برای چنین مقیاسی طراحی شده است. با استفاده از تکنیک‌های split chunks، lazy loading داستان‌ها و استفاده از builder Vite، عملکرد عالی خواهد داشت. شرکت‌هایی مثل Salesforce و Adobe بیش از 2000 مؤلفه را در Storybook خود مدیریت می‌کنند.

7. تفاوت CSF (Component Story Format) با داستان‌های قدیمی چیست؟

CSF فرمت مدرن و توصیه شده برای نوشتن داستان‌ها در Storybook برای React است. در CSF شما از export کردن توابع استفاده می‌کنید (مانند مثال‌های این مقاله). نسخه قدیمی (storiesOf) هنوز پشتیبانی می‌شود اما برای پروژه‌های جدید توصیه نمی‌شود.

8. آیا Storybook برای React به برنامه اصلی React آسیب می‌زند یا تداخل ایجاد می‌کند؟

خیر. Storybook برای React به طور کامل جدا از برنامه اصلی شما اجرا می‌شود. هیچ فایلی از برنامه اصلی شما را تغییر نمی‌دهد و هیچ وابستگی اضافی به build نهایی شما اضافه نمی‌کند. فقط در محیط توسعه نصب می‌شود.

GraphQL در ASP.NET Core

---