Redux Fundamentals Workshop - Exercises
Thank you!
- 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.
Setup
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 yarn-full.js
. Running 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
Intro 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.
Other Exercises
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.
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 yarn start
.
Any errors?
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!
LICENSE
MIT