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

  • 相关阅读:
    How To Install MySQL on Ubuntu 16.04
    Rabbitmq vs. kafka
    Expanded encryption and decryption signature algorithm SM2 & SM3
    Open Source CRM
    在WIN10打造成能运行Oracle的JDK的Linux
    Spring Cloud Zipkin
    Debian中APT的前世今生
    nginx for Windows Known issues:path
    Ajax cross domain
    JQuery Cross Domain Ajax(jsonp)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9301372.html
Copyright © 2011-2022 走看看