पाठ 2 / 25

Installation और Setup

अपने project में Storybook install करें और React के लिए configure करें।

Framework support

Storybook React, Vue, Angular, Svelte, और कई अन्य frameworks को support करता है। Installation process framework-specific है, लेकिन core concepts सभी frameworks में समान रहते हैं।

Install के बाद project structure

Storybook एक .storybook directory बनाता है configuration files के साथ और एक stories directory example components के साथ।

.storybook/
  main.ts         # Main configuration
  preview.ts      # Global decorators and parameters
stories/
  Button.stories.tsx
  Card.stories.tsx
package.json     # Updated with storybook scripts

Storybook dev server start करें

अपने components को browser में देखने के लिए Storybook dev server चलाएँ।

npm run storybook
# Opens http://localhost:6006 in your browser

Configuration files overview

main.ts configure करता है कि कौन सी stories load करनी हैं और कौन से addons use करने हैं। preview.ts decorators और parameters को setup करता है जो सभी stories पर लागू होते हैं।