Update README.md

README.md

@@ -83,8 +83,8 @@ my-product-management-system/
 - Create `CategoryFormClass.js` and `CategoryListClass.js` as class components.
 - Discuss state management, event handling, and lifecycle methods.
  CategoryFormClass.js 
-```bash
 
+```jsx
 import React, { Component } from 'react';
 import { createCategory } from '../../services/ApiCategory';
 
@@ -133,7 +133,9 @@ class CategoryFormClass extends Component {
 
 export default CategoryFormClass;
 ```
+
 CategoryListClass.js
+
 ```jsx
 
 import React, { Component } from 'react';
@@ -247,7 +249,9 @@ export default CategoryListClass;
 - Deep dive into creating functional components with hooks.
 - Create `CategoryFormFunction.js` and `CategoryListFunction.js` as functional components.
 - Discuss useState and useEffect hooks.
+
 CategoryFormFunction.js
+
 ```jsx
 import React, { useState } from 'react';
 import { createCategory } from '../../services/ApiCategory';
@@ -293,7 +297,9 @@ const CategoryFormFunction = ({ fetchCategories }) => {
 
 export default CategoryFormFunction;
 ```
+
 CategoryListFunction.js
+
 ```jsx
 import React, { useEffect, useState } from 'react';
 import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
@@ -414,7 +420,8 @@ export default CategoryListFunction;
 ### 6. Adding CSS (15 minutes)
 - Demonstrate how to add and apply CSS in React.
 - Style the category and product forms.
- Category.css *
+ Category.css 
+
 ```css
   form {
      margin: 20px;
@@ -471,18 +478,19 @@ export default CategoryListFunction;
   .button-update:hover {
     background-color: blue;
   }
-  
 ```
 
 
 ### 7. Break (5 minutes)
 
-### 8. Integrating MockAPI for CRUD Operations (60 minutes)
+### 8. Integrating MockAPI for CRUD Operations (30 minutes)
 - Set up MockAPI for category and product management.
 - Perform CRUD operations (Create, Read, Update, Delete) using MockAPI.
 - Url Localhost / Mockapi: 'https://66b1b4381ca8ad33d4f4d9c0.mockapi.io/api/v1/category';
 - Discuss Axios/ Await Fectch
+
 ApiCategory.js
+
 ```jsx
 const apiUrl = 'https://mockapi.io/endpoint';
 
@@ -517,7 +525,8 @@ export const updateCategory = (id, category) =>
 - Link forms to MockAPI for data submission.
 - Url localhost / Mockapi: 'https://66b1b4381ca8ad33d4f4d9c0.mockapi.io/api/v1/product';
 - Implement similar logic for \`ProductForm.js\` &  \`ProductList.js\`
-Example form and list structure with API integration
+
+
 ```jsx
 import React, { Component } from 'react';
 import ProductForm from './ProductForm';
@@ -553,12 +562,16 @@ export default ProductList;
 - Step-by-Step Instructions:
     -  **Install React Router:**
     -  Run the following command to install React Router:
-   ```bash
-   npm install react-router-dom
-   ```
+    
 
-  - **Modify App.js:**
-   - Replace the content of \`App.js\` with the following code:
+    ```bash
+      npm install react-router-dom
+    ```
+       
+    -  **Modify App.js:**
+    -  Replace the content of App.js with the following code:
+   
+   
    ```jsx
    import React from 'react';
    import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
@@ -599,67 +612,95 @@ export default ProductList;
 - Step-by-Step Instructions:
     -  **Modify App.js:**
     -  Replace code to App.js:
-  ```jsx 
-    .App {
-        font-family: sans-serif;
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        height: 100vh;
-    }
-
-   ```
-
-
-  - **Modify App.css:**
+  
+    ```jsx 
+    
+        function App() {
+          return (
+            <Router>
+              <div className="App">
+                <div className="topbar">
+                  <h1>Product Management System</h1>
+                </div>
+                <div className="container">
+                  <nav className="sidebar">
+                    <ul>
+                      <li>
+                        <Link to="/category1">Category Class</Link>
+                      </li>
+                      <li>
+                        <Link to="/category2">Category Functional</Link>
+                      </li>
+                      <li>
+                        <Link to="/product">Product</Link>
+                      </li>
+                    </ul>
+                  </nav>
+                  <div className="content">
+                    <Routes>
+                      <Route path="/category1" element={<CategoryListClass />} />
+                      <Route path="/category2" element={<CategoryListFunction />} />
+                      <Route path="/product" element={<ProductList />} />
+                    </Routes>
+                  </div>
+                </div>
+              </div>
+            </Router>
+          );
+        }
+    ```
+
+
+   - **Modify App.css:**
    - Add the content of \`App.css\` with the following code:
+   
    ```css 
-    .App {
-        font-family: sans-serif;
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        height: 100vh;
-    }
-
-    .topbar {
-        background-color: #f8f9fa;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-        padding: 20px;
-    }
-
-    .container {
-        display: flex;
-        flex-grow: 1;
-    }
-
-    .sidebar {
-        width: 200px;
-        background-color: #f8f9fa;
-        padding: 15px;
-        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-        text-align: left;
-    }
-
-    .sidebar ul {
-        list-style-type: none;
-        padding: 0;
-    }
-
-    .sidebar ul li {
-        margin: 10px 0;
-    }
-
-    .sidebar ul li a {
-        text-decoration: none;
-        color: #007bff;
-        font-weight: bold;
-    }
-
-    .content {
-        flex-grow: 1;
-        padding: 40px;
-    }
+        .App {
+            font-family: sans-serif;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+        }
+    
+        .topbar {
+            background-color: #f8f9fa;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            padding: 20px;
+        }
+    
+        .container {
+            display: flex;
+            flex-grow: 1;
+        }
+    
+        .sidebar {
+            width: 200px;
+            background-color: #f8f9fa;
+            padding: 15px;
+            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+            text-align: left;
+        }
+    
+        .sidebar ul {
+            list-style-type: none;
+            padding: 0;
+        }
+    
+        .sidebar ul li {
+            margin: 10px 0;
+        }
+    
+        .sidebar ul li a {
+            text-decoration: none;
+            color: #007bff;
+            font-weight: bold;
+        }
+    
+        .content {
+            flex-grow: 1;
+            padding: 40px;
+        }
 
    ```
 
@@ -712,5 +753,5 @@ export default ProductList;
 
 
 
-This comprehensive 4-hour training module ensures that students gain an in-depth understanding of React components, styling, and CRUD operations, with ample time for hands-on practice and advanced topics.
+This comprehensive 3-hour training module ensures that students gain an in-depth understanding of React components, styling, and CRUD operations, with ample time for hands-on practice and advanced topics.