Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



React Mixins

3:24 React lesson by

Mixins will allow you to apply behaviors to multiple React components.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Mixins will allow you to apply behaviors to multiple React components.

Avatar
Christopher

Hey I'd just like to know what you're using for your sublime shortcuts for the react snippets(like when you type rec to shortcut create a component)

Sorry if you've posted/explained this somewhere else!

Avatar
Joseph

https://github.com/joemaddalone/ReactSublimeSnippets

For ST3 you only need "ReactSnippets.sublime-package", for ST2 you need the entire "snippets" directory.

In reply to Christopher
Avatar
John

When following along in this lesson I had to use uppercase component names (ButtonComponent, InputComponent) to keep me from getting the dreaded "Cannot read property 'replace' of undefined" error. Apparently this is a recent change? Found problem and solution on StackOverflow.

Avatar
Bachir

Good find! got stuck on this for a while until I read your comment.
thanks!

In reply to John
Avatar
David

Yeah, thanks. I'd wish the creators would update it with a note or something, because this is part of the Pro plan and this will frustrate a ton of us. Not everyone is aware of the discussion tab.

In reply to John
Avatar
Joseph

React.createClass and mixins won't be going anywhere any time soon, but if you want a look at using higher order components in ES6: https://egghead.io/lessons/react-react-mixins-with-es6-components

In reply to Jordan

Hey, guys. In this video, we're going to talk about mixins, which are a really cool way to pass functionality into multiple components. To get us started, I'm going to go ahead and build up a quick app.

Let's see. We're just going to return a couple components here. I'm going to wrap this in a div. Our first component is going to be our Button, capital B Button component. It's going to have a prop of txt. Here, I'm just going to say "This is the button" and close that.

This next one's going to be a Label component. Our txt prop there is going to be "This is the label." I'm going to close that out. Let's go ahead and build up these components. Here's our Button, where it's going to output a button. We're going to pass that prop of txt in as its inner HTML.

We'll go ahead and create our Label. Same as the Button. This will be a label. Don't need the htmlFor. We'll just pass in the prop of txt as its inner HTML. Let's go ahead and render this out. I'm going to render App to the document.body. Let's go ahead and load that up. Let's go ahead and drop a line break right here.

Let's say on the componentWillMount phase of each of these components, I want it to go ahead and console.log something out. I'm going to create our mixin in order to do that. It's an object. I'm just going to drop in our componentWillMount phase right here. I'm going to console.log "Will mount."

To get this guy into each of our components, we're going to use the mixins key. That's an array. We just pass in the mixin or mixins that we want our component to inherit. I'm going to load that up. You can see we got "Will mount" two times.

We can also pass in any sort of custom functionality we might want to. I'm going to set an initial state with a count of zero. I'm going to create a custom method called "IncrementCount."

Here, we're just going to go ahead and update the state.count to plus one. Down here, on the button, we're going to output our state.count right here, next to our props.txt. We're going to call our increment method on the click of the button so onClick equals this.incrementCount. Let's go ahead and try that out.

Cool. We now have that functionality there, in our Button. Here, in our Label, let's say we're going to tap into that function in the componentWillMount phase. We technically are merging the mixins componentWillMount with our component componentWillMount.

I'm going to set an interval here to call this.incrementCount. We'll do that every second. We'll go ahead and output that the same as we did in the Button.

Load that up. We can see that the Label is incrementing in the set interval. The Button is updating that value in the un-click. Both of them have inherited the same functionality. We're able to use it as we see fit.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?