Redoing the Cafe example

In an earlier lecture I showed an example of a JavaScript application that displays menu items and implements ordering for an imaginary cafe. You can find that application at this link. The lecture notes that documented some of the things I did in that example along with the full JavaScript source for the example are available on this page.

In this exercise you are going to rewrite this as a React application. Your application will be communicating with the same back end server that my original example used. You can borrow the approriate fetch() code from the earlier example to use in your React app.

What to do

For this assignment you are going to be writing the code for several components:

• A Menu component that displays the cafe's menu in a table (including the Breakfast, Lunch, and Dinner buttons that allow the user to filter the menu for different meals.)
• A MenuItem component that implements a single row in the menu table. This row needs to include a working Order button for the item it displays.
• An Order component that displays the user's current order in a table.
• An OrderItem component that implements a single row in the order table. This row needs to include a working Remove button for the item it displays.
• A PlaceOrder component where the user can enter their name and phone number and then click a button to post their order to the server.