Start here! This is where you will get oriented, set up your work environment, and get ready to succeed as a React developer. It's important not to skip this section! It applies to all lessons below. 

👋 hi there! My name is [Kent C. Dodds!](https://kentcdodds.com/)

As you probably know already React is extremely awesome. You are probably very excited to spend the next couple of weeks together learning how to build web applications with React.

There is so much content for you to cover. To make sure you have the best experience possible, finish watching this section on set up. 

And if you haven&rsquo;t already, [join the discord](https://epicreact.dev/discord/) where there will be learning clubs for you to participate in with others.



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

Before we get started, there are just a few things to understand. Below is a complete overview video that covers how all the modules in Epic React work.

They follow a pattern:

* Read the welcome text for the module.
* Watch the welcome video!
* Clone a git repository for the module.
* Install the dependencies.
* Open the cloned code in the IDE of your choice. I like VSCode and included my favorite extensions for React developers in each repository so you can install them if you like. 
* Run the application code in the repository.
* Watch the intro video for the first exercise.
* Switch to your IDE and do the exercise.
* Watch the solution video where I explain how I solved it.
* Do the extra credit exercises and watch those solutions as well.

😅

Don't worry, everything is step by step and you'll be learning React before you know it.

## Pre-Workshop Instructions/Requirements

In order for us to maximize our efforts during the workshop, please complete the
following things to prepare.

Before you start this workshop it is critical that you have your working environment setup and ready to go. Keep working through this section!

Your success starts here! Once you understand how this is going to work, it will be consistent through all 320+ exercises and solutions we will work on together!

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

Let's talk about getting our repository cloned and setup. Navigate to the repo for the module you are working on, I'm doing react-fundamentals in this example, and clone that into a directory (whichever you prefer!). I'm going to call mine `Epic React`. 

To start the setup, copy the code in the Setup of the README in the repository, `cd` into the `Epic React` directory, and run that copied code in your terminal.

Here's an example of what that code will look like: 

```bash
git clone https://github.com/kentcdodds/<module-name>.git
cd <module-name>
npm run setup --silent
```

It'll start off doing some basic System Validation to make sure that you are running the correct versions of tools that are going to be used in this Workshop. 

Next it will be installing all of the Dependencies that are necessary for running the examples application. Once that is done, it'll run tests to make sure that all of those Dependencies were installed and running correctly. 

Lastly, it'll prompt you for your email. You don't have to put in your email if you don't want to. You can either wait for the timeout or quit out. This is the last thing so you won't be missing anything else. 

After all of this, you're ready to start learning! 

er-00-00-02~Clone and Setup

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

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

You can ignore configuration files. You're going to be spending your time in the source directory. Even in the source directory, you're going to spend most of your time in the exercise directory.

You don't need to open up the markdown files for most of these workshops. 

This first React Fundamentals workshop is unique because we run raw HTML files. And that's important because I want you to see that there are no tools required to use React and help you draw lines around abstractions.

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.

## Helpful Emoji 

Each exercise has comments in it to help you get through the exercise. These fun emoji characters are here to help you!

- **Kody the Koala** 🐨 will tell you when there's something specific you should do.
- **Matthew the Muscle** 💪 will indicate what you're working with an exercise.
- **Chuck the Checkered Flag**  🏁 will indicate that you're working with a final version.
- **Marty the Money Bag** 💰will give you specific tips (and sometimes code) along the way.
- **Hannah the Hundred** 💯 will give you extra challenges you can do if you finish the exercises early.
- **Olivia the Owl** 🦉 will give you useful tidbits/best practice notes and a link for elaboration and feedback.
- **Dominic the Document** 📜 will give you links to useful documentation.
- **Berry the Bomb** 💣 will be hanging around anywhere you need to blow stuff up (delete code).
- **Peter the Product Manager** 👨‍💼 helps us know what our users want.
- **Alfred the Alert** 🚨 will occasionally show up in the test failures with potential explanations for why the tests are failing.

er-00-00-04~File Structure

Most of the exercises do have tests and they can help through the material. You don't have to run the test if you don't want to, but they can help! 

Running the tests: 

```bash
npm test
```

This will start Jest in watch mode. You choose the file that you want using the P key on your keyboard. Read the output and play around with it.

The tests are there to help you reach the final version, however sometimes you can accomplish the task, and the tests still fail if you implement things differently than I do in my solution, so don't look to them as a complete authority.

Initially, all tests will pass, that's not what you want. You want the test to tell you that you haven't finished the exercise yet. You're going to want to disable the final import and enable the exercise file.

And that's all that you're going to need to do in the test file! 

You won't want to change anything else unless you're making a pull request.

## Note

Not all of the files are tested. For example, we can't test the HTML files without adding complex tooling.

er-00-00-05~Running Tests

The process that I recommend is first watching the intro video for each exercise, and also reading through the instructions. 

I'm also going to suggest that you open the exercise on an isolated page. And put it side by side with your code editor.

- Have tests running with `npm test`.
- Open the dev tools with the tab open to the console.
- Before you watch the solution, work through the exercise.
- You can do the exercise and extra credits and then watch all the solution videos. Or watch the solution videos between each exercise and extra credits. **It's up to you, however you learn best.**

## Extra Credit

- There is no starting point for the extra credits, and the extra credits have less *handholding*.
- You can work through that extra credit on your own, or you can watch the solution videos.

## Learning is hard

You might have to Google things, that's actually expected.


## Workshop Dev Tools

All of the workshops have dev tools. They're not really relevant for lots of the exercises, but they'll be useful with many of the exercises that work with HTTP calls.

### Workshop Dev Tools Features

- Change how long HTTP calls take
- Simulate Request failures

## General Tip

Make sure to take breaks as you work through Epic React. Each one of these workshops is at least four hours of just workshop time.

I recommend [https://icanhazdadjoke.com](https://icanhazdadjoke.com/) in between breaks!

## Elaboration and Feedback Form

Each exercise has an Elaboration and Feedback link. Please fill that out after each exercise. 

**The most important part is the elaboration part.** 

I want you to write down some of the core concepts that you've learned. Pretend that you're writing a mini blog post about what you've just learned. This will help you retain the new knowledge that you've acquired. 

As a favor to me, you can also provide additional feedback on how effective the exercise and the video instruction was for you.

At the end of the workshop, please go to the URL at the bottom of each workshop repo to give overall feedback. 

Once you finish with that, then you're done. You can move on to the next workshop!

Welcome to Epic React

Instructor

Course Content