12. State Management with Hooks

Activity 12.01: Creating a Chat App Using Hooks

Solution:

1. Start off by creating a new React app:

   $ npx create-react-app chat-windows

2. Go to the src/App.js file and delete logo.svg.
3. Replace the contents of src/App.css with the following:

   .App {
     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 to get an empty component to work with:

   import React from "react";
   import "./App.css";
   const App = () => {
     return (
       <div className="App">
       <button>Add Chat Window</button>
       </div>
     );
   };
   export default App;

   The first thing we want to do is start to build out...