Redux and React in ES6, Ch#03

Redux React Ch#03

  • ch#02: 28~37

React Component Approaches

  • react component creation approaches
  • container vs presentational components

Four ways to create react components

  • es5 createClass
  • es6 create
  • es5 stateless function
  • es6 stateless funciton
  • many more…

ES5 Class Component

var HelloWorld = React.createClass({
  render: function() {
    return(
      <h1>Hello World</h1>
    );
  }
});

ES6 Class Component

  • No autobind
// works fine with es5 createclass
<div onClick={this.handleClick}></div>

// requires explicit bind with es5 class
<div onClick={this.handleClick.bind(this)}></div>
  • recommending adding this in constructor
class Contacts extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
}
  • Prop Types declared separaptely
  • Default props declared separately
  • Set initial state in constructor

ES5 Stateless Component

var HelloWorld = function(props) {
  return (
    <h1>Hello World</h1>
  );
}
  • easy, will create many of this

ES6 Stateless Component

const HelloWorld = (props) => {
  return (
    <h1>Hello World</h1>
  );
}

code compare

ES6 class style

import React from 'react';

class HelloWorld extends React.component {
  constructor(props) {
    super(props);
  }

  sayHi(event) {
    alert('Hi $(this.props.name)');
  }

  render() {
    return (
      <div>
      <a href="#" onClick={this.sayHi.bind(this)}>Say Hi</a>
      </div>
    );
  }
}

HelloWorld.protoTypes = {
  name: React.ProtoTypes.string.isRequired
};

export default HelloWorld;

ES6 stateless style

import React from 'react';

const HelloWorld = function(props) {
  const sayHi = function(event) {
    alert('Hi ${props.name}');
  };

  return (
    <div>
    <a href="#" onClick={sayHi}>Say Hi</a>
    </div>    
  );
};

HelloWorld.protoTypes = {
  name: React.ProtoTypes.string.isRequired
};

export default HelloWorld;

9 benefits of stateless functional components

  • no class needed
  • avoid ‘this’ keyword
  • enforced best practices: no state in presentational component, states should be managed by higher level container componet like flux or redux
  • high signal-to-noise ratio, less typing
  • enhanced code completion / intellisense
  • bloated components are obvious
  • easy to understand
  • easy to test
  • preformance

When to use stateless functional components

  • whenever possible

  • class componet: [state, refs, lifecycle methods, child functions (for performance)

  • stateless components: everywhere else

Other Ways to create components

  • Object.create
  • Mixins
  • Parasitic Components
  • StampIt

Container vs Presentation Components

Container

  • Litte to no markup
  • pass data and actions down
  • knows about redux
  • often stateful

  • smart, stateful, controller view

Presentation

  • nearly all markup
  • receive data and actions via props
  • don’t know about redux
  • typically stateless
  • most components

  • dumb, stateless, view
COMMENTS