13. Composing Hooks to Solve Complex Problems

Activity 13.01: Creating a Recipe App

Solution:

1. Start off by creating a new React app:

   $ npx create-react-app recipes

2. Go to the src/App.js file and delete logo.svg. Clear out the contents of App.js and App.css. Instead, replace the contents of src/App.css with the following:

   .App {
     display: flex;
     justify-content: space-between;
   }
   .App > div {
     padding: 20px;
   }

3. Start off with an initial component in src/App.js:

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

4. Create our left-hand side of the app, our RecipeList component, in src/RecipeList.js:

   import React from "react";
   const RecipeList = () => {
     return (
     <div className="RecipeList">
      ...