Check out a free preview of the full Advanced React Patterns course:
The "Toggle Component & Exercise" Lesson is part of the full, Advanced React Patterns course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, students create a toggle component. Kent answers a question from a student about tests running in code sandbox.

Get Unlimited Access Now

Transcript from the "Toggle Component & Exercise" Lesson

[00:00:00]
>> Kent: Cool, well let's go ahead and we'll jump in to this first exercise. So if you run, so I would suggest that you do run the app, MPM, run, start. So you can pull up exercise one, and you can just edit the URL, it will be 01, and it will take you to the exercise page.

[00:00:18] If you look at the final version, you've got handy dandy toggle button, and that's what you're supposed to build in the exercise. So this first one is actually just building a react component just to warm up our brains for building stuff. We warmed up our bodies with air squats, we'll probably do that again this afternoon, by the way.

[00:00:36] But gotta warm up your brain, so there´s no actual patterns that we´ll being on this first one, but yeah, you job is just to build this. So go to the test and swap out the usage from final, or the usage from exercise one. I also failed to mention, you shouldn't have to change anything else about the test.

[00:00:57] This should be the only thing you need to change. And then run the test npm t.
>> Kent: And I'll hit P 01 just to be sure we're only running that one test. And then open up the exercises. And something that I failed to mention, I should have, is this is Cody, say hi to Cody.

[00:01:24] Hi Cody. Cody the koala bear, and he is going to tell you when you actually need to do something. So sometimes there will be just commentary in the comments. I guess that's what comments are, or commentary, right. But at several points in the comments there like, okay, now you need to do this thing.

[00:01:44] So Cody will be there when you need to do something specific. There's also Marty, the money bag, and Marty will be there to give you tips, so when you see Marty. There's also, I didn't give this a name but the 100 symbol, what should that be called? I don't know, think of something to me later.

[00:02:08] But that will be when there's a bonus thing that you could implement.
>> Kent: Okay, so yeah, that's pretty much it for this. I'm going to give you about five minutes, well, we'll do ten minutes for this first exercise. And then I'll come in and we'll do this solution and move on.

[00:02:27] Anybody have any questions?
>> Kent: All right, fire away. Yes? I did have one question on mine, it says how do we? Yeah, somebody's asking me about running testing code sandbox, good question. So I'll pop open the code sandbox, should have demoed this earlier. So at the bottom here there's this test tab, you pop that open and they're actually running for you automatically.

[00:02:53] So as you make changes, you can also click on a specific file to rerun those tests. You can toggle file watching, but I don't know why you wouldn't wanna just keep it going all the time. So yeah, it's pretty cool, right? Code sandbox is the coolest thing ever.

[00:03:13] So, yeah, that's how you do it. It will show you errors right here.