The course material for our React Hooks workshop
We have new workshop material for 2021 🎉. Be sure to checkout https://reacttraining.com/workshops. We offer:
This repo contains the latest course material for React Training.
Before attending the training, please make sure you install the code (not just clone) and run the app to make sure it works. The most common problems for not being able to install and run are related to network configurations at the workshop venue like proxies. If your having these or other issues see the Troubleshooting section below.
npm run app, then you don't quite have it installed yet).
If you have any problems with these steps, make sure you see the Troubleshooting section below.
Windows Users! Please read the Windows Users section before finishing these setup steps. Particularly, we have found that PowerShell works better.
You need to have Git and Node installed. You might already so verify with these commands:
# Verify Git and Node are installed $ git --version $ node --version
If one of those commands doesn't work, then you don't have that tool installed. Go to these pages and follow the instructions for your operating system:
Then clone, install, and run the app:
# Clone the repo to your local machine (This just clones, it does not "install") $ git clone https://github.com/ReactTraining/react-workshop.git
Whichever directory you run the above command from, that directory should
now have a folder called
Change directory to the
$ cd react-workshop
Install and run. Make sure you do these two commands from within the
$ npm install
After this command, a menu will show some different app options. Choose #1 by typing
$ npm run app
If you have issues, read below.
Everything is working if the code compiles and you can visit
http://localhost:3000/in a browser.
While in the workshop, you will be asked to do
npm startto see a menu for courses and then lessons. The first time you run this, you'll be asked which course, and if you want to save your preferences so you're not asked again.
 advanced-composition  advanced-hooks  core-v1  core-v2  electives  CANCEL
Choose one from list [1...5 / 0]: 4
Do you want us to remember this course selection? [y/n]: y
From this point on, you'll be prompted with the exercise you'd like to run:
$ npm start
Which Lesson of core-v2?
 01-thinking-in-react  02-state  03-forms  04-data-fetching  05-effects  06-client-side-routing  07-context  08-authentication  09-app-state [a] 10-testing [b] 11-react-query [c] context-with-theme [d] FULL APP [e] 👈 BACK TO COURSE SELECTION  CANCEL
Choose one from list [1...9, a...e, 0]:
Choose option "d" to run the full app, then open a web browser to http://localhost:3000 to play around with it.
If you don't want to deal with the CLI in the future as much, you can run
npm start 1to go to your chosen exercise right away.
(not required, but nice)
You might notice as the instructors save their code that a tool called "Prettier" is automatically formatting things. If you use VSCode, here is the prettier plugin you need to install. Clicking the install button on the website will open VSCode and install it as a plugin. However you install it, many code editors will just pick up on the settings we've setup for prettier in our
When you start our code, it will start the app at port
3000and a small local database at port
3333. Don't worry about the database, it's not even a real database. It's a tool called
json-serverwhich runs 100% within this React Training repo so as soon as you quit the app and if you remove the repo, you've removed the database.
When you do
npm installwe run a
postinstallscript to copy a
db.json. We're using Node for this in a way that is supposed to help with cross-platform filesystem stuff. But incase it fails, you'll just have to copy this file manually. The file is in
There are some rare times when you quit the app the background process for port
3333remains open and this will prevent you from starting the app again until the port is closed. So we made
npm run kill-db-portas a command for you in case this happens. All this does is quit the processes associated with port 3333. If you have any problems you can do this manually.
If you've already cloned the repo but you need to get updated code, then follow these steps:
cdinto the root directory of the repo
lscommand to ensure you see a
package.jsonfile listed. If you don't you're not in the root folder of the repo
git stashis a safe way to do it,
git reset ---hardis how to live dangerously)
git pull origin master npm install
Then you should be able to do your
A few common problems:
$ git config --global url."https://".insteadOf git://
This adds the following to your
[url "https://"] insteadOf = git://
$ nvm use default stable
npm installstep. If that's the case, it probably means that at some point you did an
sudo npm installand installed some stuff with root permissions. To fix this, you need to forcefully remove all files that npm caches on your machine and re-install without sudo.
$ sudo rm -rf node_modules
If you installed node with nvm (suggested):
$ sudo rm -rf ~/.npm
If you installed node with Homebrew:
$ sudo rm -rf /usr/local/lib/node_modules
Then (look ma, no sudo!):
$ npm install
You can't start the app with
npm start app. Make sure you can see a
node_modulesfolder at the root. If you can't you need to run
npm installfrom the root of the repo. If that's not the issue and you've ran the app before but now it's not running, try
npm run kill-db-port(Mac/Linux). We run a small local database for our curriculum project on port
3333and there's some circumstances where it doesn't get killed correctly when you exited the app last time.
The app launches but there doesn't seem to be any data. The
/productspage just says "No Results". This just means that your
db.jsonfile is missing for whatever reason. Run
npm run create-dband see if that fixes it. If you're on Windows, see the PowerShell section below.
TL;DR: You probably want to use PowerShell instead of GitBash
There are three problems that might arise in a Windows Environment:
npm installwent well but we also do a
postinstallscript to create the
database.jsonfile. See the Database section above for details
npm run appor
npm startand you get weird errors instead of our menu system, we don't know what that is yet but the only reporters have been using GitBash instead of PowerShell.
If you're a Windows user who already does active JS/Node development then you should be good-to-go. Otherwise this section might be able to help.
.gitignorewhich would be difficult to see without extensions turned on. It's not required though.
If these instructions for Windows users can be improved, please let us know or make a PR!