Upgrade to Pro — share decks privately, control downloads, hide ads and more …

REACT JS Rethinking UI development

FEVR
May 20, 2015

REACT JS Rethinking UI development

Introduction to REACT js framework built by facebook

FEVR

May 20, 2015
Tweet

More Decks by FEVR

Other Decks in Technology

Transcript

  1. R E A C T. J S by Stefano Ceschi

    Berrini @stecb Rethinking UI Development May 20th, 2015
  2. I’m a Software Engineer @ Timerepublik. I’m not a React

    expert. I’m still learning it, I’m hacking/experimenting with it and I’m really LOVING IT. So, let’s share this learning process. http://stecb.ninja
  3. It’s a JavaScript library for the the UI built by

    V M C it automa(g|t)ically keeps the interface up-to-date when data changes + As of May, 20th 2015
  4. • AirBnB • Atlassian • BBC • Imgur • Khan

    Academy • Pivotal Tracker • Reddit • Whatsapp • Wired • Yahoo • …
  5. key #1: Components Everything in React is a modular/reusable component:

    • react HTML elements • Custom react components • Collections/composition of the above Think about a component as a state-machine. Don’t think about the DOM.
  6. key #1: Components A component is a React class. It

    can take input data, it can have a state and you can: • define methods • render a tree of functions When you add a component to your UI, you’re just invoking a function. mandatory
  7. key #1: Components JSX JS optional var HelloWorld = React.createClass({

    render: function() { return <div>Hello world, {this.props.name}!</div>; } }); React.render(<HelloWorld name="Bruce" />, document.getElementById('main')); var HelloWorld = React.createClass({ render: function() { return React.createElement("div", null, "Hello world, ", this.props.name, "!"); } }); React.render(React.createElement(HelloWorld, {name: "Bruce"}), document.getElementById('main')); ?harmony for ES6
  8. key #1: Components JSX JS syntactic sugar: a concise and

    familiar syntax for defining tree structures with attributes. XML like elements => function + args
  9. key #1: Components properties Props are the options/configuration of a

    component, they are data passed from parents to children and they are immmutable. If you think a property of a component could changed over time, then that should be part of its state.
  10. key #1: Components properties var Box = React.createClass({ render: function()

    { var list = this.props.list.map(function(item) { return <li>{item}</li> }); return ( <div> <h1>{this.props.title}</h1> <ul> {list} </ul> </div> ); } }); React.render(<Box title="Cool Box" list={['item 1', 'item 2', 'item 3', 'item N']} />, document.body);
  11. key #1: Components state State is mutable and should contain

    data that a component's event handlers may change to trigger a UI update (i.e. User interactions, Server responses etc) State is optional and you should avoid it as much as possible, to reduce complexity! setState(data, callback)
  12. key #1: Components state var Box = React.createClass({ getInitialState: function()

    { return { hasDetailsVisible: false }; }, handleToggle: function() { this.setState({ hasDetailsVisible: !this.state.hasDetailsVisible }); }, render: function() { var list = this.props.list.map(function(item) { return <li>{item}</li> }); var detailsStyle = this.state.hasDetailsVisible ? {display: 'block'} : {display: 'none'}; return ( <div> <h1>{this.props.title}</h1> <button onClick={this.handleToggle}>toggle details</button> <ul style={detailsStyle}> {list} </ul> </div> ); } }); React.render(<Box title="Cool Box" list={['item 1', 'item 2', 'item 3', 'item N']} />, document.body);
  13. key #1: Components events http://facebook.github.io/react/docs/events.html Synthetic events. They work identically

    on every browser Clipboard, Keyboard, Focus, Form, Mouse, Touch, UI, Wheel
  14. key #1: Components events var Box = React.createClass({ getInitialState: function()

    { return { hasDetailsVisible: false }; }, handleToggle: function(event) { this.setState({ hasDetailsVisible: !this.state.hasDetailsVisible }); }, render: function() { var list = this.props.list.map(function(item) { return <li>{item}</li> }); var detailsStyle = this.state.hasDetailsVisible ? {display: 'block'} : {display: 'none'}; return ( <div> <h1>{this.props.title}</h1> <button onClick={this.handleToggle}>toggle details</button> <ul style={detailsStyle}> {list} </ul> </div> ); } }); React.render(<Box title="Cool Box" list={['item 1', 'item 2', 'item 3', 'item N']} />, document.body);
  15. key #1: Components DOM elements var Input = React.createClass({ handleChange:

    function(event) { console.log(event.target.value); }, componentDidMount: function() { React.findDOMNode(this.refs.myInput).focus(); }, render: function() { return ( <input type="text" ref="myInput" onChange={this.handleChange} /> ); } }); http://facebook.github.io/react/docs/component-specs.html
  16. React internally uses a virtual representation of the DOM It

    mutates the real DOM by using a tree diff algorithm + heuristic O(n^3) => O(n) You can think about re-rendering your entire application on every update without worrying about performance! key #2: Virtual DOM
  17. https://www.flickr.com/photos/usnavy/5815022252 Why is it so fast? JS execution is FAST,

    real DOM mutations are SLOW So, being able to re-render the entire application by mutating JUST what changed on the UI is the most important thing key #2: Virtual DOM
  18. State N State N+1 Changed attributes, just update them on

    the real DOM The NodeType has changed, throw away that node (+subtree) and replace it with a new node! key #2: Virtual DOM
  19. key #3: One-way Data Binding <ComponentA /> <ComponentB /> <ComponentD

    /> <ComponentC /> Data (props) flows only in one way. From the Owner to child.
  20. Not just the UI… Architecture: Flux React on the server:

    React.renderToString(component) React Native