zoukankan      html  css  js  c++  java
  • [React Storybook] Get started with Storybook for React

    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

  • 相关阅读:
    Unobtrusive Ajax
    Asp.Net Web API 2(入门)第一课
    c# in depth之泛型的实现
    ASP.NET MVC 單元測試系列
    菜单栏
    【C++ 中文手册】即将完成
    AspNet MVC3中过滤器 + 实例
    虚拟机安装Linux中常见异常及解决办法
    webbrowser打开新窗口事件+=
    Java Bad version
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9301372.html
Copyright © 2011-2022 走看看