What is React.js?

What is React.js?

• Developed by Facebook
• React is a view layer library, not a framework like Backbone, Angular etc.
• You can't use React to build a fully-functional web app

Why was React developed?

Why was React developed?

• Complexity of two-way data binding
• Bad UX from using "cascading updates" of DOM tree
• A lot of data on a page changing over time
• Complexity of Facebook's UI architecture
• Shift from MVC mentality

Who uses React?

React: the good

Easy to understand what a component will render

• Declarative code → predictable code
• You don't really need to study JS in the view file in order to understand what the file does

Easy to mix HTML and JS

• You do it already with template libraries (e.g. Handlebars, Mustache, Underscore etc.)

Uses full power of JS

• Decoupling templates from logic does not rely on the templates’ primitive abstractions, but uses full power of JavaScript in displaying views

No complex two-way data flow

• Uses simple one-way reactive data flow
• Easier to understand than two-way binding
• Uses less code

React is fast!

• Real DOM is slow
• JavaScript is fast
• Using virtual DOM objects enables fast batch updates to real DOM, with great productivity gains over frequent cascading updates of DOM tree

React dev tools

• React Chrome extension makes debugging  so much easier

Server-side rendering

• React.renderToString() returns pure HTML

React: the bad

React is nothing but the view

• No events
• No XHR
• No data / models
• No promises / deferreds
• No idea how to add all of the above

Very little info in the docs

• But it's not hard to learn

Architectural annoyances

• Setting state on unmounted components
• discussion is here: https://github.com/facebook/react/issues/2787

Building JSX requires some extra work

• But most of the work is already done for you by react-tools

No support for older browsers

• React won't work with IE8
• There some polyfills / shims that help

Why should I use React?

Why should I use React?

• Easy to read and understand views
• Concept of components is the future of web development
• If your page uses a lot of fast updating data or real time data - React is the way to go
• Once you and your team is over the React's learning curve, developing your app will become a lot faster

Is switching to React easy?

Is switching to React easy?

Understanding how it works will take time and will slow you down at first (but once you and your team get it, things will start happening much faster)

Component

Component

Components are self-contained reusable building blocks of web application.

React components are basically just idempotent functions (same input produces same output).

They describe your UI at any point in time, just like a server-rendered app.

Component

• Created using React.createClass()
• The only required method is render()
• Inserted into DOM using React.renderComponent()

var React = require('react'),
    SimpleView = React.createClass({
        render: function () {
            return <h1><strong>Example 1:</strong> A simple component</h1>;
        }
    });

React.renderComponent(SimpleView(), document.getElementById('example'));

Props

Props

• Passed down to component from parent component and represents data for the component
• accessed via this.props

render: function() {
    var someProp = 'bar';
    
    console.log('component render()', this.props);

    return <div>
        <AnotherComponent foo={someProp} model={this.props.model} />
    </div>;
}

State

State

• Represents internal state of the component
• Accessed via this.state
• When a component's state data changes, the rendered markup will be updated by re-invoking render() method

render: function() {
    return <h3>Click count: 
        <span className='label label-default'>{this.state.clicks}</span>
    </h3>;
}

JSX

JSX

• Arguably, one of the coolest things in React
• XML-like syntax for generating component's HTML
• Easier to read and understand large DOM trees
• Translates to plain JavaScript using react-tools

/** @jsx React.DOM */

render: function () {
    return <div>
        <h2>
            <strong>Example 4:</strong>  React App
        </h2>
    </div>;
}

/** regular DOM */

render: function () {
    return React.DOM.div(null, 
        React.DOM.h2(null, React.DOM.strong(null, "Example 4:"), " React App")
    );
}

Virtual DOM

Virtual DOM

• The virtual DOM is used for efficient re-rendering of the DOM
• React aims to re-render the virtual tree only when the state changes
• Uses 2 virtual trees (new and previous) to find differences and batch update real DOM
• Observes data changes (setState) and does dirty-checking to know when to re-render component
• Whenever possible, does not update entire component in real DOM - only computes a patch operation that updates part of the DOM

A simple component

A simple component

* see live example *

A nested component

A nested component

* see live example *

A stateful component

A stateful component

* see live example *

An app

An app

* see live example *

Our stack

Our stack

• Node.js + Nginx static server
• Chaplin
• React
• Exoskeleton (lean Backbone)
• Lodash
• Grunt, Gulp, Bower

core.teradek.com