Introduction to React Native

Building Native Apps with JavaScript

Tim Wang

@timwangdev

Components

properties, state

React Component

In React, UI is a function of state and props.

View

Browser DOM vs. Mobile

  • <div>
  • <img>
  • <p>, <span>
  • <ul>, <ol>
  • <View>
  • <Image>
  • <Text>
  • <ListView>

Why are we using React Native

  • Development Speed

  • Code Sharing

  • Product Experience

  • Native Integration

Using React Native

class HelloWorld extends Component {
  render() {
    return (
      <Text>Hello TNC!</Text>
    );
  }
}

Styling

In-line Style

<Text style={{color: '#FFFF00'}})>
  This text should be displayed in yello.
</Text>

/* Welcome to the web in 1999 */

...
<View>
  <Text style={styles.red}>just red</Text>
  <Text style={styles.bigblue}>just bigblue</Text>
</View>
...
​const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

The Problems

  • Upgrade Path (2-week release train)

  • Platform Specific Code

  • Animation Performance

  • Navigator complexity

Demo

Introduction to React Native

By The NetCircle

Made with Slides.com

Introduction to React Native

Building Native Apps with JavaScript

  • 69

More from The NetCircle