Recap: JSX Expressions

Part of the Fundamentals section of Coddy's React journey — lesson 10 of 42.

Challenge

Easy

Chapter recap: a mini order summary, rendered entirely from JavaScript. App.jsx already defines item, price, quantity and a shout helper.

Make the <h1> with id="header" render the result of calling shout(item): it should show COFFEE!.
Make the paragraph with id="count" render 3 cups, using the quantity variable, not the digit.
Make the paragraph with id="total" render Total: 12. Compute the number from price and quantity with *, don't type 12.

Try it yourself

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>