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

Kent walks through the setup of course exercises and how to run the tests for the exercises. - https://github.com/paypal/downshift - https://codesandbox.io/s/github/kentcdodds/advanced-react-patterns-v2

Get Unlimited Access Now

Transcript from the "Exercises Setup" Lesson

[00:00:00]
>> Kent C. Dodds: Okay, great. So I just wanted to show you this project first. Because this is where I learned most of these patterns, was in building downshift. How many people have heard of downshift before? Sweet. How many people have used downshift? Okay, well, maybe people online are raising their hand.

[00:00:21] That makes me feel good, thank you. Yeah, so downshift, it's a primitive component. It allows you to build highly accessible, very flexible autocomplete components. So let's see, I've got a example, here, we'll have to find the examples.
>> Kent C. Dodds: Yeah, so here's the simplest form of an autocomplete or a combo box component but with downshift.

[00:00:55] I say apple and I can highlight that, I can select it. So yeah, that's the basic idea behind downshift. But what makes it so nice is, I don't wanna compare this to other solutions. But just thinking in general about what we had to do before downshift, before flexible components like this is, you'd have to fill up the prompts with about a million different options.

[00:01:26] Because you'd have to say, okay, I wanna be able to render the menu above the input, not below it or beside it. Or I want to render a little icon inside the input like a flag or something like that. I want lots and lots of options. And then the documentation say here's the list of class names that you can use to style this stuff that I'm rendering for you.

[00:01:51] So that you can apply your own custom styling. And so that's what drove me to build downshift. Because I had several use cases that were different enough that it was just really complicated to have a single solution that would cater to all those used cases. And so I started building downshift.

[00:02:10] I actually started out building it as a collection of compound components that we'll learn about. And then I made one of those compound components be a render prompt component. And then I realize that I can actually just make the whole thing a render prompt. And just made a whole lot of complexity melt away.

[00:02:30] And so there are use cases for compound components. Very strong use cases for render props, also for higher order components. So all of these things that we're gonna be talking about are things that I've learned in practice building components like these. And it's not just for these highly reusable components either.

[00:02:49] These patterns that we're talking about can also be applied in your normal one use components as a good way to separate logic and your UI, the way something acts and the way something looks. So these patterns will help you with that. So I'm really excited about that. I'm really so grateful to PayPal for giving me the opportunity to build this and open source it so that I could learn all these patterns and share those with you.

[00:03:23] So check that out if you haven't. My slides are done. Next slide is a thank you. So from here on out, we are in the code. So if you go to your project that you have set up locally, or in CodeSandbox, let me just show you around really quick, and then we'll let you loose on the first exercise.

[00:03:48] Sound good? Okay, cool. So this is actually a standard create React application. It's mostly standard. It's actually using an alpha version of React scripts because I like living on the edge. I don't know, it works so I use it. But there are a couple scripts that we're gonna be using.

[00:04:12] Let's go ahead and start out with the start script, just to see what the app looks like. npm run start, or npm start. Actually npm start is a command, it allows you to start a package on npm. It's kinda fun. I've started a couple of those. Okay, so this is our app.

[00:04:31] You should have this pulled up. If it isn't working for you, then ask me during the exercise. We can work through that. But yeah, each one of the exercises has its own exercise page. And it has your Exercise and the Final Version. If you click on this link, then it'll take you to that exercise page.

[00:04:52] So you can preview the way things are looking as you are working through them. If you want to play around with it and see how things are working, you can also, the final version has the same thing. If you look at the URL, it should actually be pretty intuitive how to get to any given component page.

[00:05:14] Sometimes you'll come across a component like number six here, where you get a big error that blows up in your face. Here you can just click on the x, and you can still play around with the final version. And then you could go to the final version page.

[00:05:29] The reason that it's blowing up, that's totally intentional because you haven't done your job yet. So you need to fix the codes so that doesn't blow up. There was something else I was gonna mention about that. Yeah, on CodeSandbox, you can't actually click that x. That x doesn't work, so you'll have to click the refresh button and then navigate somewhere else.

[00:05:52] But yeah, that's pretty much all there is to the app. This should hopefully give you an idea of what's expected from how the component works at the end versus how the exercise, what you're suppose to do for the exercise. For example, on this one the reset button doesn't work, so you're supposed to make that work.

[00:06:14] Yeah, I totally forgot about this. When you see this, most of the time this works. You can click on this and it'll open your editor to that spot. Isn't that cool? Thanks, Dan, or whoever built that.
>> Group: [LAUGH]
>> Kent C. Dodds: I'm sure lots of contributers to that, but that is so awesome.

[00:06:34] Yeah, and I'm pretty sure that works in CodeSandbox too. Yeah, so for each one of the excercises, [COUGH] you'll have this usage example at the very bottom. This should be identical to the usage example on the final exercise. So you should not be changing anything in the usage.

[00:06:57] You should be able to get everything like all the test passing and the component actually usable without making any changes to the usage at the bottom. The usage will be useful to you to reference to see, okay, how am I supposed to implement an API like this? And so, yeah, definitely reference the usage example.

[00:07:17] And some of these get to be more complicated. Here I'll show you, whoops I keep clicking on the line of code.
>> Kent C. Dodds: So right here, well, rats. Look at the final version. So it's not that complicated, but yeah, there's a little bit more to the usage example. But in all cases, you shouldn't have to make any changes below the line that says you shouldn't have to change anything below this point.

[00:07:52] Okay, and then also here in the source code, you've got your exercises and exercises-final. I'll give you one guess which one you will be working in, exercises. The final version is the solution, and it is there is no shame in looking at the solution to reference it for something.

[00:08:14] If you get stuck for more than a minute or two, I recommend looking at the solutions so that you can keep progressing through the workshop. Otherwise, it will be a much more frustrating experience. Also, there are tests. So in another window of your terminal, you can round npm run test or npmt, for short.

[00:08:36] And that will start up in Jest in watch mode. If you're not familiar with Jest, you're about to fall in love. That’s all I can say. Also, if you’re not familiar with Jest, then I’m giving a workshop the next two days where you’ll get very familiar with Jest.

[00:08:53] So just actually read the output cuz it actually is useful. Don’t just gloss over it. We can run all the tests with A and that'll run through all of our tests. All of these are running against the exercises version. And so for each one of these exercises, if you want to use the test, which I think you probably do to verify that you've gotten things working properly, you'll go into the test for the exercise, it's same filename.

[00:09:22] And at the very top here, you have this input that's inputting from the exercises final. You just comment that out and comment in there exercises revision and then it will run the test. I recommend using this handy feature in Jest watch mode. If you click on w here, it'll show you your watch usage.

[00:09:43] And here it says press p to filter by filename regex pattern. So I hit p and I'm working on 01, so 01. And then that'll only run that one test, so that I'm not distracted by all the others. And then from there I can work through the examples.

[00:10:03]
>> Kent C. Dodds: So is that part making sense what you're supposed to do for the test? I do recommend you run the test while you're going. It'll be much better than the app. It'll validate things much better. And I've also worked on making it so that error messages can tell you hopefully a little bit of what you're missing in what you're doing.

[00:10:29] And then, like I said, at the end of each one of these tests, there's Elaboration & Feedback. I would actually ask that you don't fill this out until after I've gone through the solution and talked about talked about things. And then I'll take a quick break to fill out the elaboration and feedback, yeah, so you can reiterate what you've learned.

[00:10:54] On top of that, if I forget to go over this, somebody throw something at me so I remember, yeah, let's do that elaboration feedback. Cuz that literally is part of your learning experience. I don't want you to miss out on that.