React.jS

Building User Interfaces

for @JSLuxembourg by Thierry Nicola / @littleiffel, Feb.2015

About me

Agenda

  1. ReactJS
  2. Goal of ReactJS
  3. Getting Started with ReactJS
  4. Demo with Live coding

ReactJS

  • Javascript library for building user interfaces
  • By facebook.com
  • Initial Release ~ 2013
  • Current stable: v0.12.2
  • 128kb
  • Used in Production by yahoo, instagram, facebook, Khan Academy, Netflix, Airbnb, Atlassian,...

Goal of ReactJs

Address common challenges in Single-Page Web Applications with data that changes over time

Why ReactJS might be interesting for you

  • ReactJS is not another MVC Framework, ReactJS is simply the V
  • Virtual DOM
  • One-way reactive Data flow
  • Build Web-Apps using FLUX
  • ?Native ReactJS for iOS?

ReactJS - Just the UI

“Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.”

from http://facebook.github.io/react/

Components

  • A Component should ideally only do one thing
  • Components instead of Templates (NO HTML directives)
  • JSX
    XML-LIKE SYNTAX EXTENSION TO ECMASCRIPT
  • Components have a state (of properties)
  • Components are organized in a hierarchy

An Example Component


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

ReactJS - Virtual DOM

React uses a virtual DOM diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.

from http://facebook.github.io/react/

How ReactJS updates the DOM (Virtual DOM)

  • Axiom: "DOM manipulation is expensive"
    1. Component.render generates in memory representation of the its view
    2. From that representation a markup string is generated and injected into the document
    3. On Data changes, Component.render is called again and a diff from current view to the new is made and a minimal set of required DOM changes is generated
    4. Example: http://jsfiddle.net/fv6RD/3/

ReactJS - Data flow

React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.

from http://facebook.github.io/react/

Thinking in ReactJS

  1. Break the UI into a component hierarchy
  2. Build a static version in React (no interactivity but renders data)
  3. Identify the minimal representation of UI state,
  4. Identify where your state should live
  5. Add inverse data flow (input -> state)

Coding a your first Component


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

        // Attach Component to DOM Node
        React.render(<HelloWorld name='John' />, document.body);

Stateful Component


var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: this.props.init};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
    
Seconds Elapsed: {this.state.secondsElapsed}

    );
  }
});

React.render(<Timer init="100"/>, document.body);

Forms

  • Controlled Forms
  • Uncontrolled Forms

Controlled Forms


var Form = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    var value = this.state.value;
    return ;
  }
})

Uncontrolled Forms


var Form = React.createClass({
  render: function() {
    return ;
  }
})

Access via this.refs.myfield.getDOMNode().value

Lets code

  • Installation: bower install react
    Bower? Install bower: npm install bower
    NPM?

        <html>
        <head>
        <script src="build/react.js"></script>
        <script src="build/JSXTransformer.js"></script>
        </head>
        <body>
        <div id="example"></div>
        <script type="text/jsx">
        var HelloMessage = React.createClass({
        render: function() {
        return 
Hello {this.props.name}
;
        }
        });
        React.render(<HelloMessage name="John" />, document.getElementById('example'));

        </script>
        </body>
        </html>

Demo

FLUX

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework

from http://facebook.github.io/flux/

More

Resources

THE END

Thanks for your attention!