JSX Is Not HTML

JSX looks like HTML, but it is JavaScript, so it has a few rules of its own.

First, a component returns one root element: two elements side by side need a parent around them, or an empty fragment <>…</>. Second, the attribute for a CSS class is className, because class is a reserved word in JavaScript; with class, React prints a warning, and the check shows it. Third, every tag is closed: a tag with nothing inside, like img, input or br, ends with />. Without it the file doesn't compile, and the check prints the line with a caret.

Fourth, curly braces hold a JavaScript value. Here they are on another part of a page:

const city = "Lisbon";
const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

return (
  <footer className="note">
    <p>Open in {city}</p>
    <p>Open {DAYS.length} days a week</p>
    <hr />
  </footer>
);

The first paragraph shows Open in Lisbon, the second Open 6 days a week: React works out what is in the braces and puts the value on the page.

The check opens the page and prints the screen, then prints which CSS rule sets the color of the elements with the class tagline. Your page must show:

> open the page
  screen:
    main
      heading 1: Corner Shop
      text: Mugs, lamps, plants and more, a short walk from home.
      image: A white mug with a blue stripe
      text: 8 products
      field "Search": "" (placeholder "Search products")
> the style of .tagline (1 element, window 1024 px wide)
  p.tagline "Mugs, lamps, plants and more, "
    color: gray   <- .tagline

Your task: in src/App.jsx (the imports of PRODUCTS and App.css are given), make a constant shopName, then fill main with a heading that shows it, the tagline with the class tagline, the mug image, the number of products and a search field.

Assignment
Follow the Coding Tutorial to rebuild the shop's header, one JSX rule at a time.

Hint
You never type the 8: PRODUCTS.length in curly braces counts the products in src/data.js. And img and input close themselves with />.