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',()=>(

<Viewstyle={{width:300}}>

<SpeechBubblemessage="Default,explanatorybubble"

severity={SpeechBubble.SEVERITY.INFO}

tailPosition={50}/>

</View>

))

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

<SpeechBubblemessage="Watchout!Somethingunexpectedjusthappened"

severity={SpeechBubble.SEVERITY.WARNING}

tailPosition={50}/>

));

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',()=>(

<FavoriteDetailfavorite={simpleFavorite}

onBack={action('Goback')}

onFavoritePress={action('Favoritepressed')}

onShare={action('Share')}/>

));

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',()=>(

<FavoriteComponentfavorite={simpleFavorite}

onPress={action('Favoritepressed')}/>

));

33

storiesOf('Favorite')

.addDecorator((story)=>(

<Viewstyle={{

flexDirection:'column',

alignItems:'stretch',

justifyContent:'center',

flex:1}}

>

{story()}

</View>

));

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!

Let’s stay in touch: @jairtrejo