jQuery Counter Setup 0:00Let's return to that idea of a counter that we brushed over in episode 1. Imagine that we weren't using React. We were just using the typical jQuery. Okay, well how would we manage that? Let's review that process very quickly, and then we'll talk about some of the downsides to it, and how React makes it much easier. And as an aside, this will give us an opportunity to talk a bit more about state. All right, so imagine, well, we had this h1, right, a counter. And now, well, maybe we have some kind of span with an id of count. Okay, you've probably seen stuff like this before. And we will quote-unquote initialize it to zero. Okay, well then we have two buttons here, and this one will have an id of add, like so.And we will quote-unquote initialize it to zero. Okay, well then we have two buttons here, and this one will have an id of add, like so. And then we'll do one more to subtract, like so. So pretty basic stuff, right? And I will put that ahead. All right, so let's take a look at this in the browser. And if we switch over, simple stuff, right? Okay, so now we want to listen for when this button is pressed, and when it is, we should update the count. So here's the immediate issue that we often run into. Well, we want to find the button, so we need one query. DOM as State Problem 1:08So here's the immediate issue that we often run into. Well, we want to find the button, so we need one query. We'll say add, and when that button is clicked, we will trigger this callback here. And now I want to update this value. And the problem is, I have no real source of truth here. The source of truth is just an element in the DOM. I don't have that located anywhere else. Okay, so that means, and by the way, I can get rid of that type. Anyways, that means, well, I have to hunt it down. So var count equals count, and we will grab its text.Anyways, that means, well, I have to hunt it down. So var count equals count, and we will grab its text. But now that's going to return like the string version of zero, when I want the number. So I will parse into that. Okay, so now count is equal to zero. This means I can update its value by one, and then once again, update the DOM. Now, if we're going to reference this once again, we should probably cache this query, right? So why don't we say var counter equals that,we should probably cache this query, right? So why don't we say var counter equals that, and then we can update this. All right, now I can say counter.text equals count plus one. So let's switch over to Chrome. And if we try it out, sure enough, that's working. So our immediate reaction is, wow, this is just so easy, right? It took three or four lines of code, and you're done. I don't need to create anything like a component, and I don't need a JavaScript framework.I don't need to create anything like a component, and I don't need a JavaScript framework. But don't forget, that just handled the add button. We need another one. So we will duplicate this. And now we'll have subtract. And when that's clicked, well, once again, I don't have any source of truth. All of my truth is contained within this DOM node. So think of it this way. With this approach, we are constantly and desperately trying to hold on to state.So think of it this way. With this approach, we are constantly and desperately trying to hold on to state. I'm trying to maintain this state here, but I'm not storing it anywhere other than the HTML. So every time I want to change it, well, we have to dive into the DOM. We have to fetch it. We have to parse it. And only then can we make some revision. So in this case, we will subtract one. And now we can see, well, we have a lot of duplication here.So in this case, we will subtract one. And now we can see, well, we have a lot of duplication here. And we could extract a function or something, but I guess it's not a big deal. So if we try that, yeah, all of this works. So the issue is this can be deceptively simple. It's so easy to use. If you're not careful, you find yourself in this situation where, well, think about it. For this little component or this little counter, we already have all of this code here. And what a lot of people end up doing is they create an application.js file, and they just litter it with all of these various queries. Scaling and Maintainability Issues 3:49And what a lot of people end up doing is they create an application.js file, and they just litter it with all of these various queries. I've done it myself. So before you know it, you have like an application.js file that's sort of like this. It's really hard to manage. It's really hard to filter and find what you want. You just see all of these various queries that are referencing elements. And then further, well, it's hard to remember six months from now what that element looked like. So if I have foo or something that I'm manipulating, well, I would need to open up the view or the HTML fileSo if I have foo or something that I'm manipulating, well, I would need to open up the view or the HTML file to refresh my memory as to what foo is and what foo houses or contains. All of this stuff has the potential to slow you down drastically. So that's what I mean when I say it's deceptive. This is so easy to write. But as you accumulate more and more calls and queries, things start to become really, really brittle. So even though it takes a little bit more JavaScript, at least initially, we can use React and a simple component. Rebuilding Counter in React 4:49So even though it takes a little bit more JavaScript, at least initially, we can use React and a simple component. Let's rebuild that. So let's delete everything within here. And we won't need jQuery for this example. Though keep in mind, React is not a substitute for jQuery. If you want to make Ajax calls or something like that, you very likely will still pull in jQuery. Think of React as the V in MVC, the view layer. Okay, so now, well, we've already learned how to create a class for our counter.Think of React as the V in MVC, the view layer. Okay, so now, well, we've already learned how to create a class for our counter. This should be old news at this point. Next, remember how before we were desperately trying to hold on to the count, the state of that element? Well, now we don't have to worry about that. Why don't we grab all of this, and we're going to wrap it within a div. Because remember, we need one returned node here. So you can't return an h1 followed by a p followed by a div. You just return one parent node,So you can't return an h1 followed by a p followed by a div. You just return one parent node, which is why it's pretty common to return a single div. Okay, so think of this as our parent component. A parent component can own child components. That means if you really wanted to, you could create a component specifically for these buttons. But really, I don't think it's necessary in this case. So let's keep it simple. All right, now, I don't need to create this unnecessary span Using State and Events 6:10So let's keep it simple. All right, now, I don't need to create this unnecessary span simply to have a wrapper or some kind of hook to fetch the count. I can instead reference state. We want to use state whenever we have values or data that could be manipulated through a form or something like that. If the state of an element or component can change dependent upon user interaction, then we probably don't want to store it as a property or a prop. We want to store it as state like this.then we probably don't want to store it as a property or a prop. We want to store it as state like this. Now, we no longer need these IDs. Once again, those only existed to be hooks for jQuery. Instead, we can use the synthetic event system that React provides to add the events directly here. And this makes it that much more readable. So I can say on click, we will simply call this dot subtract. And then here, when it's clicked, this dot add. Okay, so let's add that one.And then here, when it's clicked, this dot add. Okay, so let's add that one. Add. And then one more for subtract. All right, so if we were to run this in the browser, though, it would fail. And that's because, well, we don't have any state that is specific to the count. Let's set a default here like we learned. Get initial state. And I'm going to say here the count will be zero by default. Cool.And I'm going to say here the count will be zero by default. Cool. So now when we add, we're no longer having to dive into the DOM to fetch the state. We are storing it ourselves. Or in other words, we have a single point of truth. We could say this set state. The count will be the current count plus one, right? So let's save that and do one more for subtract. This time, we will subtract one. All right, so let's take a look at this.This time, we will subtract one. All right, so let's take a look at this. Get rid of all of that HTML that we no longer require. We do want to make sure we set the type to text slash JSX. We create a counter class. The initial state will have a count property set to zero. We can see the behavior that this counter has. Before, it was really hard to figure that out, right? Because mostly we just had a bunch of DOM queries that we then attached event listeners to. With this approach, yes, there's more lines of code.Because mostly we just had a bunch of DOM queries that we then attached event listeners to. With this approach, yes, there's more lines of code. But think about it. Who cares? This is far easier to interpret and maintain 12 months from now. Finally, if we scroll down, we have our render method, where we simply have a couple buttons where we echo out the count. Finally, we render our counter component to the body. And then finally, we render our custom component to the body. So yeah, I think we're ready to try this out.And then finally, we render our custom component to the body. So yeah, I think we're ready to try this out. Let's pull in React and view this in Chrome. So we add one to the counter, or we can subtract one. We get the same functionality as before. But trust me, once again, this is going to be easier for you 12 months from now. You're no longer hunting through an application.js file to decipher all of these various DOM queries. Or you're no longer treating the DOM as your single point of truth, where you have to do a query to fetch some HTML.Or you're no longer treating the DOM as your single point of truth, where you have to do a query to fetch some HTML. You have to parse it, and only then can you manipulate it. Think about it. That sort of doesn't make sense, right? We should always be maintaining our state and our data ourselves. There's really no valid reason to do it otherwise. All right, so that does it for this video. But if you want a quick little bonus, here's something fun you might want to play with. If we add Harmony="true", once again, remember, this is only for development. Harmony Mode ES6 Features 9:44But if you want a quick little bonus, here's something fun you might want to play with. If we add Harmony="true", once again, remember, this is only for development. But if we enable Harmony mode, we can toy around with lots of fun ECMAScript 6 and experimental features. For example, well, we could use the shorthand syntax for objects. I could say var count equals this.state.count plus one. And then when we set our state, well, normally you would do this, right? When you have a variable. Instead, we can use a shorthand. Pretty cool.Instead, we can use a shorthand. Pretty cool. And the same is going to be true right here. Minus one. And then we can update this. And I think in this particular case, that's all we can take advantage of. But we can also use things like the shorthand function syntax, the arrow symbol, and tons of other cool stuff. So just to prove to you that this all still works, give it a refresh. There you go.So just to prove to you that this all still works, give it a refresh. There you go. But remember, you need to include this. So if I removed this and came back and refreshed, notice we're going to get lots of arrows because we haven't enabled harmony mode.