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