Starting with React 0.13.0 you can write components using ES6 classes.  In this lesson we'll walk through some of the syntax differences.

https://app.egghead.io/api/v1/lessons/react-react-components-in-es6-classes/subtitles

React components in ES6 classes

[00:01] Beginning with React version 013, we now have the option of creating our components using ES6 classes. To get us started with that, we're going to use ES6's import syntax to import React from our React package.

[00:15] Now, to create our first component, we're going to use the ES6 syntax, which is, class followed by our component's name, extend react.component.

[00:24] We've got a very familiar render method here, I'm going to output a button, with an inner HTML of "Hello." I'm going to output our app component to the document.body, and you can see, we have our Hello button.

[00:37] We also have access to all these standard life cycle phases. I'm going to use, "component will mount" here, and I'm just going to output, "will mount." I'll jump down past render and we'll do a component "did mount." We'll just cancel "log mounted." Going to load that up in the browser and we can see we've got. will mount, and mounted, here in the console.

[01:02] Now, where the components do begin to differ is with things like default props, which are now just properties of the class itself. Here I'm saying app.default.props, text is equal to default props text. We'll go ahead and drop that into our component here, rather than outputting this hard coded hello, it'll say, this.props.text. Load that up in the browser and we can see we've got our button.

[01:28] Now the same applies for something like prop types. We're going to assign prop types to text and we'll make this a number, just so that we see that warning message in the console. Load that up and here we've got our warning, where app expected a number rather than a string.

[01:46] Of course, we can also pass in our props just like we always have right here into the component directly. I'll set this to "Hello, world." We can see we've got our "Hello, world" there in the browser.

[01:57] Now where things really start to differ is with something like, state. I'm going to set a constructor method here, and I'm going to attempt to just say, this.state equals, and I'm going to set a variable called count to zero. Now, this isn't actually going to work, but before I fix it, I'm going to go ahead and try to output that here inside of our button, so I'm going to say this.state.count, load that up.

[02:18] In fact, what's happening here is our build has broken. What we need to do inside the constructor is called, super. This is going to set our context for this. Now, we've got our "Hello, world," and we've got our zero there.

[02:31] Now, the same type of issue applies to any custom functionality, so I'm going to create a custom function here called, increment. That's simply going to set our state's count to plus one. This.state.count plus one.

[02:46] We'll go ahead and try that out, let me create a non-click here to this.increment.

[02:55] All right, so we'll try that out when we click, nothing's happening. We're actually getting an error that the property set state of undefined, can't be found. That's because react.create class actually autobinds all those methods for us.

[03:10] In ESX, we need to autobind or we need to bind them ourselves, so I'm just going to say, this .increment equals this.increment.bind to this. Going to load that up in a browser, click on that guy and everything is working fine.

[03:25] That is a quick look at creating components with ES6 classes.

React components in ES6 classes

Share this video with your friends