Skip to content

Latest commit

 

History

History
140 lines (92 loc) · 7.68 KB

README.md

File metadata and controls

140 lines (92 loc) · 7.68 KB
Raw

Migrating to React Hooks Minishop

Maintenance Status Build Status license PRs Welcome

Watch on GitHub Star on GitHub

An exercise-based minishop by Ben Ilegbodu to learn how to migrate to React Hooks from classes for a better way to develop components and manage state in React applications. Best if accompanied with live facilitation by me 🙂.

Pre-Minishop Instructions

In order to maximize our time during the minishop, please complete the following tasks in advance:

  • Set up the project (follow setup instructions below)
  • Install and run Zoom on the computer you'll be developing with
  • Install React Developer Tools for Chrome (recommended) or Firefox
  • Install a JSX-friendly code editor, such as Visual Studio Code
  • Brush up on modern ES.next features, if they are unfamiliar to you
  • Have experience building React applications using class components

The more prepared you are for the minishop, the better it will go for you! 👍🏾

System Requirements

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.

Setup

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/migrate-react-hooks-minishop.git
cd migrate-react-hooks-minishop
npm run setup

This will likely take a few minutes to run. It will clone the repo, verify the environment, and install all of the JavaScript dependencies needed to build our app.

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.

Running the app

We will go through several exercises converting components written in classes to hooks. 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 display an index page with links to the steps in the minishop.

For those interested, the app is a standard app bootstrapped by Create React App.

Minishop Outline

Let's learn about React Hooks! ⚛️

🧔🏾 About Me

Hiya! 👋🏾 My name is Ben Ilegbodu. 😄

🕘 Schedule

Each step in the minishop contains exercises to apply what you just learned. You will be migrating classes to new code using hooks. There are also bonuses if you've got extra time. The exercises are intended to be a lot, so don't worry if you don't finish them all.

If at any point you get stuck, you can find the answers in the answers/ directory of the step.

❓ Asking Questions

  • Please interrupt me and ask questions! Others likely will have the same question.
  • However, unrelated questions are best sent to Twitter.

🖥️ Zoom Hygiene

  • Keep your video on (if possible) to make it feel more human and lively
  • Keep your microphone muted unless your talking to avoid background noise distractions
  • Answer each other's questions in the chat
  • Use breakout rooms for help

⭐ Concepts

Here is what you'll come away knowing at the end of the minishop...

  • Defining function components (Step 1)
  • Rules of hooks (throughout)
  • Maintaining UI state with the useState hook instead of setState (Step 1)
  • Managing side effects with/without cleanup using the useEffect hook instead of lifecycle methods (Step 2)
  • Passing down and updating context with the useContext hook (Step 3)
  • Sharing component logic by creating custom hooks (Step 4)

🧠 Elaboration & Feedback

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 out the form to solidify your learning.

At the end of the minishop, I would greatly appreciate your overall feedback. Share your minishop feedback.

🤝 Code of Conduct

All attendees, speakers, sponsors and volunteers at this minishop 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.

License

All of the minishop material is available for private, non-commercial use under the GPL version 3 license. If you would like to use this minishop to conduct your own minishop, please contact team@benmvp.com.

👉🏾 First Step

Go to Step 0 - Begin.