About

• A javascript library for building user interfaces
• Made by Facebook's and Instagram's teams
• ~50k stars on github
• HTML-like syntax (JSX) in javascript files
• Very easy to learn and understand the logic behind main approaches

Key Points

• UI components are the cohesive units
• UI description and UI logic are tightly coupled
• Re-render everything on every update
• Virtual DOM and Synthetic Events

Virtual DOM

1. Create lightweight description of component UI
2. Diff it with the old one
3. Compute minimal set of changes to apply to the DOM
4. Batch execute all updates

Hello World!

...
<div id="app" />
...

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello World</div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('app')
);

Component Composition

var HomePage = React.createClass({
  render: function() {
    return (
      <div>
        <Header />
        <SearchBar />
        <BearList />
      </div>
    );
  }
});

Data Flow

• Parent-to-Child

  • Data can be passed to children as properties and available as this.props
  • Properties are immutable

• Child-to-Parent

  • Event handlers (callbacks) can be passed as properties

...
onSearch: function(keyword) {
  alert(keyword)
},
render: function() {
  return (
    <Header title="Hello World" />
    <SearchBar onSearch={this.onSearch} />
  );
}
...

Data Flow cont.

// Header.js
...
propTypes: {
  title: React.PropTypes.string
},
render: function() {
  return <h1>{this.props.title}</h1>;
}
...

// SearchBar.js
...
onChange: function(e) {
  this.props.onSearch(e.target.value);
},
render: function() {
  return (
    <input type="text" onChange={this.onChange} />;
  );
}
...

State

State is mutable and a private data-set of a component

var HomePage = React.createClass({
  getInitialState: function() {
    return { beers: [] }
  },
  onSearch: function(q) {
    this.props.service.findByKey(q).then(function(items) {
      this.setState({ beers: items });
    }.bind(this));
  },
  render: function() {
    return (
      <div>
        <SearchBar onSearch={this.onSearch} />
        <BeerList items={this.state.beers} />
      </div>
    );
  }
});

Component Lifecycle

Resources

• https://facebook.github.io/react/
• https://facebook.github.io/flux/docs/overview.html
• Best Practices
  • https://blog.risingstack.com/react-js-best-practices-for-2016/
  • https://www.toptal.com/react/tips-and-practices
  • https://github.com/planningcenter/react-patterns
• CheatSheets
  • http://ricostacruz.com/cheatsheets/react.html
  • http://reactcheatsheet.com/