REACT

The Value Proposition

Facebook, Instagram, WhatsApp, Yahoo, Netflix, Imgur, Reddit, Wired, BBC, New York Times, Flipboard, Atlassian, Asana, Khan Academy, Instructure, AirBnB, Redfin

What is React? 

React is a JavaScript library for creating user interfaces. Many people choose to think of React as the V in MVC.

Cool, so it's a templating library like handlebars or mustache?

No, no it is not. 

• Components

• Virtual Dom

• Data Flow

Everything in React is a component 

• Simple

• Declarative

• Composable

• Testable

Every component has the same lifecycle 

• componentWillMount
• componentDidMount
• componentWillRecieveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate
• componentWillUnmount
• render
• getInitialState
• getDefaultProps
• propTypes
• mixins
• statics
• displayName

var CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
});

React.render(
  <CommentBox url="comments.json" pollInterval={2000} />,
  document.getElementById('content')
);

The Virtual DOM is not the Shadow DOM. 

A lightweight, JavaScript representation of the DOM. 

On change, React diffs the previous virtual representation of the DOM with the new virtual representation of the DOM and updates the real DOM with only the necessary changes.

One-way data flow 

Cool story bro, but you can't build an application with just the V in MVC.

FLUX

An application architecture - not a framework

ACTION

DISPATCHER

STORE

VIEW

So why React? 

Is it because it is fast?

O(1) v. O(n)

If you're going to keep making the performance argument, you'll eventually loose.

Erik Bryn

Is it because it is great for SEO and progressive enhancement?

No. Isomorphic JavaScript is not the only way to solve these problems.

Is it because we can build native applications with React?

Any application that can be written in JavaScript,will 

eventually be written in JavaScript.

Jeff Atwood

Simplicity

The art of programming is the art of organizing complexity, of mastering multitude and avoiding its bastard chaos as effectively as possible.

Edsger Dijkstra

What matters for simplicity is that there's no interleaving. 

Rich Hickey

Simplicity is prerequisite for reliability.  

Edsger Dijkstra