Reusability-SharedBheviour.js

// Loggable class 
class Loggable extends React.Component { 
  logClick() {
    console.log(`Element ${this.props.id} clicked`); $.post(`/clicks/${this.props.id}`);
  } 
}

// Extend it in ES6 version as there is no mixin
class Link extends Loggable { 
  handleClick(e) {
    this.logClick();
    e.preventDefault(); 
    console.log("Handling a link click...");
  } 
  render() {
    return (
      <a href="#" onClick={this.handleClick.bind(this)}>Link</a>
    );
  }
}

class Button extends Loggable { 
  handleClick(e) {
    this.logClick();
    e.preventDefault();
    console.log("Handling a button click...");
  } 
  render() {
    return (<button onClick={this.handleClick.bind(this)}>Button</button>);
  }
}
ReactDOM.render( <div>
                <Link id="link1" /> <br /><br />
                <Button id="button1" />
                </div>,
document.getElementById("react") );




// ES5 version 

const logClicksMixin = { 
  logClick() {
    console.log(`Element ${this.props.id} clicked`);
    $.post(`/clicks/${this.props.id}`); 
  },
};
// add mixin
const Link = React.createClass({
  mixins: [logClicksMixin],
  handleClick(e) {
    this.logClick();
    e.preventDefault(); 
    console.log("Handling a link click...");
  }, 
  render() {
    return (
      <a href="#" onClick={this.handleClick}>Link</a>);
    }
});
    
    
const Button = React.createClass({
  mixins: [logClicksMixin],
  handleClick(e) {
    this.logClick();
    e.preventDefault();
    console.log("Handling a button click...");
  }, 
  render() {
    return (<button onClick={this.handleClick}>Button</button>); 
  }
});

ReactDOM.render( <div>
                <Link id="link1" /> <br /><br />
                <Button id="button1" />
                </div>,
document.getElementById("react") );