Lära Creating Your First Story | Writing and Organizing Stories

When working with Storybook in React, you will use the Component Story Format, or CSF, to define stories for your UI components. CSF is a standard JavaScript syntax for writing stories as ES6 modules, which means each story is simply a named export of a function that returns a rendered component. This approach makes your stories more portable, easier to maintain, and compatible with modern tooling.

CSF offers several advantages:

Encourages clear, modular story definitions;
Integrates seamlessly with JavaScript and TypeScript;
Supports static analysis and code completion in editors;
Makes stories easy to reuse and compose.

To illustrate, consider a simple Button component. Here is how you might define the component and its first story using CSF.

// Button.js
import React from "react";

export function Button({ label, onClick }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}

// Button.stories.js
import { Button } from "./Button";

export default {
  title: "Components/Button",
  component: Button,
};

export const Primary = () => <Button label="Primary" onClick={() => {}} />;

In this example, the default export provides Storybook with metadata: the title determines where the story appears in the sidebar, and the component links the stories to the Button component. The Primary export is a function that renders the Button with specific props, creating a "Primary" button story.

Note

When naming and structuring stories, use clear and descriptive names for both the story file and the stories themselves. Organize stories in folders that reflect your component hierarchy. This approach helps keep your Storybook organized and scalable as your project grows.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 1

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Svep för att visa menyn