11. Hooks – Reusability, Readability, and a Different Mental Model

Activity 11.01: Creating a Reusable Counter

Solution:

1. Start off by creating a new React project, which we will call counter-hooks, start the project, and take a look at the browser window that should have opened for you automatically:

   $ npx create-react-app counter-hooks
   $ cd counter-hooks
   $ yarn start

2. Delete src/logo.svg.
3. Replace the contents of src/App.css with the following:

   body {
     margin: 20px;
   }
   
   button {
     width: 200px;
     height: 50px;
     background: #4444ff;
     color: white;
     font-weight: bold;
     border: none;
     cursor: pointer;
     margin: 5px;  
   }

4. Replace the contents of src/App.js with the following:

   import React from "react";
   import "./App.css";
   const App = () => (
     <div className="App">
     <h1>Counter</h1&gt...