A step-by-step workshop for learning React fundamentals while building an app
A step-by-step workshop to build a React application, all while learning React fundamentals. Best if accompanied with live facilitation by me 🙂.
In order to maximize our time during the workshop, please complete the following tasks in advance:
The more prepared you are for the workshop, the better it will go for you! 👍🏾
All of these must also be available in your PATH
in order to be run globally. To verify things are set up properly, run:
git --version
node --version
npm --version
If your node version is version 9 or lower, you can install nvm
to manage multiple versions of node.
If you have trouble with any of these, learn more about the PATH
environment variable and how to fix it here for Windows or Mac/Linux.
After you have verified that you have the proper tools installed (and at the proper versions), getting setup should be a breeze. Run the following commands:
git clone https://github.com/benmvp/react-workshop.git
cd react-workshop
npm run setup
This will likely take a few minutes to run. It will clone the repo, install all of the JavaScript dependencies needed to build our app, and setup our workshop dev directory.
If it fails, please read through the error logs and see if you can figure out what the problem is. Double check that you have the proper system requirements installed. If you are unable to figure out the problem on your own, please feel free to file an issue with everything (and I mean everything) from the output of the commands you ran.
We will be build a Giphy search app step-by-step in this workshop. To get started and verify that everything has been installed correctly, run:
npm start
The app should pop up in your default browser running at http://localhost:3000/. The app should be completely blank because we haven't built anything yet! But you can check out the app deployed online to see what the final state will look like.
For those interested, the app is a standard app bootstrapped by Create React App.
Let's learn the React fundamentals! ⚛️
Hiya! 👋🏾 My name is Ben Ilegbodu. 😄
Each step in the workshop builds on top of the previous one. If at any point you get stuck, you can find the answers in the source code of the current step. Any step can be used as a starting point to continue on to the remaining steps.
Here is what you'll come away knowing at the end of the workshop...
useState
hook (Step 2)useEffect
hook (Step 3)useRef
hook (Step 8)useReducer
hook (Step 10)Each step has an Elaboration & Feedback form link at the end. After you're done with the exercise and before jumping to the next step, please take a few minutes to fill that out to solidify your learning.
At the end of the workshop, I would greatly appreciate your overall feedback. Share your workshop feedback.
All attendees, speakers, sponsors and volunteers at this workshop are required to agree with the code of conduct. Organizers will enforce this code throughout the event. We expect cooperation from all participants to help ensure a safe environment for everybody.
Go to Step 0 - Begin.
All of the workshop material is available for private, non-commercial use under the GPL version 3 license. If you would like to use this workshop to conduct your own workshop, please contact me first at [email protected].