Mixins

There are times when multiple components share the same code; in such cases, we can use mixins instead of writing the same code again and again.

A mixin is an object that holds component methods that can be easily plugged in to any component.

Let's look at an example to demonstrate mixins. Here is the code to create a new container element. Place it in the body tag:

<div id="container8"></div>

Here is the code for our example. Place it in the script tag that will be compiled by Babel.

var Mixin1 = {
  componentWillMount: function(){
    console.log("Component will mount now");
  }
}

var Mixin2 = {
  componentDidMount: function(){
    console.log("Component did mount");
  }
}

var HeadingComponent = React.createClass({
  mixins: [Mixin1, Mixin2],
  render: function(){
    return <h1>React is Awesome</h1>
  }
});

ReactDOM.render(<HeadingComponent />, document.getElementById("container8"));

This is the output of the code on the page:

And this is the output on...