[React Storybook] Get started with Storybook for React
React for with get Started
2023-09-14 09:00:50 时间
Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.
Here I show how to add a landing/welcome page to your Storybook, so that first-time viewers get to read a message from you or have some orientation around the structure of the Storybook you are building. We also introduce the idea of sequential additions to your Storybook config so you can get a sense of how to modify it for your own needs.
Install:
npm i -D @storybook/react babel-core
npm i -g @storybook/cli
Run:
getstorybook
It will create a .storybook with config.js file.
The config.js file looks like this:
import { configure } from '@storybook/react'; function loadStories() { // You can require as many stories as you need. // The order matters require('../stories/welcomeStory.js'); require('../stories/h1.js'); } configure(loadStories, module);
Then you can create each story inside a stories folder.
import React from 'react'; import { storiesOf } from '@storybook/react'; import { withInfo } from '@storybook/addon-info'; // Noraml storiesOf('H1', module) .add('with text',() => ( <h1>Hello h1</h1> )); // With addon/info storiesOf('H1', module) .add('with text', withInfo(` description or documentation about my component, supports markdown ~~~js <h1>Storybook</h1> ~~~ `)(() => ( <h1>Hello h1</h1> )));
check out addons
相关文章
- react 编写日历组件
- [React] React hook, component props for refactoring
- [React] State and Callbacks Don’t Mix Well in React
- [React Testing] Test timer related feature in React
- [React + CSS3] Create an Animate Content Placeholder for Loading State in React
- [React + GraphQL] Use useLazyQuery to manually execute a query with Apollo React Hooks
- [React] Configure a React & Redux Application For Production Deployment and Deploy to Now
- [React Router v4] Parse Query Parameters
- [React] displayName for stateless component
- [React Flow] Up and Running with Facebook Flow for Typed JavaScript
- [React Testing] The Redux Store - Multiple Actions
- [React] Cleaning up Functional Components with Custom Hooks
- [React] Preload React Components with the useEffect Hook
- [React] as component prop
- [React] Improve developer experience for accessing context with a custom React hook
- [React] Override webpack config for create-react-app without ejection
- [React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility
- [React] Implement a React Context Provider
- [React] displayName for stateless component
- [React Native] Writing Platform-Specific Components for iOS and Android in React Native
- [React] Hello World
- windows环境里React-Native运行失败,找不到Nullable的原因分析
- React Native学习笔记(一)—— Win10 Win11安卓子系统的安装与使用 - Windows Subsystem for Android - WSA
- React合成事件的原理?
- 【taro react】----打包微信小程序后 onShow 多次执行(随着进入页面的次数在不断的累计)