Kent C. Dodds: 0:00 We've got the app up and running. Now we just want to take a little tour of what the application code looks like, what are you going to be working in. There are plenty of configuration files for some of the tools that we're using. You can pretty much just ignore all of those. All you're going to be spending your time in is in the src directory.

0:18 In fact, even in the src directory, you're going to spend most of your time in the exercise directory. This is where the markdown files are for the stuff you see here on the left. You don't need to open up the markdown files for most of these workshops. The exercise file that you're going to be working in is in this 01.html, and 05.js, and so on and so forth.

0:43 In fact, this first React Fundamentals workshop is a little bit unique because we do run in raw HTML files. That's important, because I want you to see that there's no tools required to using React to help you draw lines around the abstractions.

0:59 We start off with pure HTML files and literally everything that you need is right here in this file. There's nothing else that runs, especially when you're on this isolated page. Literally, all that you see here is what's in an HTML file. I can say, "Hello, World." I save that. Boom! It's right there.

1:21 That is basically, mostly what you're going to be working is in this exercise. In the directory, you're going to go through each one of this. You make changes, you try to make your thing look like the final thing. If you get totally stuck and you're, "I just don't know what to do," I wouldn't recommend banging your head against the wall for very long.

1:39 The idea isn't necessarily that you finish these exercises. It's more that you open your mind to what's possible and what problems we're trying to solve. Then when you watch me go through the solution in the video, that will help things click for you, because you've already tried to deal with the problem.

1:57 If you get totally stuck, don't worry about it, just move on. If you would like to get a tiny little tip, you can open up the final version, and you can see how I solved denounce. Spoiler alert, don't look at that for too long. You can see in the final directory, we have the final version of the file, as well as the final version of any extra credits.

2:19 That is a quick look at the files that we have in this project. Another thing that's important for your success in working through this is we have this friendly little emoji. If you look at the README, we describe what these emoji are for right here. We have Cody the Koala. Actually, I have Cody, right here. This is Cody the Koala. Say hi, Cody. "Hi."

2:45 Cody the Koala is just adorable. Cody wants to help you be successful as you're working through this material. Cody's job is to tell you when there's something that you're supposed to do. There are comments in here that are sort of relevant to you, but you really want to look around for Cody. Cody is going to be like, "Here, right here, this spot is where you're going to be doing something."

3:07 You'll see Cody in every one of these files, like right here, you need to do this thing. You might think that Cody's a little bit handholdy. That might concern you and you think, "Oh, hold on a second. I thought I was supposed to be learning this stuff. If Cody just tells me everything to do, am I learning?" I promise you that you are.

3:25 Like I said, the idea is that you open your mind to the problem that we're trying to solve through each one of these exercises. You tinker around with it a little bit. Then when you watch me go through it, then everything will click a lot easier for you, because you've already dealt with the problem.

3:43 Then Marty the Money Bag is Cody's buddy. Marty is even more handholdy than Cody is. Marty will give you very specific tips and sometimes even specific code that you're going to need to use. The reason that Marty is there is because Marty understands what the objective of the exercise is.

4:02 He understands that if you spend so much time working through some tangentially related problem, it's going to detract from your learning experience. Marty will give you code, will give you some strong tips so that you're not so distracted by the extra stuff that you forget to learn the specific thing that you're trying to learn.

4:23 There are a couple other emojis that you'll see throughout the workshop. Here we have Chuck the Checkered Flag, Matthew the Muscle. You can read through each one of these. You'll be interacting with Hannah Hundred a lot. That's the extra credit emoji labelling extra credits.

4:38 Olivia the Owl will give you useful tidbits and best practices, that sort of thing. Dominic the Document is going to link you to documentation that I recommend that you read through or at least have some experience with.

4:49 Berry the Bomb will hang out. Berry is one of my favorites because he's the one who says, "Hey, you delete this code, blow it up, because we're going to replace it with something entirely different." Peter the Product Manager gives us a storyline in some of the exercises. Alfred the Alert will occasionally show up as you're working through some of the tests.

5:09 That is basically the exploration of the project. There is also the test, which I'll talk about a little bit later. You're pretty much working in the src/exercise directory in the specific exercise file. You'll find the markdown, which is rendered on the left side, right next to it, so you can reference it directly if you want to do it that way as well.

5:32 That is a quick look through the file structure of each one of our workshops.