Click here to load reader

React storybook

  • View
    120

  • Download
    0

Embed Size (px)

Text of React storybook

  • STORYBOOK &

    REACT NATIVE

    Jair Trejo

  • WHO AM I?

    Jair Trejo

    Full-stack developer at Chegg

    @jairtrejo on Twitter

    2

  • WHAT IS REACT STORYBOOK?

  • 4

  • 5

    importReactfrom'react';

    import{View}from'react-native';

    import{storiesOf,action}from'@kadira/react-native-storybook';

    import{SpeechBubble}from../../components/SpeechBubble;

    storiesOf(SpeechBubble');

    .add('defaultview',()=>(

    ))

    .add('warning',()=>(

    ));

  • 6

  • 7

    A tight feedback loop for developing new components and new states for those components.

  • 8

    A clear, convenient place to communicate and collaborate with designers.

  • 9

    A place where you can visually check that everything works and looks as intended.

  • HOW IS IT USEFUL TO ME?

  • REACT NATIVE STORYBOOK

    11

  • 12

  • 13

  • 14

  • 15

  • 16

    constsimpleFavorite=newFavorite({

    id:'1',

    title:'LearningReactNative,

    url:'https://amzn.com/1491929006',

    shortUrl:'amazon.com/gp/product/149',

    source:newSource({

    type:'tweet',

    id:'707050076170891264',

    from:newFriend({

    name:'BonnieEisenman',

    username:'brindelle'

    })

    }),

    });

    storiesOf('FavoriteDetail')

    .add('defaultview',()=>(

    ));

  • 17

    linkTo

  • 18

  • 19

  • 20

  • 21

  • 22

    State

    HTMLVDom

    UI

  • 23

  • 24

    exportdefaultconnectComponent(

    (state$)=>({

    favorites:state$.map('.getIn',['feed','favorites']),

    refreshing:state$.map('.getIn',['feed','lastFetched'])

    .map(d=>d===null)

    }),

    ()=>({

    onFavoritePressed:asActionType('FAVORITE_SELECTED'),

    onRefresh:asActionType('FETCH_FAVORITES'),

    })

    )(Feed);

  • 25

    exportclassFeedextendsComponent{...}

    exportdefaultconnectComponent(...)(Feed);

  • 26

  • 27

  • 28

  • HOW CAN YOU START USING IT?

  • KADIRAHQ/REACT-STORYBOOK

    30

  • 31

  • 32

    import{storiesOf,action}from'@kadira/react-native-storybook';

    import{Favorite}from'../../components/Favorite';

    storiesOf('Favorite')

    .add('defaultview',()=>(

    ));

  • 33

    storiesOf('Favorite')

    .addDecorator((story)=>(

    {story()}

    ));

  • 34

  • 35

  • 36

  • 37

    A tight feedback loop for developing new components and new states for those components.

    A clear, convenient place to communicate and collaborate with designers.

    A place where you can visually check that everything works and looks as intended.

  • THANK YOU!

    Lets stay in touch: @jairtrejo