Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native

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)

Paolo Rovella

April 22, 2016
Tweet

More Decks by Paolo Rovella

Other Decks in Programming

Transcript

  1. 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
  2. iOS and Android support • No more hybrid • Learn

    once, run everywhere • Shareable codebase React Native 41 7
  3. 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
  4. React Native 41 9 Styling using CSS in JS •

    StyleSheet • Inline Styles • Flexbox
  5. 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.
  6. React Native 41 13 Open Source • 30k+ stars •

    600+ contributors • 500+ open issues
  7. 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
  8. 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);
  9. React Native 41 20 Components 2 • Props/State • Lifecycle

    • Stateless • Separation of concerns
  10. 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
  11. React Native 41 23 Flexbox Flexbox provides an efficient way

    to layout, align and distribute space among items in a container.
  12. 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; }
  13. 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 }
  14. 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 }
  15. 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 }, };
  16. React Native 41 32 Hot Module Replacement • Updated modules

    injected into the active runtime • Components updated without a full refresh • Different from LiveReload
  17. React Native 41 36 Hard to test (components) • No

    official docs on components testing • Testing using jest broken since 0.14.0 • Mock
  18. 7