react storybook
TRANSCRIPT
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