This is an old version of the class. Please see the 2021 version instead.

Homework 4: Using React

Assigned: 10/6/2020; Postponed: Due Thursday, 10/22/2020 at 1:30pm ET (old: 10/20/2020)

(We decided to postpone the deadline for HW 4 until Thursday, 10/22, so you would have more time to prepare for the midterm.)
(originally due 10/15)


In this assignment, you will be redoing most of homework 1 in React, which we hope you find to be a lot easier than it was to use pure html/CSS/JavaScript, and adding a shopping cart page, also using React. The objective of this assignment is to learn React and JSX (React's extension to JavaScript for generating html), how to use React for handling state, like the selected shirt and the selected color (for the details page), and the number of items to be purchased (for the shopping cart), etc. You will also be learning and using the ReactRouter package, which helps with having a multi-page web application.

Although we are now using a variety of libraries as part of React, we only want you to use the ones that come with Create-React-App and ReactRouter. You may also use React's version of Bootstrap (called ReactStrap in this case) which makes it easy to make your implementation responsive and provides patterns like buttons and cards which you had to do by scratch for homework 1.

Note that there are React libraries available already for almost everything, including a number that provide a shopping cart, but you are not allowed to use those -- you must stick to the 3 allowed React packages. If you have another package you think should be allowed, maybe ask on Piazza.

As with the previous homeworks, you should try to mimic the look and behavior of the examples we provide as closely as possible. Imagine you are the software engineer at a company where a User Interface Designer has created a prototype which you are supposed to implement "for real".


Michael Liu created an example last year of a React and ReactRouter app showing Star Wars characters which has a home page, list of characters page, and a details page, so it can be a good model for how you can create something very similar to Homework 1. Here are the links:

This article explains everything about deploying a React app to Netlify from GitHub (with React Router in play):

You will download the file which will contain the following starter files:

In addition, we have supplied the following for your reference, also in the zip file:

home page Products page Details page
Not Implemented Page Shopping Cart Page

Detailed Requirements

We have supplied screen shots and a movie to define the required behaviors. As with homework 1 and 3, you don't have to be "pixel perfect", but you should have the all operations pretty much looking and behaving in the same way as this specification. If something is unclear about how it should work, or you want to deviate from the defined behavior, you might want to first ask on Piazza. If your homework 1 did not match our specification, you should make your homework 4 match our specification (and not match your incorrect homework 1).

Extra Credit

Turn In

Please have a README file with your code, which can be in plain text, Microsoft Word, or pdf format, which should contain:

Please upload this README file to Canvas by 1:30pm on 10/22/2020, in addition to having the file in your subfolder.