Kent C. Dodds: 0:00 I am so excited for this one. All of those workshops that you've been through in learning all of these concepts in total isolation, it's been beautiful. It's pretty little garden that is well kept in everything, but then you go to a real application and nothing is that way. Everything is complicated.

0:24 Real applications are not perfectly manicured. Real applications have complexity and they have some nuance to them that makes things a little bit more challenging. That's why I love that I have built this bookshelf app for you so that you can apply these things that you've been learning in a real application.

0:45 I'm excited. Let's jump in. Here is our bookshelf app. It's kentcdodds/bookshelf on GitHub. Lots of it is the same in the way that you get it set up. We still have the same requirements. We have the setup script that you run, but things are a little bit different.

1:02 For one, it does not ask for your email because the way that things are structured is quite a bit different. You'll notice this is a real app. We've got the src directory. We've got our index.js. We've got different screens. We have components.

1:17 I didn't want to mockup everything in the application with a bunch of exercise files and stuff. The way that this one works is we have a different branch for every part of the app that we're going to build. Here, let's go ahead and get on to the different branches.

1:35 You can run git checkout to check out the different branches, but I built something for you to make it a lot easier for you to get going with each one of these branches. Instead of checking out different branches and things, what you're going to do is you'll run node go.

1:52 Go is a script right here. You can dive into it if you're interested. What node go does is it says, "Hey, which exercise do you want to start working on?" Then, you can just navigate with your keyboard, your up and down arrows.

2:06 Here, we'll say, "OK, I want to work on that first exercise," so it will go to bootstrap and it checks out the branch and it gets everything set up for you so that you can start working on this exercise.

2:16 The way that things are structured here is also quite a bit different. We don't have an exercise directory and a final directory and a markdown file for things. We have a single markdown file that is updated for every one of these exercises, and it's an INSTRUCTIONS.md file.

2:35 Here, we're learning about rendering a React app. Every single time you go to a new exercise, you're going to want to open the instructions, because this is where it's going to have the background. It will have information on the exercise, and it will also, inside of that information it will tell you the files that you're going to working in, which is important. I'll show you here in just a second.

2:54 We also do have extra credit in here and it will tell you the files that are relevant for the extra credit. Toward the bottom, you have your elaboration feedback.

3:05 You are going to be working in the markdown file directory. There's nothing that renders that markdown file for you. You want to open up that markdown file. After you have read everything, you're ready to rock and roll, then you want to make sure that you start the server, so we have it going.

3:22 Sometimes you may actually have to restart the server, because Webpack is, "Whoa, whoa, where did these files come from?" Sometimes you may have to restart the server and...Sorry about that. There's not much we can do, but once, you're ready to rock and roll.

3:35 Then if you open up this src/index.js, I'll just paste that in there, you'll notice that there is something weird going on here where it has a couple of commented out things here. If you run the node go script, then it updates this file for you to say, export * from './index.exercise'.

3:56 Let's look at our file system and we'll see that we have the index.js, which is what we're looking at. Then an index.exercise.js, an index.final, and then index.extra1 and 2. This is the way that we structure things in this one. You'll find the final version of what you're supposed to do in the .final and then those extra credits there as well.

4:18 Everything is a .exercise.final throughout the workshop. For this one, we have one file that we're working in. In other exercises, you're going to have many files that you're going to be working in.

4:33 This is what makes this more realistic, because normally, you're not just making a change in a single file and then the world is your oyster. Normally, what ends up happening is you have to change in this file and then in this file.

4:48 Our instructions are going to show you exactly which file you're going to be working in. Then our friend Cody the Koala bear we'll be here to tell you what you're supposed to do. If you do get totally lost, then you can go to your index file and everything should work just fine.

5:04 That's the unique thing about this exercise, just to make it practical, so that it's like, "This is a real thing," but also, you can actually use it. You're pretty much going to be working in the index.exercise or in the .exercise version of all of the files, even for all of the extra credits. That's one thing that you want to keep in mind.

5:27 Another thing that you'll want to keep in mind is that this is a much huger, larger workshop than any of the others. In fact, when I give this workshop as a live workshop, I split it up into four parts. You can interleave this workshop into the other ones if you want to, however you want to structure that, but this one workshop should take you a very long time.

5:54 In addition, it's also intentionally a little ambiguous because I want you to struggle with this a little bit more, because it's a more real-world scenario. Keep that in mind as well. There's a lot more for you to do and some guesswork that you need to do.

6:09 I don't want you to bang your head against a wall trying to transform it into a door or anything, but I do want you to struggle just maybe a little bit as you go through all of these. It's way less handholding. There is way more material in each of these exercises.

6:27 I hope you look forward to that. It makes for a nice way to round things off from the totally isolated exercises that you've been doing in the other workshops and giving you a more realistic real-world experience in this actual application.

6:47 Enjoy this one. You're going to have a blast. If you get totally stuck, feel free to reach out to other folks in the Discord because you might need that and we're all here to help each other. Have fun, and I'll see you all the way on the other side of this workshop.