Homework 4: Using React

Assigned: 10/5/2021; Due 10/21/2021 at 3:05pm ET



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".