er-00-00-00~Welcome to Epic React

er-00-00-01~Project READMEs and Pre Reqs

er-00-00-02~Clone and Setup

er-00-00-03~Running the Epic React Workshop App

er-00-00-04~File Structure

er-00-00-05~Running Tests

er-00-00-06~Example Runthrough

Welcome to Epic React

When your project is set up, you are ready to run it!

Run:

```bash
npm run start

# OR

npm start
```

This starts a development server on port 3000 and will open a browser page for you. If you already have a server running on port 3000, react scripts will ask if you want to run on a different port. It's highly recommended that you run this application on port 3000 as there are links that you can click that rely on that port.

I'll take you through a tour of the app. What each exercise page will look like and how to navigate between exercises.

Additionally, I recommend that you use the isolated page of the exercise so the dev tools available will be much more useful in the information that they show

Kent C. Dodds: [0:00] With the project installed locally, you're ready to run the app. I'm going to pop open the integrated terminal here. That's just in the directory for the repo that I'm using. I'm going to run npm run start, or you can also run npm start, that'll do the same thing. This runs react-scripts start.

[0:20] If you've used react-scripts before with create-react-app, then it should be very familiar. Even if you haven't, there's not a whole lot you have to do. It pops open localhost:3000 for you automatically.

[0:30] If you're running two servers at once maybe you've got React fundamentals and React Hooks running at the same time, then you'll get one on 3000. Then the other one will ask you, "Hey, there's something running on 3000. Do you want me to try a different port?"

[0:43] I recommend against doing this because there are a lot of links throughout the repo that relies on the fact that it's port 3000. If you have two of them running, then things may not work super well. I recommend only running one at a time, but if you don't mind updating the port numbers, that's fine, too.

[1:03] Here is the app. Most of the workshops use this app. You want to get really familiar with it. I'll just take you on a little tour. Here, we're going to go to basic JavaScript rendered, "Hello, world!" On the left side you're going to see some background instructions, some exercise instructions here, you'll see extra credit right here.

[1:21] Then on the right side, you'll see the rendered version of the files that you're going to be working with. You'll be working in the exercise file. That's what's being rendered right here. Right now, there's nothing because you haven't done your job yet. You got to do something in the exercise. We have a tab for what the final looks like. You can compare yours with what the final looks like.

[1:40] We also have extra credit. Several of the exercises have a couple or maybe just one extra credit that you can work through as well. This is a rendered version of that.

[1:52] Using the DevTools...Things can be a little bit tricky if you've got a whole bunch of app around the thing that you're trying to work on. This is just an iframe here. We also have a mechanism for you to open a completely isolated page that has nothing but what you're working on it. That should hopefully make working with the DevTools and everything else a lot easier for you.

[2:16] This is what I use most of the time when I'm working through the material. This is what I recommend that you use as you're working through the material as well.

[2:25] Another thing that I want to point out here is it's really important that you read through this background information. Even if you feel like, "Oh, I know this whole thing. I'm just going to breeze through this," don't do that. Read through the background information because there will be blog posts and links to documentation.

[2:40] I honestly expect you to go beyond just what is in the workshop and read some documentation, tinker around with some CodeSandbox things, and whatever to play around with these things as you're working through this material. Read through the background information. It will sometimes give you little snippets of code that will be relevant to what you're working on.

[3:02] Then here, in each one of the exercises and extra credits, you're going to see this production deploys thing. What this is, basically, if you've messed things up locally or something, you just want to see what it looks like in production. This is especially relevant for the performance workshop where you want to see, "OK, when I build this for production, what does this actually look like?"

[3:27] Then you can open up each one of these, and this is what this particular file, the isolated example looks like when you push it up to production. That could be useful. Like I said, it's mostly useful for the production or the performance workshop. Then you also have that for the extra credit. We also have elaboration and feedback. I'll talk a little bit more about that later.

[3:51] Once you finish with this exercise, you can navigate to the next one by clicking this Next button. You can go back to the previous one by clicking the Previous button.

[3:59] Then we also have these dots right here that you can navigate just to jump around really quickly. Actually, you can use the left and right arrow keys if you're just like focused on the body. There's that too, if that's useful to you.

[4:13] That's how you get the app up and running. That's a little tour of the app. You simply run npm run start or npm start in the directory for the repository that you want to have running. Then that will pop open your localhost:3000 and then you can start on the exercise that you're working through in Epic React.

Course

Welcome to Epic React

er-00-00-03~Running the Epic React Workshop App

Share this video with your friends