Introducing JSX Counter 0:00Imagine if JavaScript was this easy to write. Within my script tag here, I'm going to create a new class. Maybe we want something as simple as a counter. So I will create a class, and don't worry, I'm going to move pretty fast, but that's only for this teaser opening lesson. In follow-up videos, we'll hit the brakes, roll back, and talk about every step. All right, so if we are building a counter, we'll take a look at this. I can write something very similar to HTML right in my JavaScript, and then ultimately, that would compile down to something like method calls. Okay, so with that in mind, within a div, well, maybe we want an h1 with the counter,and then ultimately, that would compile down to something like method calls. Okay, so with that in mind, within a div, well, maybe we want an h1 with the counter, and then specifically, I want to echo out the number of times the button was incremented or decremented. Let's go ahead and view this in the browser. There we go. And what I'll do is I'll move this to the right and my editor to the left. Okay, so if I want the count, well, I can access the current state of my component, which we've called counter. This state count. Setting Initial State 0:58which we've called counter. This state count. But now if I save that, and why don't we go ahead and turn on live reload, so that the page refreshes whenever I save. Now you'll see that disappear. If we take a look, it's because it can't read a property count of null. We don't have any state set up yet. So let's define the initial state for our component, and I want the count to, of course, be zero. Okay, so next we need some kind of button, Handling Increment Click 1:20and I want the count to, of course, be zero. Okay, so next we need some kind of button, and we'll say when you click on that button, we will increment the counter. So how about plus one? And take a look at this. I attach my events in a very HTML-readable-like way. Even though ultimately, JSX can compile down to regular JavaScript, this feels a lot more familiar, doesn't it? So we'll say when the button is clicked, let's call a method called increment. All right, let's create that.So we'll say when the button is clicked, let's call a method called increment. All right, let's create that. Increment. And now I'm going to update our current state for the count. We do that via a method called set state. So I can say the count equals count plus one. So if I save that and we try this out, notice that the DOM updates automatically. And this is something that React handles for us in a very brilliant way. It doesn't reload the DOM every time we press this button. Instead, it uses what we would call a virtual DOM. Explaining Virtual DOM 2:14It doesn't reload the DOM every time we press this button. Instead, it uses what we would call a virtual DOM. And we'll talk about this more in future videos. But mostly, it creates this virtual DOM and compares it against the original one and figures out what is different. Then once it does, it can update the DOM in as few iterations, so to speak, as possible. And this makes React very fast. Okay, so increment works great. Maybe you want your decrement one as well. So that will be minus one. Adding Decrement Button 2:41Maybe you want your decrement one as well. So that will be minus one. And when we click on it, we will call a decrement method. All right, decrement. And this is mostly going to be the same. The only difference is we will, of course, subtract one. All right, so if I save it, we can update our counter or we can reduce it. And we didn't even really have to think about this stuff. But now notice that we can go to negative, which might be fine. But maybe we want to say, well, it does need to be a positive number. Preventing Negative Counts 3:06But now notice that we can go to negative, which might be fine. But maybe we want to say, well, it does need to be a positive number. There's actually some validation tricks we can use. But at least to start, why don't we just use regular JavaScript here? And this is one nice thing about not having separate templates and things like that. Because it's all connected here, we get our HTML so we can easily refer to it. But we still have the power of JavaScript to update and set requirements and validation and things like that. So if I save, our count is the current count. But they did hit decrement, so we should reduce it by one.So if I save, our count is the current count. But they did hit decrement, so we should reduce it by one. Well, we can just say, if count is less than zero, or if it's not a positive number, whatever, we can update the count to zero. You can't go below zero. And then we can just update this. Now in ECMAScript 6, eventually, you'll just be able to do something like this. It's a shorthand for the notation. But for now, we'll just tack it on the normal way. And if we try this out, bring it down, we shouldn't be able to go below zero.But for now, we'll just tack it on the normal way. And if we try this out, bring it down, we shouldn't be able to go below zero. And we can't. So if you're anything like me, well, React just sort of feels right. It feels a little bit more natural. This might initially be off-putting everything we were taught about, you don't mix your JavaScript and your HTML. But remember, this specifically isn't HTML. It's sort of like a description that the compiler, JSX, eventually reduces to regular method calls.It's sort of like a description that the compiler, JSX, eventually reduces to regular method calls. This just makes it easier for us to take in, and a little more natural in my mind. So we create a component. We render it, attach any event handlers and anything like that. And then ultimately, we attach it to the DOM. And notice how we render it. Once again, it sort of feels like we're creating these little HTML components. If I'm trying to render a counter on the page, well, notice just how readable that is. Okay, so lots of interesting ideas here.If I'm trying to render a counter on the page, well, notice just how readable that is. Okay, so lots of interesting ideas here. If I've piqued your interest, well, let's move on to the next episode, where we hit the brakes, we roll back, and we talk about all of this stuff from scratch.
