Epic React Dev - Notes

Welcome to Epic React

Housekeeping notes

Follow the steps below to easily track with each Epic React module:

• Read the welcome text for the module

• Watch the welcome video

• Clone a git repository for the module: For example, if react-fundamentals is the GitHub repository specific to the Epic React module in question, then do the following:

  git clone https://github.com/kentcdodds/react-fundamentals.git
  cd react-fundamentals
  npm run setup --silent
  What the setup does

  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 the 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, but this is optional. After all of this, you're ready to start learning!

• Install the dependencies

• Open the cloned code in the IDE of your choice: Usually this just means running

  npm run start
  Run the dev server on port 3000

  Running npm run start 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. It is also recommended to use the isolated page of the exercise so the dev tools available will be much more useful in the information that they show.

• 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

Running tests

Use npm test to run tests — this will start Jest in watch mode. Choose the file that you want using the P key on your keyboard (this expects you to provide a file pattern to match against). 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:

// import App from '../final/05'
import App from '../exercise/05'

Helpful emoji

Emoji name	Emoji	Description
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.

Sample quiz