CSCI 499 Unit #4

Purpose

Learn about single page applications and a popular technology for creating user interfaces.

Preparation

We will use the text Learning React by Kirupa Chinnathambi for this assignment.

Read:

• Chapters 1-6
• Skim chapter 7 (optional review)

I strongly recommend that you type in the examples and try them in a browser. Think about the syntax (e.g., when are {} needed, where do style definitions belong, etc.). This may seem like a waste of time, but in my experience students who skip the examples struggle more with the programs. If you've done the examples, the program below should be relatively easy.

You don't need to submit chapter summaries, but I've included a list of self study topics, with important concepts in bold.

• What is a SPA? - very relevant for a UI class
• Why did Facebook decide to create React?
• Is React a framework or a library?
• What is JSX?
• What is the purpose of Babel?
• How is the React philosophy about styling different from what you may have heard before? Do you agree?
• Be sure to read the beginning of Creating Complex Components which talks about the component design process.
• What is the spread operator? How is it used effectively within React?

Programming Assignment

For this assignment you will create a page very similar to the following:

Specific Requirements

This program has no behavior, so the requirements just specify layout and style:

• Display four cards horizontally, with a shadow around each card and reasonable spacing between them.
• Each card has a background color. Notice that one card has a different color, which might indicate that card has some special purpose. The background color should be a property passed to the Card class (i.e., it should NOT be hardcoded). You may choose to have all different colors, or just one that is unique.
• Each card should display two color squares, with the name of the color (google HTML color names) displayed in white, 18px, sans-serif and centered. As with background, these colors will be transferred to the child components (see chapter 6).
• Each card should have a button that says "Pick Us!" with bold font and a reasonable left margin (no action)

Submit

Name your file [YourLastName].html and submit on Canvas.

Evaluation

Programs that meet all requirements will receive a grade of A. Programs missing one or two minor requirements will receive A-. Programs missing more substantial requirements will be graded accordingly. To acknowledge that programming takes more time than chapter questions, this unit will be worth 2x (i.e., it will be listed on Canvas as 10 points. A grade of A receives 10, a grade of A- receives 8, etc.).