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