Why do we React and What the Flux?

Nordnet Academy

Javascript

Javascript

React

Just UI

  • V in MVC
  • No assumptions about the rest of the technological stack

A Javascript library for building user interfaces

React documentation

React

Virtual DOM

  • Abstracts away the DOM
  • Allows for a simpler programming model and better performance
  • Server-side rendering using Node
  • Different render target possibilities

React

Data flow

  • Promotes one-way data flow
  • Easier to reason about
  • Less magic, rainbows and unicorns

React

React

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

jQuery


  <a class="toggle">Toggle</a>
  
  $('.toggle').click(function() { 
    $(this).toggle(); 
  }

Two-way data binding

  • Data change triggers UI change
  • Making HTML more powerful by proprietary markup
  • Markup parsed as Javascript

  // Angular
  <div ng-repeat="account in vm.accounts">

JSX and React

  • HTML and Javascript belong together
  • Puts "HTML" in your Javascript
  • Full Javascript power, not limited by proprietary markup

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

React components are idempotent functions. They describe your UI at any point in time, just like a server-rendered app.

~ Pete Hunt, React: Rethinking best practices

React

React

Components

  • React.createClass()
  • ES5 syntax
  • extends React.Component
  • ES6 syntax

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

class Hello extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

React is all about modular, composable components

Components


class Comment extends React.Component {
  render() {
    const { text, author } = this.props.comment;

    return (
      <div>
        { text }, { author }
      </div>
    );
  }
}

class Comment extends React.Component {
  render() {
    const { text, author } = this.props.comment;

    return (
      React.createElement("div", null, text, ", ",  author)
    );
  }
}

Components


class CommentsList extends React.Component {
  render() {
    const comments = this.props.comments.map(
        comment => <Comment key={comment.id} comment={comment} />);

    return (
      <div>
        { comments }
      </div>
    );
  }
}


class CommentsList extends React.Component {
  render() {
    const comments = this.props.comments.map(
        comment =>
            React.createElement(
                Comment, {key: comment.id, comment: comment})
    );

    return (
      React.createElement("div", null, comments)
    );
  }
}

Components


class Application extends React.Component {
  render() {
    const comments = [
        { id: 1, text: 'First comment', author: 'dmidem' },
        { id: 2, text: 'Second comment', author: 'dmidem' },
    ];

    return (
      <CommentsList comments={comments} />
    );
  }
}


React.render(<Application />, document.getElementById('app'));

class Application extends React.Component {
  render() {
    const comments = [
        { id: 1, text: 'First comment', author: 'dmidem' },
        { id: 2, text: 'Second comment', author: 'dmidem' },
    ];

    return (
      React.createElement(CommentsList, {comments: comments})
    );
  }
}


React.render(
  React.createElement(Application, null), 
  document.getElementById('app'));

Components

  • Functions over your data that return UI
  • Building blocks of your application
  • Component lifecycle
  • this.props - external input data
  • this.state - internal component state

Build components, not templates

~ Pete Hunt, React: Rethinking best practices

Component's

lifecycle

  • Initial render
  • Props change
  • State change
  • Component unmount

Lifecycle stages

  • defaultProps
  • constructor()

Initial render

  • getDefaultProps()
  • getInitialState()

React.createClass()

extends React.Component

  • componentWillMount()
  • render()
  • componentDidMount()

Initial render

React.createClass()

extends React.Component

var Hello = React.createClass({
  getDefaultProps: function() {
    return { name: 'stranger' };
  },

  getInitialState: function() {
    return { greeting: 'Hello' };
  },

  render: function() {
    return (
      <div>
        { this.state.greeting }
        { this.props.name }
      </div>
    );
  }
});

React.render(<Hello name="dmidem" />, 
  element);
class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { greeting: 'Hello' };
  }

  render() {
    return (
      <div>
        { this.state.greeting } 
        { this.props.name }
      </div>
    );
  }
}

Hello.defaultProps = { name: 'stranger' };

React.render(<Hello name="dmidem" />, 
    element);

Props change

  • componentWillReceiveProps(nextProps)
  • shouldComponentUpdate(nextProps, nextState)
  • componentWillUpdate(nextProps, nextState)
  • render()
  • componentDidUpdate(prevProps, prevState)

State change

  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()

Component unmount

  • componentWillUnmount()

Component's lifecycle

React documentation

this.props

  • Component interface
  • Received from outside
  • Data to be rendered
  • Callbacks for communication with parent components
  • Never mutate props
  • Never ever mutate props

this.state

  • Internal component state
  • Data to be rendered
  • Possible to mutate
    • this.setState(newState);
  • Careful when to mutate

Virtual DOM

Virtual DOM

  • Manipulating DOM is expensive
  • In-memory copy of real DOM
  • Fast to manipulate
  • Reconciliation
    • Diff current DOM with new VDOM
  • Batch updates to real DOM

Virtual DOM

The algorithm will not try to match sub-trees of different components classes. If you see yourself alternating between two components classes with very similar output, you may want to make it the same class.

If you don't provide stable keys (e.g. by using Math.random()), all the sub-trees are going to be re-rendered every single time. By giving the users the choice to choose the key, they have the ability to shoot themselves in the foot.

React documentation, reconciliation

Data Flow

Data flow

  • One way data flow
  • Hierarchy of components
  • parent => child

Flux

  • Application architecture
  • Unidirectional data flow
  • Pattern not a framework

Flux

Flux documentation

Flux

Redux

Questions?

Made with Slides.com