Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Basic Component State Exercise" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Build a simple react counter component using component state.

Get Unlimited Access Now

Transcript from the "Basic Component State Exercise" Lesson

[00:00:02]
>> Steve Kinney: Okay, so we've now set the context of talking about state, that was fun, wasn't it? We had this heady intellectual discussion at nine in the morning. Now we're going to move into the second phase, which is what I like to call An Uncomfortably Close Look at React Component State.

[00:00:22] Right you're like I signed up for redox! I'm like yes, we're starting with reaction component state, and we're gonna look at it and kind of like figure out, cuz a lot of the patterns that we use in react redox. Or with any sl libraries, you can implement with regular reaction components right?

[00:00:38] And maybe sometimes you should, alright. So we're going to look at it, in the simplest possible case. And then begin to keep stepping back, and looking at it from a wider and wider view. So we're going to start with the world's simplest React component. And, in the theme of building our own light sabre, we're all going to do it individually.

[00:01:00] So that when I get into that fun quiz time, you can validate whether the things I'm saying are actually true or not. They are, but you should definitely use science and be able to validate those things, rather than taking my word for it. Alright, so here's our first exercise.

[00:01:19] This'll be a really quick one. There's it's called basic-counter, and right now if you're on the master branch, it doesn't really do much. It doesn't have any say, it's just a component that renders zero and a bunch of buttons that are completely no ops. Right, they are just anonymous functions that eventually just don't return anything or do anything.

[00:01:42] So we're going to start out by getting that working. I'll show you the code in one second. There's a bunch of other files in there because I have a lesson plan and there's a plan to what we're doing. But, the one you need to concern yourself with right now is simply the one that is the counter-component.

[00:01:59] So let's actually take a look at it.
>> Steve Kinney: Pull it over, [SOUND] Cool.
>> Steve Kinney: So let's actually pull up basic counter.
>> Steve Kinney: Here it is. It's really great. It has a count that is always set to zero. That's phenomenal. It doesn't do the thing. If you hit any of the buttons they are just functions that don't do anything.

[00:02:33] Our job is to get this wired up so that it starts with a count. Starting with zero perhaps but if you want to start at five, this is your day, you do what you want. And then, when they hit the button, we'll increment by one, unless you wanna increment by a different number.

[00:02:48] This again, I'm not gonna tell you what to do. I gave you an exercise, you're allowed to do whatever you want. We wanna get this thing working cuz what we're gonna do is we're gonna take this very kinda simple, isolated example. And then we're gonna look in, when we get to part three, a bunch of different patterns for separating out our view from the management of the state.

[00:03:07] So we'll start out by doing the simplest encapsulated version, and we'll get that working. And then we will begin to like play with it, and tease it out a little bit with another example as well.