Client-Side JavaScript Frameworks (React)

Part 1: Intro & Setup, JSX Part 2: Components

Assignment

For this assignment, we are going to create a simple schedule builder for sorting out how many sections of different classes we need to offer and who will teach them. We won't have any data connection yet, so our state is purely client-side (erased on reload).

The complete app will work as shown below. But this assignment is only the first part of the app. The next assignment will complete the interface that you see below, and the final assignment will make the server data connection.

Component Composition

Assignment Next Step

Following the video example, create a component representing each Course and display three of them.

Separate out a Course component (data is kept hardcoded in each Course component)

• add a Course component to your App.js file
  • the Course represents one of those rows above
  • use the HTML from mockups/mockup01.html (pictured above), just as in part1
  • hardcode the following data in Course and use it as the state:

      const name = "1370";
      const sections = [
        {id: 1, instructor: "Ayati"},
        {id: 2, instructor: "Kim"}
      ];

• have your App display that component three times (as if there were three different courses)

Assignment Next Step

Continuing on, move the data to the App level and pass properties into your Courses

• hardcode the following data in App:

    const courses = [
      {id: 1, name: "1370", sections: [
        {id: 1, instructor: "Ayati"},
        {id: 2, instructor: "Kim"}
      ]},
      {id: 2, name: "3329", sections: [
        {id: 3, instructor: "Gao"},
        {id: 4, instructor: "Tomai"},
        {id: 5, instructor: "Tomai"}
      ]},
      {id: 3, name: "3340", sections: [
        {id: 6, instructor: "Schweller"},
        {id: 7, instructor: "Wylie"}
      ]}
    ];

• update your App component to iterate over that list creating Course components
• update your Course component to accept name and sections as properties (props)
• remember to put a key attribute on each Course

Normalize the data

As we've seen before, storing a simple name for each instructor in the database is limited. More likely, we will have a faculty table and store ids.

• include this hardcoded list of faculty names and ids in your App

    const instructors = [
      {id: 12, name: 'Ayati'},
      {id: 7, name: 'Gao'},
      {id: 2, name: 'Kim'},
      {id: 23, name: 'Schweller'},
      {id: 31, name: 'Tomai'},
      {id: 3, name: 'Wylie'}
    ];

• replace the faculty names in the sections data with ids
• update your Course component to accept the instructors list as an additional prop
• update your Course component to look up instructors names based on the ids in the course data

  hint: JavaScript arrays have a very nice find method