CS 351 Fall 2019 Homework 10

Bundlers, React JSX and Function Components

Dr. Greg M. Bernstein

Due Wednesday, November 22nd, 2019 by 11:59PM, 50 points.

General Instructions

Bundlers, React: JSX, Function Components, and State

Create and Use a new Branch hw10

We will create a new git branch called hw10 for use in this assignment. The branch you create must exactly match the one I’ve given you for you to receive any credit for this homework.

Prior to creating this new branch make sure your working directory is “clean”, i.e., consistent with the last commit you did when you turned in homework 8. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw10. Review the section on submission for using push with a new branch.

Create and Use reactTour Directory

Create and use a top level reactTour directory for this homework. Make sure it is at the top level of your repository.

Use README.md for Answers

You will modify the README.md file to contain the answers to this homework.


Question 1. (10 pts) React Start

Set up React tour project: Parcel, React Dev Tools, Hello React

(a) Project initialization

Create a directory at the highest level of your repo and call it reactTour. Set up a package.json file and install React (npm install --save react react-dom). Create a basic index.html and index.js for use with Parcel and React such as in the React Intro. I recommend a global install of Parcel as in the JavaScript Modules slides.

(b) Install React Developer Tools

Install the React Developer Tools extension in your browser. These exist for both Chrome and Firefox. I use both.

(c) Hello React

Within your index.js file create a Hello function component as follows:

Start up Parcel, parcel index.html and point your browser to the link shown. Take a screenshot that also shows your React developer tool components view. My screenshot looks like:

Question 2. (10 pts) Pages to Components

(a) Home Page Component

Create a component in a separate file Home.js that just shows your tour home page. There are a number of issues to be fixed as we take the raw HTML from our project and bring it in as JSX. One is that all HTML class attributes that you may have been using for styling need to be changed to className attributes in JSX. Note that you can bring in CSS styling into the index.html file for general styling.

In addition images need to be brought in via a two step process. First import you images and then use that imported item for the src attribute, e.g.,

Update your index.js file to use this component as follows:

Take a screen shot of your progress showing the React developer panel with the component view. I get something like:

(b) About Page

Now create an About.js component. Show the code for your component here. Import it into the index.js file and “render” it instead of the Home component. Take a screenshot. Mine looks like:

(c) Conditional Render Via App with State

We want to show either the About component or the Home component but not both at the same time. For development purposes we will add simple class based App component to our index.js as follows:

Do not worry about fully understanding class components here, but understand that the App component will render something different depending on its “state”. The React developer tools in your browser will allow you to change the state (just type in stuff) of the App component so you can switch views. Try it and take a screenshot. I get

Question 3. (10 pts) Tour Data and Display

We will now create a tour component that displays a table of tours. We will pass this component information about the tours via the “props” parameter/attribute.

(a) Tour Data

Create some mock tour data or use your previous mock data and put it into a JSON file named tours.json, you can include any type of information about the tour you want but you must have some type of name and date information. Show a portion of this file here. Have your index.js program import this information into a variable.

(b) Tour Component

Create a Tours component and have it show the tours in a nice table. You must use appropriate React idioms such as map to transform data, using key attribute to avoid warning messages etc. See course slides for more info. Have the App component pass the Tours component the tours information you got from the JSON file. I added the following to my index.js for this purpose:

Show the code for your Tours component here. Take a screen shot with the React developer tools showing the components.

My Screen shot looks like (note mine might be a bit more complicated since I have two different types of tours):

Question 4. (10 pts) Customers Component

(a) Customer Data

Create or find some “fake” customer data that includes firstName, lastName, and email. You can use data from previous assignments but do not show any passwords in the “clear”. Import this information into a customers array in your index.js file.

(b) Customer Component

Create a Customer.js file/component that takes an array of customers and sorts them by their last name and then produces a numbered list of customers and their emails. Enhance your index.js so you can show this component. Show your component code here and take a screen shot. Mine looks like:

Question 5. (10 pts) Deployment

Create a production build of your application with Parcel.js, test and deploy to the department server. Put a link to your app here. Your app must demonstrate the functionality of this homework to receive credit. Hint: you will need to tell Parcel to use relative URLs (see slides).