Instructor: [00:00] Let's extend this app component to do a little bit more, so that we can test adding additional syntax support through Babel. I'm going to come down here. The first thing I'm going to do is give this some state. I'm going to set that to equal an object with a count of zero.
[00:31] I'm going to come down here, and let's finish building out our counter. I'm going to wrap this in some parens, and throw a div in here. I'm going to leave the h1 in place, then we'll add our counter behavior below that.
[00:46] I'm going to throw an h2 in here, the count, and we'll do this.state.count. Then I'm just going to add a button. I'll give it an onClick. I'm just going to do this all online, because this is sample code, just to demonstrate that we can support the syntax.
[01:10] this.setState, and it's going to depend on the previous state. We'll pass in a function here. We'll return an object with count set to state.count plus one. Then in that button, we'll put a plus sign. Then we'll create a second one.
[01:34] This is just going to be, we'll do state.count minus one. That second button will be a minus sign. We can save this, and then we're going to do an npm run dev. webpack-dev-server will automatically open our browser for us.
[01:59] We're not going to see our app. If we switch back, we're going to see that there was an error compiling this, because it doesn't like the syntax. Babel doesn't know how to handle this by default. In the terminal, let's Control+C to quit that process.
[02:42] It'll install this Babel plugin proposal class properties NPM package, and then I can go into my webpack config. This'll go in our base config, because we want to do this regardless of whether we're building for development or production.
[02:58] Down in our Babel options, after presets, we're going to add another key for plugins. This is another array, and we're going to put our Babel plugin proposal class properties right in there. We can save that, and then back in our terminal, we can run npm run dev.
[03:24] This time, our app loads up, and everything's working just the way we expected it to. If we look back, we have a successful build. All we had to do to support this proposed syntax is add the appropriate plugin to Babel.