Objective

The main objective of this homework is to learn the basics of React components, props, and state.

Setup

Follow this GitHub Classroom link and put your code in the repository generated: https://classroom.github.com/a/OTHjfYMI

Use React's create-react-app script to initialize your React app. (Don't use the CDN-based version in the sample code.)

Part 1

Create a React page that displays a list of objects (other than recipes). If you are planning to use React in your semester project, choose a part of your project. Otherwise, choose something simple like a list of people, toys, books, etc.

For this homework, you can hard-code the data to be displayed in a manner similar to the recipe data in the Banks and Porcello book. You will eventually need to obtain this data from an API (i.e., "back end"); so feel free to do that from the beginning if you prefer.

You are welcome to use the textbook and/or online tutorials; however, your submission needs to be a clear step away from the tutorial. In particular, it cannot be a simple "copy-and-paste". For example, if you follow a tutorial for implementing a Toy resource, don't simply replace "Toy" with "Book", "name" with "title", "manufacturer" with "author", etc. Instead choose a resource with a different number of properties, and a different mix of types.

You are welcome to use a CSS framework such as Tailwind or Bootstrap; but, it's not required.

Part 2

Add state to Part 1. Specifically, add the ability to either edit/update your objects or add a new one (or both -- especially if that's helpful for your project). You can model your edit/update feature after the example in the textbook; but that is not required. You are also welcome to take a different approach (i.e., have a different user workflow).

Submission

When you are ready to submit,

1. Include the message [Grade Me] when committing your git repo.
2. Deploy your server and email me the URL.

Updated Sunday, 23 February 2025, 2:39 PM