Learning React Hooks

Lab Prep

Clone the lesson repo into your Training Directory with git clone https://github.com/wrburgess/react-hooks-lesson (public) or git clone git@github.com:wrburgess/react-hooks-lesson.git (ssh)
Set your terminal to the new directory with cd react-hooks-lesson
Install the necessary packages with npm install or npm i
Open your editor in the directory with VS Code code . or Sublime subl .
In your terminal, make sure your local server is running with npm run start
In your terminal, make sure your tests are working with npm run test. Press a to run all tests, if asked.

Learn about React Hooks and how it can streamline React development.
Refactor the Bottom Component from a React Class Component to a React Function Component using the useState hook.

Make sure your tests are passing with npm run test
Open the file: src/components/Bottom.js
Import the React and Hook methods
Convert the Bottom Class Component to a Function Component
Initialize state with the useState hook
Switch the results section from an explicit to implicit state variable
Edit the handleClick function to increment the widgetsCount value using the hook
Run your tests and check the UI

Make sure your tests are passing with npm run test
Open the file: src/components/Bottom.js
Import the React and useState methods from the react module (see src/components/LeftSide.js, line 1)
Convert the Bottom Component from a class component to a function component (see src/components/LeftSide.js line 3, RightSideRefactored.js line 3)
Edit the Bottom Component to initialize state with the useState hook (see src/components/RightSideRefactored.js, line 4)
Edit the results section to use a component variable without the this reference (see src/components/RightSideRefactored.js, line 13)
Edit the handleClick function to increment the widgetsCount value using the hook (see src/components/RightSideRefactored.js, line 14)
a) Make sure your tests are passing with npm run test
b) Make sure your refactoring works for users with npm run start