Redux Fundamentals Workshop - Exercises
- Create React App.
- Kent C Dodds, whose kentcdodds/react-workshop repo formed the basis for this one
- Ryan Florence, for helping get everything set up.
Before attending the workshop, please make sure you have followed these instructions to set up the exercises, and make sure you can run them.
Step 1 - Dependencies
You will need:
Please install them if you don't have them already.
Step 2 - Clone the repository:
From the command line, clone the repository:
$ git clone https://github.com/markerikson/redux-fundamentals-workshop-exercises.git
Step 3 - Install dependencies
$ cd redux-fundamentals-workshop-exercises $ yarn
This will install all the dependencies for all of the exercises, it might take a while.
If you don't have Yarn installed, I've included a prebuilt copy as
node yarn-full.js should also install everything
You can use npm but yarn's caching will make it a better experience, especially since I've used Yarn's "offline mirror" feature to include all of the needed packages in the repo itself.
Editing and Running the Exercises
The first two sets of exercises are located in the
intro/exercises folder. They're simple HTML files that you can open up directly from the file system and view in your browser.
Each exercise HTML file has some unit tests set up. If any tests fail, the background color of the page will be red (or pink-ish) when it loads. If all tests pass, the background color will be green.
Edit the exercise HTML file directly, and refresh the page to see the changes.
There's a matching
intro/exercises-final folder that contains the "correct' versions of each exercise, if you get stuck and need to compare.
The rest of the exercises are in the
src/exercises folder. As with the intro exercises, there's a matching
src/exercises-final folder with the "correct" implementations.
Each exercise has a README.md file that describes the goals of the exercise, and there are
TODO comments in the source files for each exercise that indicate where you ought to make changes.
Run the application using
yarn start, and browse to
http://localhost:3000. You should see a list of available exercise sets on the left. If you click on an exercise name, you'll see the "exercise" implementation running in the middle, and the "exercise-final" implementation running on the right. This will let you compare how your implementation is behaving as it runs.
If the Create-React-App dev server is running, the application page should automatically updated with any edits you make to the exercise files. If that doesn't happen, stop the CRA server and re-run it using
If you see any errors, read the output and try to follow any instructions. If that doesn't work, feel free to file an issue to ask for help and I'll help if I can. Good luck!