Kent C. Dodds: 0:00 I thought it would be useful to show you the process that I would recommend going through as you hit each individual exercise. We're going to start with the styling exercise in React Fundamentals.

0:10 What I recommend you do is you first run the intro video just so I can introduce the problem and the exercise to you. I go through some of the background in here, but I recommend that you read that yourself. Please do read through that.

0:26 We're going to come over here and I actually do have the app up and running. I'll go to localhost:3000. We'll pop open the styling exercise and then you'll read through all of this information. Maybe click on some of these links to some documentation, whatever else that you need to get an idea of what's possible here.

0:45 Read through the exercise, so you get an idea of what our actual purpose is here. I'm going to suggest that you open the exercise on an isolated page. We'll pull that out. I'm going to stick it side-by-side with my code editor right here. We're going to make this big screen, and we'll make this big screen, stick those side-by-side.

1:09 Here, we'll move this right next to my video here. We'll just drag this, if I can get that to work right there, there we go. I'll drag that over. Now I'll open up 05.js, I'm also going to open up 05 in the test and switch from final to exercise. I'll open up my terminal right here and run npm t to get the test up and running.

1:36 I can use this if I want to. I'll just hide that for now. Hopefully, you have a little bit more real estate on your screen for that workflow. Then we're going to be making all of our changes in this file. We'll see those changes reflected on the right side. I also recommend that you have the DevTools open. I'm going to put those at the bottom.

2:01 We'll want maybe the elements tab with our console right here as well. That should give you a pretty good view into everything that's happening in the browser as you're running through this stuff. We're going to have the video on this side. We watched that intro. Before we watch the solution, then you want to work through this problem.

2:22 We'll come over here. We'll read what Marty and Cody the koala bear want us to do. We'll work through it as much as we can, we'll say, "OK, Cody says we need to add a class name prop." We'll pass a box right there. We'll save that. We'll see that this gets updated, awesome.

2:39 If we look at the DOM right here, we'll see there's the box and then we also need a box--small. Awesome. You can also look at the imports and see we've got a CSS file that...That didn't go to that definition. We've got a CSS file that we want to have open. We'll go to boxStyles.

3:00 Here are all the styles that we have. We're ready to rock and roll, finish up this exercise. Once you're finished or once you've decided, "OK, I'm done," you can choose your own adventure. You can either continue on to our extra credits that you have here and just work through, blaze through all of these extra credits.

3:21 By the way, there is no starting point from the extra credits and the extra credits are also way less hand holding. That's actually intentional. The extra credits are just like, "Hey, what about this additional problem? Maybe there's another thing that we want to deal with here?"

3:37 See if you can figure that out. It's intentionally a little hand holding and hopefully, that's not too frustrating for you, but I think that it's a good experience for you to really struggle with this stuff.

3:48 Learning is hard. You can either work through that extra credit on your own, or you can watch the solution, and then maybe you finish up your solution, or you decide, "Oh, I'm just going to throw it all away and we'll come over to the final. I'll grab this, copy that, and paste it in there."

4:08 Now, your solution looks just like mine and then you can continue on to the extra credit. You have an option there and you can do extra credit 1, then watch the video, extra credit 2, then watch the video, or you can do exercise, and then all the extra credits, and then watch all the videos. It's up to you, however you learn best.

4:25 With all of that said, there are a couple other things that I just want to make note of. Please do make sure you read all of the notes. You might have to Google things and that's actually expected. Hopefully, the idea is we land you into the job and now it's your job to figure these problems out. That's the experience that we're trying to give to you.

4:49 Then also, this just popped up. Actually, I wanted to explain this as well. You'll notice that pumped up from this gear or these tools right here at the very bottom. These are our DevTools and we have these in all of the workshops. You can click on that to have it persist, or unclick to make it go away.

5:06 The DevTools give you a couple of things that you can do. They're not really relevant for lots of the exercises, but any of the exercises that are working with HTTP calls and things. You can actually change how long those HTTP calls take, they can have a variable amount of time, and you can control that variable amount of time.

5:27 You can also simulate request failures here, where you say, "Hey, I want my GET request to /api/listitem/listitemid. I want those to fail." We're going to add that. Now, the next time that we make a GET request to that URL, then that request is going to fail.

5:45 That can be useful to you in some of the exercises. If you want to see, "OK. How do I make sure that this error boundary happens when there's a request failure, for example?" That's the workshop DevTools that you have that can be useful as you're working through some of these exercises as well.

6:03 Another thing I'm going to recommend, in general, is make sure to take breaks as you're working through this stuff. Don't sit down and expect you can go through all this material. Each one of these workshops is at least four hours of just workshop time when I give it live.

6:20 I take breaks periodically as I'm giving that. I strongly recommend that you take breaks as well. Do an exercise, work through that workshop material, and take a quick little break. If you need a tip, then here's something that might help as you go through this.

6:38 When I give my live workshops, I go to icanhazdadjoke.com. This will show you a random dad joke. They're bad puns. Maybe it's not for you. [laughs] Oh, my gosh. These are hilarious. I enjoy these. When I'm working through the live workshops, I show these to the attendees.

7:01 If you want that workshop experience, then icanhazdadjoke is for you. Go take a look at those. [laughs] They're so funny. Once we've finished all of our extra credits, and we're ready to move on to the next exercise...

7:14 Before you move on, I want you to scroll down here to the very bottom. This is where you can click on this link. That will take you to the elaboration and feedback form. This will be prefilled with some of the information. You'll notice that your email address should be prefilled here as well.

7:31 That is why we got your email address for. We automatically added that email address to the link for all of the exercises, so you don't have to fill this out every single time. Here's the important piece. This is why I want you to fill this out. It's the elaborate on what you learned.

7:49 There are a lot of things with the way that I structure this workshop to ensure that this sticks for you. That you remember this. Elaborate on what you learned is one of those things, and it's an important one.

8:03 I want you to rank down some of the core concepts. Pretend that you're writing a mini blog post about the thing that you just learned. In fact, if you want to write an actual blog post about that, that'd be awesome.

8:15 Feel free to reference this material, and be like, "Hey, there's that material on Epic React. I've learned this thing, and it was awesome." Totally welcome to do that. If you don't want to make a full-on blog post, at least write down what you learned. It will help you remember what you learned.

8:33 Then, as a favor to me, you can provide, also, some ratings on how effective the exercise and the video instruction was for you, and give me some general comments about the exercise. I do look at these and use these to make the workshop better. I do appreciate that. What's super important about this is for you to elaborate on what you learned.

8:57 Now, you go through every single one of these exercises. Once you finish, you get to the very end, then there's one last thing that I want to invite you to do. That is, in the repository right down here toward the bottom, you'll see we have this workshop feedback. There's a link to a form where you can provide your feedback on the whole workshop.

9:19 This is 100 percent a favor to me. You don't have to this at all. It's not going to improve your learning necessarily or anything, but it is nice. I appreciate it. If you want to reach out to me on Twitter and say, "Hey, Kent, I just finished this workshop. That's exciting." I'll totally welcome that. I'll celebrate it with you. Super happy to do that.

9:37 Please do fill this out and give me some feedback on how we can make these workshops better in the future. With that, that's all that we got to do. Once you've finished with that, then you're done. You can move on to the next workshop. You do the whole setup in clone and all the stuff. You're ready to rock and roll.

9:55 I hope that is helpful to you. Have an awesome time working through this material. We'll see you around epicreact.dev.