0Pricing
React Academy · บทเรียน

การตั้งค่า Storybook ในโปรเจกต์ React

ติดตั้ง Storybook กำหนดค่าให้ใช้กับ Vite หรือ CRA และเรียกดูตัวสำรวจคอมโพเนนต์

การตั้งค่า Storybook ในโปรเจกต์ React เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

Storybook คืออะไร

Storybook คือเครื่องมือสำหรับพัฒนา จัดทำเอกสาร และทดสอบองค์ประกอบส่วนติดต่อผู้ใช้แบบแยกอิสระ แต่ละเรื่องราวจะแทนสถานะเฉพาะขององค์ประกอบ ซึ่งสามารถดูได้ในส่วนติดต่อผู้ใช้ของ Storybook โดยไม่ต้องเรียกใช้แอปพลิเคชันทั้งหมด

การติดตั้ง

เรียกใช้คำสั่งเริ่มต้น Storybook ในโครงการ React ของคุณ ระบบจะตรวจหากรอบงานของคุณโดยอัตโนมัติ (Vite, CRA, Next.js) และสร้างการกำหนดค่า

# For a Vite + React project:
npx storybook@latest init

# This creates:
# .storybook/main.ts
# .storybook/preview.ts
# src/stories/ (example stories)

การเริ่มต้น Storybook

เรียกใช้เซิร์ฟเวอร์พัฒนาของ Storybook ที่พอร์ต 6006 ระบบจะเปิดเครื่องมือสำรวจองค์ประกอบในเบราว์เซอร์

npm run storybook
# or
npx storybook dev -p 6006

การกำหนดค่า .storybook/main.ts

main.ts บอก Storybook ว่าจะค้นหาเรื่องราวจากที่ใด ควรโหลดส่วนเสริมใด และควรใช้กรอบงานใด

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

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
};

export default config;

การกำหนดค่า .storybook/preview.ts

preview.ts ใช้ตัวตกแต่งส่วนกลาง เช่น การห่อเรื่องราวทั้งหมดด้วยผู้ให้บริการ และกำหนดพารามิเตอร์ส่วนกลาง เช่น สีพื้นหลัง

import type { Preview } from '@storybook/react';
import '../src/index.css'; // global styles

const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'light',
      values: [{ name: 'light', value: '#fff' }, { name: 'dark', value: '#333' }],
    },
  },
  decorators: [
    (Story) => (
      <ThemeProvider theme={defaultTheme}>
        <Story />
      </ThemeProvider>
    ),
  ],
};

export default preview;

การเพิ่มตัวตกแต่งสำหรับบริบท

ใช้ตัวตกแต่งใน preview.ts เพื่อห่อเรื่องราวทั้งหมดด้วยผู้ให้บริการที่จำเป็น เช่น ตัวกำหนดเส้นทาง ธีม และ i18n เพื่อให้เรื่องราวไม่ต้องนำเข้าสิ่งเหล่านี้ทีละรายการ

decorators: [
  (Story) => (
    <MemoryRouter>
      <QueryClientProvider client={new QueryClient()}>
        <Story />
      </QueryClientProvider>
    </MemoryRouter>
  ),
],

การนำทางในส่วนติดต่อผู้ใช้ของ Storybook

แถบด้านข้างจัดกลุ่มเรื่องราวตามองค์ประกอบ คลิกเรื่องราวเพื่อดูในพื้นที่แสดงผล แท็บเอกสารจะแสดงเอกสาร API ที่สร้างโดยอัตโนมัติจากพร็อพส์ของ TypeScript

การสร้าง Storybook แบบสแตติก

สร้างเว็บไซต์ HTML แบบสแตติกจากเรื่องราวของคุณเพื่อโฮสต์บน Chromatic, GitHub Pages หรือ CDN

npm run build-storybook
# Output in storybook-static/

Storybook สำหรับเอกสารระบบการออกแบบ

Storybook เหมาะอย่างยิ่งสำหรับใช้เป็นเอกสารที่มีชีวิตของระบบการออกแบบ เพิ่ม @storybook/addon-docs ซึ่งเป็นส่วนหนึ่งของชุดพื้นฐาน เพื่อสร้างตารางพร็อพส์และตัวอย่างการใช้งานจากชนิดข้อมูล TypeScript โดยอัตโนมัติ

การแทนที่โมดูลแบบทันที

Storybook รองรับ HMR แก้ไของค์ประกอบหรือไฟล์เรื่องราว แล้วพื้นที่แสดงผลของ Storybook จะอัปเดตทันทีโดยไม่ต้องโหลดหน้าซ้ำทั้งหมด

การรองรับ TypeScript

กรอบงาน @storybook/react-vite มอบการรองรับ TypeScript อย่างครบถ้วน ใช้เจเนอริก Meta และ StoryObj เพื่อสร้างเรื่องราวที่มีชนิดข้อมูลครบถ้วน

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

const meta: Meta<typeof Button> = {
  component: Button,
};
export default meta;

type Story = StoryObj<typeof Button>;
export const Primary: Story = { args: { label: 'Click me' } };

ตรวจสอบอย่างรวดเร็ว

ไฟล์การกำหนดค่า Storybook ใดมีหน้าที่ใช้ตัวตกแต่งส่วนกลาง เช่น การห่อเรื่องราวทั้งหมดด้วยผู้ให้บริการ

สรุปทบทวน

เรียกใช้ npx storybook init เพื่อตั้งค่า Storybook กำหนดผู้ให้บริการส่วนกลางใน preview.ts และเพิ่มส่วนเสริมใน main.ts ใช้เจเนอริก Meta และ StoryObj สำหรับเรื่องราวที่มีชนิดข้อมูล และสร้างเว็บไซต์แบบสแตติกด้วย build-storybook เพื่อแบ่งปัน

คำถามที่พบบ่อย

บทเรียน “การตั้งค่า Storybook ในโปรเจกต์ React” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การตั้งค่า Storybook ในโปรเจกต์ React” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่า Storybook ในโปรเจกต์ React”

ติดตั้ง Storybook กำหนดค่าให้ใช้กับ Vite หรือ CRA และเรียกดูตัวสำรวจคอมโพเนนต์ คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การตั้งค่า Storybook ในโปรเจกต์ React” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การตั้งค่า Storybook ในโปรเจกต์ React
  2. การเขียนสตอรี CSF3
  3. Args, Controls และส่วนเสริม Actions
  4. การทดสอบ Storybook และการถดถอยด้านภาพ
← กลับไปที่ React Academy