What does it do?

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

Getting started

brew install node
brew install watchman
npm install -g react-native-cli

Props

...

class Hello extends Component {
    render() {
        return (
            <Text>Hello {this.props.name}</Text>
        )
    }
}


class Greeting extends Component {
    render() {
        return (
            <View style={{..}}>
                <Hello name="World" />
            </View>
        )
    }
}
...

Props are the basic way to pass parameters to a component. Take for example:

State

...

class Hello extends Component {
    constructor(props) {
        super(props);
        this.state = { word: 'Hello' };

        setInterval(() => {
            this.setState({ word: 'from' });
        }, 1000);

        setInterval(() => {
            this.setState({ word: 'React' });
        }, 2000)
    }

    render() {
        return (
            let words = this.state.word;
            <Text>{words}</Text>
        )
    }
}


class Greeting extends Component {
    render() {
        return (
            <View style={{..}}>
                <Hello />
            </View>
        )
    }
}
...

In the previous example we used a prop to control data coming from the parent. For changing data in the component, use state:

Styles

...

return (
    <Text style={styles.button}>
        Login
    </Text>
)

...

var styles = StyleSheet.create({
  button: {
    color: 'white',
    padding: 10,
    textAlign: 'center',
    backgroundColor: '#3e496b'
  }
});

Styling should seem pretty familiar... though everything is lowerCamelCase. And layout is all flexbox!

There is a lot more, but... 

Code and a few gotchas...

Well, gotmes...