React with-addons - ReactLink
It can be tedious to type out all the boilerplate needed to get the DOM and states in React to synchronize. Luckily, React provides a version of the toolkit with a selection of available addons. This lesson is going to dig into ReactLink, and how this addon can give you two-way binding.
Man: [00:00] Hi guys. In this video, we are going to talk about React Link, which is a part of the React With Addons version of the React library.
[00:07] Here on the page we've got a really quick application, that renders out a form with two input fields, one representing name, another one representing email, and then a label after each one of those. I'm just trying to output that from my state. I want to tie each of these fields to my state which has a name and an email key.
[00:25] First, I'm going to do this the way that we've been doing things, so I'm going to give it a ref unchanged equals. Let's save this to update. We'll create that method.
[00:38] Then on this one I'll do ref equals email. Let's create our update really quick. Here we'll just save this to upset state, and we'll use our refs, so name is this.refs.name.get DOM node.value.
[00:54] We'll do the same thing for the email, email and email. That should work. We'll try that out really quick. Whoops, no. I messed something up. I forgot a comma there, reload. So name, email. That works.
[01:16] The problem here is if this is a much more complicated form, this is going to be a lot of typing. That's what React Link is going to take care of for us.
[01:27] The first thing we're going to do is we're going to change out our version of the library. We're going to keep the version number, but we're going to say with add-ons- version number. Then, in our app, we're going to add in a mix-in, and that is going to be React add-ons linked state mix-in.
[01:47] What's really cool is we don't need this update method anymore. That's nice, a lot less typing, and we don't need this ref, and we don't need this unchanged. Get rid of that for both of these.
[02:00] The way we can tie this in is value link equals, and then we're going to interpret this.link state, and we just pass in the key that we want to tie our DOM value to in our state. This one will be email. Let's load that up, name, email.
[02:22] It feels a lot like two-way binding. I think they call it two-way binding helper. It's a way to very quickly tie a DOM value to your state without a lot of typing, so it saves me a bunch of time.
[02:35] Here, I'm just going to create one more. I'm going to call it phone. Then I'll just add that to my state. Try that out, name, email, phone.
[02:51] There you go. That is a quick look at React Link. It's going to save you a lot of typing.
As said on https://egghead.io/lessons/react-react-mixins-with-es6-components
Right now (December 29, 2015), React does not support mixins when using React ES6 classes.
"No Mixins Unfortunately ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes. Instead, we're working on making it easier to support such use cases without resorting to mixins."
https://facebook.github.io/react/docs/reusable-components.html
Right now (December 29, 2015), React does not support mixins when using React ES6 classes.
"No Mixins Unfortunately ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes. Instead, we're working on making it easier to support such use cases without resorting to mixins."
https://facebook.github.io/react/docs/reusable-components.html