Mixins will allow you to apply behaviors to multiple React components.
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.
https://github.com/joemaddalone/ReactSublimeSnippets
For ST3 you only need "ReactSnippets.sublime-package", for ST2 you need the entire "snippets" directory.
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.
Good find! got stuck on this for a while until I read your comment. thanks!
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.
Aren't mixins effectively deprecated? https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
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
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!