In-Class exercise: React: Alerts & Tabs

1. We'll be using the following GitHub project:
   • GitHub React project: https://github.com/nrhodes-hmc/cs124sp22-exercises
   • branch: 11-react-alert-tab-starter
2. If you haven't yet already cloned that project, follow the instructions.
3. If you have already cloned that project:
   1. Pull the latest changes (git pull from terminal, or Git/Pull... menu from WebStorm).
   2. Checkout the specified branch above
4. First, you'll be working with AlertApp.js, an application that displays some text and a couple of buttons.
   1. Try out the application; make sure the console is open since the application does do some console logging.
      • What happens when you click on the "Log to Console" button?
      • What happens when you click on the "Frob" button?
      • When the alert is displayed, does the "Log to Console" button work?
      • What happens when you click on the OK button in the alert?
      • What happens when you click on the Cancel button in the alert?
   2. Look at the code in AlertApp.js and understand what it is doing.
   3. Introduce a new Alert component so that you can simplify the JSX returned from AlertApp.js to:

      <div className={"app-container"}>
          <div className="alertapp">
              This is my app
              <br/>
              <button type={"button"} onClick={() => console.log('clicked')}>
                  Log to console
              </button>
              <button type={"button"} onClick={toggleModal}>
                  Frob
              </button>
          </div>
          {showAlert && <Alert onClose={toggleModal} onOK={handleAlertOK}>
              <div>
                  Are you sure you want to Frob the blitzen?
              </div>
          </Alert>}
      </div>
      

      Basically, the Alert component should handle the OK and Cancel buttons.

      Hint: the children elements of the Alert tag (the div that includes "Are you sure you want to Frob the blitzen?") are available in the Alert render function as props.children.

   4. Challenge: Mac Human Interface Guidelines, page 207 recommends that button names not be generic Cancel/OK, but more specific like "Don't Frob", "Frob".

      Modify the Alert component so that you can optionally provide different text for the Cancel/OK buttons.

5. The project also includes a TabApp.
   1. Make TabApp active by modifying index.js so that it renders a TabApp rather than an AlertApp.
   2. Try out the application.
   3. Look at the code in TabApp.js and understand what it is doing.
   4. Introduce a new component TabList so that you can refactor TabApp to:

      function TabApp() {
          return (
              <TabList>
                  <div key="Tab 1">Hello, world!</div>
                  <div key="Tab 2">Goodbye, universe!</div>
              </TabList>
          );
      }
      

      Hints:

      • the children elements of the TabList tag (the two divs containing "Hello, world!", and "Goodbye, universe!") are are available in the TabList render function as props.children.
      • The props.children can be mapped over (and filtered over!).
   5. Challenge: there are React packages that provide components to simplify construction of alerts and panels. Install such a package (for example, Chakra-ui or react-tabs) and rewrite the alerts and tabs.