Name: React Mixins with ES6 Components
Uploaded: 2015-04-17T00:10:21-05:00
Description: Sometimes called higher order functions or wrapper components, the React mixin functionality can be recreated easily with a simple function in ES6.

Sometimes called higher order functions or wrapper components, the React mixin functionality can be recreated easily with a simple function in ES6.

https://app.egghead.io/api/v1/lessons/react-react-mixins-with-es6-components/subtitles

React Mixins with ES6 Components

[00:01] So one thing an ES6 components do not support is mixins, and there are a lot of variations on how to achieve the same results as the mixins. Some people are going to call it higher-order functions, perhaps a higher-order component, but it's just a function. So we're going to take a look at this right now.

[00:21] We've got this very simple component here, and to create our first mix-in what we're going to do is say, "let react mixin", space there, equal, now this is going to be a function, it's going to take an inner component and it's going to return, class extend react.component. So, it's going to return a new component, we're going to take in a component, we're going to return a new component.

[00:46] I'm going to grab all this good stuff here, and I'm going to paste it in there, also grab this componented mount and drop it right here. Going to create a new render method in our mixin, and this is going to return our inner component, the component that was passed into our mixin function.

[01:06] Now, I'm going to pass in update as a prop, that's going to be equal to the .increment, and I'm also going to just pass in as a prop, this.state. Down here in our component, which I'm going to go ahead and rename to button, so we've got our button, we've got our onClick which is now going to be this.props.update, this.props.text is fine, but our count is going to be this.props.count. Go ahead and save that.

[01:36] Now we're going to create a new component here, it's going to be called app, and what we're going to end up rendering is our mixed in button. We're going to create that now. Let buttonmixed equal, and we're going to call our react mixin function, and we're going to pass it our button component. Now in our app, in our render method, we're going to return buttonmixed.

[01:56] We're going to go out and drop in our prop of text, we're just going to say, "I am a mixed button." Down here we don't need to pass in a prop to our app component, we're going to go and save that, and this is all actually working except we don't have our props. In addition to passing in this.state, we're going to carry over this.props and we have our mixed button.

[02:26] We have our mixin is fully working, so to further illustrate this we're going to go ahead and create another component, and we'll add our mixin to that component. This one's going to be called, label. Rather than a button we're going to return a label, same onClick, same Inner HTML, we'll just close our label, and down here, let me copy this and say, scroll that into view, we're going to react mixin our label and we're going to call this guy, labelmixed.

[03:01] Now here in our app, obviously, we're going to be returning more than one node, so I'll wrap that in parentheses, create a parentheses view, and I'm going to copy this guy. We're going to close that div, and this component is going to be called labelmixed, and I'm going to say, "I am a mixed label." Save that, load it up in the browser, and we have our mixed in button working just fine, and our mixed in label working just fine.

[03:29] That is how you achieve mixins with ES6 class components.

React Mixins with ES6 Components

Share this video with your friends