React.js

The Frontend Framework
of the Future

// Grant Timmerman — @grant

Disclaimer

The Frontend Framework
A library for building UI
of the Future
of TODAY

whois grant timmerman

  • Junior UW CSE
  • Fullstack web enthusiast
  • Tableau • LinkedIn • Sift Science • Google
  • Developer • Designer • Dancer • DubHacks
  • Contributor to React

Agenda

  • A history of JavaScript
  • Why React?
  • How it works
  • Let's build something!

Please ask questions along the way!

A history of JavaScript

  • Created in 10 days in May 1995 by Brendan Eich
  • Really picked up in 2005 when Ajax was implemented, avoiding the need for full page reloads
  • Node.js released by Joyent in 2009
  • Today ES6/Harmony is becoming the new standard in the JS community

Despite our long history, we still don't have a great way to build large frontend applications.

How should we structure our JavaScript applications?

Just use one of these MVC frameworks!

Ideal* MVC

Model • View • Controller

MVC, MVVM, MVW, MVP, MV*

MVC, MVVM, MVW, MVP, MV*

Models

  • Bidirectional changes
  • Encourages mutation
  • Observable

wtf?

Flow

Unidirectional Data Flow

How it works

The Virtual DOM

  • React is so fast because it never talks to the DOM directly
  • Maintains a fast in-memory representation of the DOM
  • Events are bound to the top-level DOMNode

Updating the DOM

Components

  • Represents a single reusable UI part
  • No explicit data binding
  • Components can contain components
  • props: Immutable values
  • state: Mutable values
  • render(): Returns the component's html

So how do we update data?

The jQuery way

function setupHome () {
  // Sets up map view
  $('.back-page').click(function (e) {
    if ($(e.target).hasClass('back-page')) {
      $('.back-page').toggleClass('map-view');
    }
  });

  var lastTime = $('.events.list').data('time');
  function initialize() {
    function updateCenter () {
      $.get('/api/location', function (location) {
        var panPoint = new google.maps.LatLng(location.lat, location.lng);
        map.panTo(panPoint);
      });
    }

Global $ DOM selector/event binding madness

The React way

  • No globals
  • Keep track of state per component (and keep it small!)
  • Have unidirectional data flow.

render: function() { ... }

should return JSX

JSX

var data = [
  { text: "message 1" },
  { text: "message 2" }
]
var myHTML = 
  • 
  
    {data[0].text}
    
  
    {data[1].text}

    • produces

  • 
  
    message 1
    
  
    message 2

    • JSX Example

    render: function() {
  var otherValue = 'bar';

  return (
    
    
      Below is my custom button component.
      <MyButton myProp='foo' myOtherProp={otherValue}/>
    
    
  );
}

    React Lifecycle

    Let's build something!

    Hello World

    var HelloMessage = React.createClass({
  render: function() {
    return 
    Hello {this.props.name}
    ;
  }
});

React.render(<HelloMessage name="UW Hackers" />, mountNode);

    That's it!

    Facebook Comments

    Booyah!

    React is Open Sourced

    github.com/facebook/react

    References

    If you're trying to achieve, there will be roadblocks. I've had them; everybody has had them. But obstacles don't have to stop you. If you run into a wall, don't turn around and give up. Figure out how to climb it, go through it, or work around it.
    ~Michael Jordan

    The End

    Thank you!

    Questions‽

    facebook.github.io/react/