React storybook

A tour of React Storybook, a tool to develop React Components in isolation. It focuses on how it's been useful to me in developing React Native applications.

1. STORYBOOK
&
REACT NATIVE
Jair Trejo

2. WHO AM I?
Jair Trejo
Full-stack developer at Chegg
@jairtrejo on Twitter
2

3. WHAT IS REACT
STORYBOOK?

4. 4

5. 5
import React from 'react';
import { View } from 'react-native';
import { storiesOf, action } from '@kadira/react-native-storybook';
import { SpeechBubble } from ‘../../components/SpeechBubble’;
storiesOf(‘SpeechBubble');
.add('default view', () => (
<View style={{width: 300}}>
<SpeechBubble message="Default, explanatory bubble"
severity={ SpeechBubble.SEVERITY.INFO }
tailPosition={ 50 }/>
</View>
))
.add('warning', () => (
<SpeechBubble message="Watch out! Something unexpected just happened"
severity={ SpeechBubble.SEVERITY.WARNING }
tailPosition={ 50 }/>
));

6. 6

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

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

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

10. HOW IS IT USEFUL TO ME?

11. REACT NATIVE STORYBOOK
11

12. 12

13. 13

14. 14

15. 15

16. 16
const simpleFavorite = new Favorite({
id: '1',
title: 'Learning React Native…’,
url: 'https://amzn.com/1491929006',
shortUrl: 'amazon.com/gp/product/149…',
source: new Source({
type: 'tweet',
id: '707050076170891264',
from: new Friend({
name: 'Bonnie Eisenman',
username: 'brindelle'
})
}),
});
storiesOf('FavoriteDetail')
.add('default view', () => (
<FavoriteDetail favorite={ simpleFavorite }
onBack={ action('Go back') }
onFavoritePress={ action('Favorite pressed') }
onShare={ action('Share') }/>
));

17. 17
linkTo

18. 18

19. 19

20. 20

21. 21

22. 22
State
HTML
VDom
UI

23. 23

24. 24
export default connectComponent(
(state$) => ({
favorites: state$.map('.getIn', ['feed', 'favorites']),
refreshing: state$.map('.getIn', ['feed', 'lastetched'])
.map(d => d === null)
}),
() => ({
onFavoritePressed: asActionType('FAVORITE_SELECTED'),
onRefresh: asActionType('FETCH_FAVORITES'),
})
)(Feed);

25. 25
export class Feed extends Component{
. . .
}
export default connectComponent(
. . .
)(eed);

26. 26

27. 27

28. 28

29. HOW CAN YOU START
USING IT?

30. KADIRAHQ/REACT-STORYBOOK
30

31. 31

32. 32
import { storiesOf, action } from '@kadira/react-native-storybook';
import { Favorite } from '../../components/Favorite';
storiesOf('Favorite')
.add('default view', () => (
<FavoriteComponent favorite={ simpleFavorite }
onPress={ action('Favorite pressed') }/>
));

33. 33
storiesOf('Favorite')
.addDecorator((story) => (
<View style={{
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'center',
flex: 1}}
>
{ story() }
</View>
));

34. 34

35. 35

36. 36

37. 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.

38. THANK YOU!
Let’s stay in touch: @jairtrejo