Objective

Learn to implement dynamic routing for a product details page in a React application. Create a product listing where each product links to a unique detail page based on the product ID, using data from a JSON file.

Setup

1. Create an 'Exercises' Directory (If not already done):

   • If you haven't already, create a main directory on your local machine to house all your exercises. You can do this using mkdir Exercises.

2. Fork the Repository:

   • Navigate to the GitHub repository for this exercise at 03-23-dynamic-product-details.
   • Click on the 'Fork' button to create a fork of the repository.

3. Clone Your Forked Repository:

   • Open your terminal.
   • Navigate to your Exercises directory using cd path/to/Exercises.
   • Run git clone <your-forked-repo-url> to clone the repository to your machine.
   • This will create a new directory named 03-23-dynamic-product-details under Exercises.

4. Initial Setup:

   • The repository already includes the skeleton code generated by Create React App, along with a data folder in the src directory containing the products.json file.
   • Navigate to the exercise directory: cd 03-23-dynamic-product-details.
   • Run npm install to install the necessary dependencies.
   • Start the development server with npm start.

products.json Structure

The products.json file in the data folder will have the following structure:

{
  "products": {
    "1": {
      "name": "Product One",
      "description": "Description for Product One",
      "price": "19.99"
    },
    "2": {
      "name": "Product Two",
      "description": "Description for Product Two",
      "price": "29.99"
    },
    // ... more products
  }
}

Each product is an object with properties like name, description, and price, keyed by productId.

Exercise Instructions

1. Create a Product Listing Page:

   • Build a ProductList component that displays a list of products. Use the products.json file as the source of product data.
   • Display each product's name in the list, and each product name should be a link to its detailed page.

2. Implement Dynamic Routes for Product Details:

   • Set up dynamic routes in your application so that clicking a product name in the ProductList navigates to the corresponding ProductDetail page.
   • The route for each product detail page should be /product/:productId.
   • Create a ProductDetail component that retrieves and displays the details of the product from products.json based on the productId obtained from the URL.

3. Hint for Accessing Product Details:

   • In the ProductDetail component, use the useParams hook from react-router-dom to extract the productId from the URL.
   • Use this productId to access the corresponding product's details from the products.json file.

Testing the Dynamic Product Details Page

• Ensure that clicking on a product in the ProductList navigates to the ProductDetail page.
• Verify that the ProductDetail page correctly displays the information for the product based on the productId in the URL.

Submission

1. Commit Your Changes:

   • After completing the exercise, ensure all your changes are saved.
   • Run git add . to stage your changes.
   • Run git commit -m "Completed Dynamic Product Details Page exercise" to commit your changes.

2. Push to Your Fork:

   • Run git push to push your commits to your forked repository on GitHub.

3. Create a Pull Request:

   • Go to your forked repository on GitHub.
   • Click on 'Pull Request' to create a new pull request to the original repository.
   • Ensure the pull request details are filled out, explaining the changes you made.