React.JS

Now with batteries included

Jason Brown

Front end @ Mirador

What is React?

  • A highly efficient diffing algorithm of a virtual tree.
  • Collection of state trees
  • Combined with a renderer 
  • In Browser => HTML
  • On Mobile => Native Modules
  • Write your own renderer

What is React Really?

  • A way to build out your application as modules
  • Hook into the creation, update, remove of bits of your application
  • Allow you to not worry about DOM, just worry about what your data looks like.
  • Minimal updates with Diffing.
  • Use JavaScript however the heck you want
var HelloMessage = React.createClass({
  render: function() {
    return (
            <div>
                Hello {this.props.name}
            </div>
           );
  }
});

ReactDOM.render(<HelloMessage name="John" />, document.getElementById("#app"));
var HelloMessage = React.createClass({displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});

ReactDOM.render(
    React.createElement(HelloMessage, {name: "John"}), document.getElementById("#app")
);

Diffing?

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

ReactDOM.render(<HelloMessage name="John" />, document.body);
<div>
    Hello John
</div>
ReactDOM.render(<HelloMessage name="Jason" />, document.body);
<div>
    Hello John
</div>
<div>
    Hello Jason
</div>
div.textContent = "Hello Jason"

Angular vs Ember

  • Very opinionated - A/E
  • Ember CLI - pretty awesome
  • Issues w/ Third Party Plugins - A/E
  • Server side rendering - sort of (Fastboot)
  • Mobile - Angular is trying (on top of React Native)
  • TypeScript - A
  • Animations - both sort of have it
  • Templates as strings - A/E

Others

  • https://github.com/trueadm/inferno ~ Fastest of all
  • https://github.com/developit/preact
  • https://vuejs.org/ ~ angular-ish

Most are smaller

Drawbacks

  • Mostly only latest IEs
  • No normalization across browsers
  • No Native like React Native

Front end Future

  • Everything is a component
  • Virtual DOM diffing
  • Lifecycle Methods
  • Awesome tooling for fast and easy setup

React Shining Moments

  • Performance
  • Testing
  • Re-using DOM for easier intelligent animations
  • Composability
  • Declarative 
  • Integration with other libraries/frameworks
  • Debugging
  • Performance tooling
  • ... I could keep going

Composability

<App>
    <Header>
        <Nav />
    </Header>
    <Content>
        <Post>
            <PostContent id="1"/>
            <PostComments id="1"/>
        </Post>
    </Content>
</App>
{
    handleClick: function() {

    },
    render: function() {
        return (
            <button className="myButton" onClick={this.handleClick}>Save...</button>
        )
    }
}

vs

$(".myButton").on("click", function(e) { doSomeJavaScript() })

Declarative

Reusing DOM + Intelligent Error Messages

var people = [
    { id: 1, name: 'Pete Hunt' },
    { id: 2, name: 'Ryan Florence'},
    { id: 3, name: 'Christopher Chedeau'}
];


{

    getPeople: function() {
        return people.map(function(person) {
            return (
                <li>{person.name}</li>
            )
        });
    },

    render: function() {
        
        return (
            <ul>
                {this.getPeople()}
            </ul>
        )
    }

}
Each child in an array should have a unique "key" prop. Check the render method of HelloMessage. 
See http://fb.me/react-warning-keys for more information.

Reusing DOM + Intelligent Error Messages

var people = [
    { id: 1, name: 'Pete Hunt' },
    { id: 2, name: 'Ryan Florence'},
    { id: 3, name: 'Christopher Chedeau'}
];


{

    getPeople: function() {
        return people.map(function(person) {
            return (
                <li key={person.id}>{person.name}</li>
            )
        });
    },

    render: function() {
        
        return (
            <ul>
                {this.getPeople()}
            </ul>
        )
    }

}

So it's not a framework?

  • Routing: react-router
  • Native Apps: React Native
  • Data: Redux
  • Relay + GraphQL -> From Facebook
  • Build System: Webpack
  • Data/Models: Immutable.JS

Don't use it all the time

  • Angular/Ember/React
  • Basic websites? Maybe
  • Wordpress? Maybe
  • Small/Large apps? Of course
  • Need flexibility? Yep
  • Transitioning legacy apps to something modern? Definitely
  • For Fun? Hell yeah

The cool stuff

Future

React Fiber Architecture

Simply put: Certain things happen faster than others.

Basics Applied: A text input's change will get higher priority. A DOM element with `display: none` will get lower priority

Advanced: Multiple state trees. Virtual stack frame of queued and prioritized work to be executed. Other complicated junk

Benefits: Faster render, better animation capabilities, return multiple things from a single React component, async rendering, etc.

Why React?

  • Turn your application into a collection of components
  • Awesome development tooling and abilities
  • Easy-ish testing
  • Escape hatches where you need it
  • JavaScript for templating.
  • Let React do the heavy lifting of updating your UI
  • If you've ever been confused about a jQuery selector existing on the page

Jason Brown

Coffee? Beer?

http://www.meetup.com/Portland-ReactJS

React.JS

By Jason Brown

Made with Slides.com

React.JS

  • 587

More from Jason Brown