CIS-2450 Lab #7: React Components

Reading: The documentation for react-calendar might be useful.

Part 1: Creating Properties

  1. Use a Git client (such as GitHub Desktop on Windows/macOS, or the command line git on Linux) to clone the Iapetus repository from GitHub.

  2. Demonstrate that the project "works" in its current state by doing npm install in the frontend folder, running the development server, and then viewing the application using a browser.

The application currently passes information from the calendar component into the Markdown editor component via local data and functions in the parent component. This works fine when the two components are immediate children of a common parent. A more flexible approach is to use properties (or "props") to pass information into a component. Here "information" can also include functions (sometimes called "behaviors" in this context).

The project contains a component, IapetusCalendar, which is currently a trivial wrapper around the React calendar. It is intended to eventually contain additional functionality layered on top of the base calendar component. However, as a first step, the program should be changed so that updates of the enclosed calendar are communicated to the Markdown editor component located elsewhere.

  1. Add an onChange property to the parameter list of the IapetusCalendar component using object destructuring (e.g., ({ onChange })). Inside IapetusCalendar the handling of a date change must now invoke the function given to the component to inform outsiders of the change in addition to changing the state of the date itself.

  2. In the main application, import IapetusCalendar from the JSX file (remove the other calendar import since it is no longer relevant). Change the calendar component to:

        <IapetusCalendar
          onChange={handleDateChange}
        />
      

    You also need to modify the handleDateChange function to remove all references to the old calendar and the date information. Management of the date itself is now done inside IapetusCalendar

Part 2: ???

There is no Part 2 for this lab, currently. This part is a placeholder for possible future additions to the lab.

Submission

Create a zip archive of your skeletal project, including the dist folder, and submit that archive to Canvas.


Last Revised: 2024-11-01
© Copyright 2024 by Peter Chapin <peter.chapin@vermontstate.edu>