Storybook & React Native

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.

Transcript

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?
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 }/> ));
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
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
22. 22 State HTML VDom UI
24. 24 export default connectComponent( (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. 25 export class Feed extends Component{ . . . } export default connectComponent( . . . )(Feed);
29. HOW CAN YOU START USING IT?
30. KADIRAHQ/REACT-STORYBOOK 30
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> ));
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