React - A JavaScript library for building user interfaces

Transcript

uses

What's the best way to structure javascript applications?

There are a lot of javascript frameworks

Agility.js AngularJS Backbone.js CanJS Derby Dojo Ember.js Firebase + AngularJS

Flight jQuery KnockoutJS Knockback.js Maria Meteor Polymer React SocketStream Vanilla JS YUI todomvc.com

Most of them... Observable Objects Mutation -> Update

What do we need? Re-render the entire component

Re-rendering the DOM on each update is very expensive

On each update - builds a new virtual DOM subtree

- diffs it with the old one - computes the minimal set of DOM mutations and put them in a queue - batch executes all updates

None

Is it a template language like handlebars.js?

Nooooooooooo! "To set the record straight: React components are far

more powerful than Angular templates; they should be compared with Angular’s directives instead. [Directives are Angular's way of creating custom elements]." Pete Hunt quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look

var React = require('React'); var HelloMessage = React.createClass({ render: function()

{ return React.DOM.div( null, "Hello ", this.props.name); } }); React.renderComponent( HelloMessage({name: "John"}), mountNode); my-button.js

var React = require('React'); var HelloMessage = React.createClass({ render: function()

{ return ( <div>Hello {this.props.name}</div> ); } }); React.renderComponent( HelloMessage({name: "John"}), mountNode); my-button.jsx

Components "A highly cohesive building block for UIs loosely coupled

with other components" Pete Hunt

Components "Reusable API that encapsulate a bunch of different stuff"

Tom Occhino

- It's the markup - It's the javascript - It's

the behavior's function It's more than a template

The render function render: function() { }

<MyButton text="Click-me" onAction={someFunc} /> var MyButton = React.createClass({ render: function()

{ return ( <button className="my-button" onClick={this.props.onAction}> <span>{this.props.text}</span> </button> ); } });

<MyButton text="Click-me" onAction={someFunc} /> var MyButton = React.createClass({ render: function()

{ return ( <button className="my-button" onClick={this.props.onAction}> <span>{this.props.text}</span> </button> ); } });

The state

var Timer = React.createClass({ });

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

}, render: function() { } });

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

}, render: function() { this.state.secondsElapsed; // 0 } });

var Timer = React.createClass({ tick: function() { var current =

this.state.secoundsElapsed; this.setState({ secondsElapsed: current + 1 }); } });

var Timer = React.createClass({ componentDidMount: function() { this.interval = setInterval(

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

var Timer = React.createClass({ getInitialState: function() {}, tick: function() {},

componentDidMount: function() {}, componentWillUnmount: function() {}, render: function() {} });

Lifecycle functions componentDidMount: function() {}, componentWillmount: function() {}, componentWillUnmount: function()

{}, componentWillReceiveProps: function() {}, componentComponentUpdate: function() {}, componentWillUpdate: function() {}, componentDidUpdate: function() {},

Composable Components Inheritance

var SetIntervalMixin = { componentWillMount: function() { this.intervals = [];

}, setInterval: function() { this.intervals.push( setInterval.apply(null, arguments)); }, componentWillUnmount: function() { this.intervals.map(clearInterval); } };

var Timer = React.createClass({ mixins: [setIntervalMixin], ... });

SEO

string renderComponentToString( ReactComponent component);

And the best part of it is

var html = React.renderComponentToString( HelloMessage({name: "John"})); Server Client <body> <mountNode>

{{html}} </mountNode> </body> React.renderComponent( HelloMessage({name: "John"}), mountNode);

var html = React.renderComponentToString( HelloMessage({name: "John"})); Server Client <body> <mountNode>

Is the data updated? Only attaches the event handlers

Performance

Show lists of 1500 rows Angular: 1.35s ReactJs: 310ms www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs

Testing

None

var CheckboxWithLabel = React.createClass({ getInitialState: function() { return { isChecked:

false }; }, onChange: function() { this.setState({isChecked: !this.state.isChecked}); }, render: function() { return ( <label> <input type="checkbox" checked={this.state.isChecked} onChange={this.onChange}/> {this.state.isChecked ? this.props.labelOn : this.props.labelOff} </label>); } }); module.exports = CheckboxWithLabel;

var CheckboxWithLabel = React.createClass({ getInitialState: function() { return { isChecked:

false }; }, onChange: function() { this.setState({isChecked: !this.state.isChecked}); }, render: function() { return ( <label> <input type="checkbox" checked={this.state.isChecked} onChange={this.onChange}/> {this.state.isChecked ? this.props.labelOn : this.props.labelOff} </label>); } }); module.exports = CheckboxWithLabel;

jest.dontMock('../CheckboxWithLabel.js'); describe('CheckboxWithLabel', function() { it('changes the text after click', function()

{ var React = require('react/addons'); var CheckboxWithLabel = require('.. /CheckboxWithLabel.js'); var TestUtils = React.addons.TestUtils; var checkbox = TestUtils.renderIntoDocument( <CheckboxWithLabel labelOn="On" labelOff="Off" /> ); }); });

jest.dontMock('../CheckboxWithLabel.js'); describe('CheckboxWithLabel', function() { it('changes the text after click', function()

// Verify that it's Off by default var label =

TestUtils.findRenderedDOMComponentWithTag( checkbox, 'label'); expect( label.getDOMNode().textContent).toEqual('Off'); // Simulate a click and verify that it is now On var input = TestUtils.findRenderedDOMComponentWithTag( checkbox, 'input'); TestUtils.Simulate.change(input); expect( label.getDOMNode().textContent).toEqual('On');

// Verify that it's Off by default var label =

TestUtils.findRenderedDOMComponentWithTag( checkbox, 'label'); expect( label.getDOMNode().textContent).toEqual('Off'); // Simulate a click and verify that it is now On var input = TestUtils.findRenderedDOMComponentWithTag( checkbox, 'input'); TestUtils.Simulate.change(input); expect( label.getDOMNode().textContent).toEqual('On');

React - A JavaScript library for building user ...

React - A JavaScript library for building user interfaces

More Decks by Helielson

Other Decks in Programming

Featured

Transcript