Hey, guys. In this video, we are going to take a look at some of the changes in React version 012. Here, on the page, we've got a really simple application. It's not doing much.
First, we're rendering this component APP, which in turn renders this Title component, passes in a className of red. In that Title component, we're taking that className. We're using this.transferPropsTo in order to pass that into this h1.
Let's go ahead and load that up in the browser. Everything seems to be working just fine, but we're getting these weird messages. We're getting the one about the JSX in-browser transformer. That's fine, but here, we've got "React.renderComponent will be deprecated in a future version. Use React.render instead."
Let's go ahead and implement that. Get rid of component there. Everything's looking good, but now we've got "transferPropsTo is deprecated." Without going to the website, we're going to work around that. We're going to get rid of transferPropsTo.
Right here, what we're going to use is the JSX spread operator. It works just like this. this.props. JSX spread operator works just like the ES6 spread operator. We're just passing in all those values. It's going to get broken out into an array. Yada, yada, yada. It's going to work. Load that up, and everything's looking good.
One other thing. We're not getting a message about this, but we don't need the JSX pragma anymore. We load that up. Everything's working just fine without that JSX pragma.
Let's take a look at some of the changes that we're going to apply to using React.DOM without the JSX transformer. We'll load that up, and everything's working fine. Everything, at this point, is backwards compatible. Skipping around here, we can see React.renderComponent is going to be deprecated, so let's get rid of that. Load this up.
Now it says, "Something is calling a React component directly. Use a factory or JSX instead." We're not going to use JSX here. Therefore, we have to use a factory. The way we do that is React.createFactory. We wrap our component in that. That's going to return our component function.
Actually, I shouldn't be calling them "components." Everything in React used to be a component. Now it's called an "element." There you go. Let's load that up really quick.
Right now, before we load it up, we've got one, two messages about calling a React component directly. Let's load that up. Now we've only got one. It's saying that "APP is calling a React component directly." That's going to be right here.
Do it just like that. We're still going to pass in our props right there. Let's load this up. Now we're back to "transferPropsTo is deprecated." In straight React.DOM, we don't really have access to the spread operator the way that we might want to, unless we were transpiling from ES6 to ES5.
The only way we can really deal with this...There actually is a way to deal with it with Object.assign, but at this very moment, Object.assign is not very well-supported. The way we're going to do it is just say, "this.props.id="message"."
Here, we're just going to pass in this.props. Load that up, and everything is working fine. We have no error or warning messages. There you go. That's a quick look at React version 012.