React.js

for mobile developers?

We built React to solve one problem:

building large applications with data that changes over time.

https://facebook.github.io/react/docs/why-react.html

https://facebook.github.io/react/

React - A JavaScript library for building user interfaces

Example

var AdminPanel = React.createClass({
  render: function() {
    return (
      <div />
    )
  }
});

ReactDOM.render(
    <AdminPanel />, 
    document.getElementById('to-replace')
);

Example

var AdminPanel = React.createClass({
  render: function() {
    return (
      <div />
    )
  }
});

"use strict";

var AdminPanel = React.createClass({
  displayName: "AdminPanel",

  render: function render() {
    return React.createElement("div", null);
  }
});

ReactDOM.render(
    <AdminPanel />, 
    document.getElementById('to-replace')
);

ReactDOM.render(
    React.createElement(AdminPanel, null),
    document.getElementById('to-replace')
);

React(state) = html

Stateful component

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },

  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },

  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },

  componentWillUnmount: function() {
    clearInterval(this.interval);
  },

  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});


ReactDOM.render(<Timer />, mountNode);

Very stateful component

var App = React.createClass({
  getInitialState: function() {
    return {
      user: Parse.User.current(),
      alert: null
    };
  },

  updateUser: function() {
    this.setState({user: Parse.User.current()});
  },

  onUserNotLogged: function(alert) {
    this.setState({alert: alert});
  },

  onLogout: function() {
    Parse.User.logOut();
    this.updateUser();
  },

  getUsername: function() {
    if (this.state.user === null) {
      return "";
    }
    else {
      return this.state.user.attributes.username;
    }
  },

  render: function() {
    var whenLogged = <AdminPanel onLogout={this.onLogout} user={this.state.user} />;
    var whenNotLogged = <LoginForm onSuccess={this.updateUser} onFailure={this.onUserNotLogged} alert={this.state.alert} />;
    var app = (this.state.user) ? whenLogged : whenNotLogged;
    return (
      <div>
        <NavBar username={this.getUsername()} onLogout={this.onLogout} />
        {app}
      </div>
    );
  }
});

Mobile?

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var Pizza              = require('./Pizza');
var CuttingInstruction = require('./CuttingInstruction');
var PeopleCountPicker  = require('./PeopleCountPicker');

class FairPizza extends React.Component {
  constructor(props) {
    super(props);
    this.state = { peopleCount: 4 };
    this.setPeopleCount = this.setPeopleCount.bind(this);
    this.cuttingEdges = this.cuttingEdges.bind(this);
  }

  setPeopleCount(peopleCount) {
    this.setState({ peopleCount: peopleCount });
  }

  cuttingEdges() {
    return this.state.peopleCount * 2;
  }

  render() {
    return (
      <View style={styles.app}>
        {this.pizza()}
        {this.cuttingInstruction()}
        {this.peoplePicker()}
      </View>
    );
  }

  pizza() {
    return (
      <View style={styles.pizza}>
        <Pizza cuttingEdges={this.cuttingEdges()} />
      </View>
    );
  }

  cuttingInstruction() {
    return (
      <View style={styles.cuttingInstruction}>
        <CuttingInstruction
          cuttingEdges={this.cuttingEdges()}
          peopleCount={this.state.peopleCount}
        />
      </View>
    );
  }

  peoplePicker() {
    return (
      <View style={styles.peoplePickerWrapper}>
        <View style={styles.peoplePicker}>
          <PeopleCountPicker
            peopleCount={this.state.peopleCount}
            setPeopleCount={this.setPeopleCount}
          />
        </View>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  app: {
    flex: 1,
    backgroundColor: '#C41D47',
  },
  pizza: {
    alignSelf: 'center',
    marginTop: 40
  },
  cuttingInstruction: {
    alignSelf: 'center',
    padding: 20,
    paddingTop: 0
  },
  peoplePickerWrapper: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  peoplePicker: {
    height: 95,
    overflow: 'hidden',
    justifyContent: 'flex-end',
  }
});

AppRegistry.registerComponent('FairPizza', () => FairPizza);

http://reactkungfu.com/2015/07/going-mobile-with-react-native/

https://www.youtube.com/watch?v=7rDsRXj9-cU