1. Building a Comic Book Library with React Router

Objective: The objective of this assignment is to develop a fundamental understanding of setting up routes in a React application using the React Router. You will create a comic book library management system with different pages for various features like browsing characters, viewing character details, and exploring comics. This exercise will enhance your ability to create single-page applications in React.

Problem Statement: Your task is to set up a basic structure for a Comic Book Library Management System using React. The application should have different pages for 'Home', 'Browse Characters', 'Character Details', and 'Comics'. You will be creating the routes and setting up empty components for each page. We've created most of the components in previous lessons. So, reuse those components. Make sure to use the Marvel API for this assignment.

Task 1: Install and Setup React Router

Initialize a new React project or build off of the Marvel Comics API comic project. Make sure to use the Marvel API and install the latest version of the React Router.
Set up React Router in your application.

Expected Outcome:

A set up React project with the React Router installed.
Basic configuration of React Router in the application's main file.

Task 2: Create Route Components

Create four new components: Home, BrowseCharacters, CharacterDetails, and Comics. The home & comic components can be empty for now, with just a simple return statement and you can reuse your browse & detail components from the previous assignment.

Code Example:

Expected Outcome:

Four components created and ready to be used in routing.

Task 3: Setting Up Routes

In your application's main file, set up routes using BrowserRouter and Route from React Router. Assign each route to the corresponding component.

Expected Outcome:

The application should have a basic routing setup with Home, BrowseCharacters, CharacterDetails, and Comics accessible via different paths.
Navigating to these paths should display the corresponding component

Module 11 Lesson 4: Assignment | React Routing and Single-Page Applications