React Native

A framework for building native apps using React

- What's react Native?
- Features
- Numbers
- Show me the code
- The Good Parts
- The Bad Parts
- Demo

Thanks to Michele Bertoli (@michelebertoli) Manuel Natale (@natale)

Transcript

1. A framework for building native apps using React React Native
2. Paolo_Rovella JS Frontend Jr Developer at LinkMe Twitter: @paolo_rovella In love with React and sushi, I'm an incurable tv shows binge-watcher. 41 2
3. Ṁichele_Bertoli Senior Front End Developer at YPlan Twitter: @MicheleBertoli React fanboy, BrewDog supporter, WEBdeLDN reprezent. 41 3
4. _What's React Native? React Native
5. A framework for building native apps using React. React Native 41 5
6. Features() React Native
7. iOS and Android support • No more hybrid • Learn once, run everywhere • Shareable codebase React Native 41 7
8. React Native 41 8 JavaScript for native development • Objective-C/Swift or Java/Kotlin are unnecessary • Some native features not implemented (yet) • Open Source / Community • rnpm
9. React Native 41 9 Styling using CSS in JS • StyleSheet • Inline Styles • Flexbox
10. React Native .Numbers
11. React Native 41 11 Version 0.24.1 0.24.1 is the latest of 97 releases
12. React Native 41 12 Semver Today we're announcing that we're switching to major revisions for React. The current version is 0.14.7. The next release will be: 15.0.0 Today we're announcing a switch to major revisions for Jest with Jest 11.0 being the first major release.
13. React Native 41 13 Open Source • 30k+ stars • 600+ contributors • 500+ open issues
14. React Native 41 14 20K 40K 50K 80K Apr 2015 May Jun Jul Aug Set Oct Nov Dec Jan 2016 Feb Mar Downloads per month
15. React Native AppStore
16. React Native 41 16 {Show me the code}
17. 37 15 React class AwesomeComponent extends Component { render() { return ( <View style={styles.container}> <Image source={{uri: '...'}} style={styles.image} /> <Text style={styles.text}> Welcome to React Native! </Text> </View> ); } } const styles = StyleSheet.create({ container: { alignItems: 'center', flex: 1, flexDirection: 'row', justifyContent: 'center', }, image: { height: 60, marginRight: 20, width: 60, }, text: { color: '#05A5D1' }, }); AppRegistry.registerComponent('AwesomeComponent', () => AwesomeComponent);
18. React Native 41 18
19. React Native 41 19 Components 1 • Declarative • Predictable • Reusable • Testable
20. React Native 41 20 Components 2 • Props/State • Lifecycle • Stateless • Separation of concerns
21. The_Good_Parts React Native
22. 41 22 It’s JavaScript! If you know Javascript and a little bit of React, you can write a React Native app in a few minutes. React Native
23. React Native 41 23 Flexbox Flexbox provides an efficient way to layout, align and distribute space among items in a container.
24. React Native Flexbox flex-direction <div class=”box”> <div class=”element”>1</div> <div class=”element”>2</div> <div class=”element”>3</div> </div> .box { display: flex; flex-direction: row | row-reverse | column | column-reverse; }
25. 41 25 React Native flex-direction
26. React Native Flexbox justify-content <div class=”box”> <div class=”element”>1</div> <div class=”element”>2</div> <div class=”element”>3</div> </div> .box { display: flex; justify-content: flex-start | flex-end | center | space-between | space-around }
27. 41 27 React Native flex-start flex-end center space-between space-around
28. React Native Flexbox align-items <div class=”box”> <div class=”element”>1</div> <div class=”element”>2</div> <div class=”element”>3</div> <div class=”element”>4</div> </div> .box { display: flex; align-items: flex-start | flex-end | center | baseline | stretch }
29. 41 29 React Native flex-start center baseline flex-end stretch text text text text
30. 41 30 React Native Flexbox React Native <View style={styles.row}> <Image /> <View style={styles.textContainer}> <Text style={styles.movieTitle}>{title}</Text> <Text style={styles.movieYear}>{year}</Text> </View> </View> const styles = { row: { backgroundColor: ‘white’, flexDirection: ‘row’, justifyContent: ‘center’, alignItems: ‘center’, padding: 6 }, };
31. 41 31 React Native Into the Wood 2014 - Critics 71%
32. React Native 41 32 Hot Module Replacement • Updated modules injected into the active runtime • Components updated without a full refresh • Different from LiveReload
33. React Native 41 33 Community • Support • Hype • A lot of cool devs involved
34. The-Bad-Parts React Native
35. React Native 41 35 Xcode • Required • ~4GB
36. React Native 41 36 Hard to test (components) • No official docs on components testing • Testing using jest broken since 0.14.0 • Mock
37. React Native Styling is inconsistent <TabBarIOS style={{ flex: 1 }} barTintColor='#BADA55' />
38. React Native 41 38 Bad naming TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback
39. React Native <Demo>
40. React Native 41 40 Guestar https://github.com/paolorovella/guestar https://www.youtube.com/watch?v=ix5QzikOTjk
41. React Native 7 Any questions?