Deliverables - Class Assignments

React Navigation

TIP

Due before 6:00 pm on Friday October 16 2020.

In this project, you will build a simple master/detail application using React with React Router.

The image above is merely a concept demonstration. It is not feature complete, and I expect that you can improve the styling 😉

Instructions

• Use fetch() to asynchronously retrieve data from a remote server.
• Use the data from JSONPlaceHolder: JSONplaceholder API docs
• Your app should show a list of all the users on the home page.
• There needs to be a link from each displayed user for two other values for the selected user.
  • Choose two from ToDos, Posts, Albums, Photos, or Comments
• There should be a top-level nav menu that lets the website user see all of each of the three resources: users plus the two other resources that you choose.
• React Router should be used for all navigation.
• Clicking the link to one of the two related resources from a given user list item will show only the elements for that user.
• Clicking anywhere else on the user list item should display full details for the selected user including links to the two related resource lists.
• While data is being loaded in any component you should have a message/icon/indicator that data is loading. Animated is best because it gets the user's attention.

Remember

Make commits as you complete each requirement. They should be atomic and have a meaningfully descriptive message.

Submission

• Create a private repo on GitHub with the name mad9135-f20-c2-react-router.
• Invite GitHub user rlmckenney as a collaborator on your private repo.
• Submit the URL for your code repo to Brightspace.

Do not deploy to GitHub Pages ... yet

We will cover the details of how to deploy your React Router App to production next week and there will be a follow-up assignment just for that.