Skip to content

M
my-product-management-system
Commit 8cecc4c9 by rahimie-hub
Options

commit

parent d536cf75
Showing with 224 additions and 177 deletions
README.md
# my-product-management-system # PRODUCT-MANAGEMENT-SYSTEM
## Objective: ## Objective:
By the end of this session, students will be able to create class and functional components, style components using CSS, and perform CRUD operations in React using MockAPI. The project will be named "my-product-management-system" and will include pages to register categories and products. By the end of this session, students will be able to create class and functional components, style components using CSS, and perform CRUD operations in React using Own/MockAPI. The project will be named "my-product-management-system" and will include pages to register categories and products.
## Agenda: ## Agenda:
### 1. Introduction (30 minutes) ### 1. Introduction (10 minutes)
- Overview of React components: class components vs functional components. - Overview of React components: class components vs functional components.
- Introduction to React's component lifecycle methods. - Introduction to React's component lifecycle methods.
- Brief introduction to CSS in React. - Brief introduction to CSS in React.
- Introduction to MockAPI for CRUD operations. - Introduction to MockAPI for CRUD operations.
### 2. Setting Up the Project (30 minutes) ### 2. Setting Up the Project (5 minutes)
- Create a new React project using Create React App. - Create a new React project using Create React App.
- Start the React development server. - Start the React development server.
- Brief overview of the project's folder structure. - Brief overview of the project's folder structure.
\`\`\`bash ```bash
npx create-react-app my-product-management-system npx create-react-app my-product-management-system
cd my-product-management-system cd my-product-management-system
npm start npm start
\`\`\` ```
\`\`\`
### 3. Editing App.js (3 minutes)
- Modify \`App.js\` to include set title project / Hello World! to test this app.js page
```bash
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import CategoryFormClass from './components/Category/CategoryFormClass';
import ProductFormClass from './components/Product/ProductFormClass';
function App() {
return (
<Router>
<div className="App">
<h1>Product Management System</h1>
</div>
</Router>
);
}
export default App;
```
### 4. Setting Up the Project Folder Structure / File System (10 minutes)
- Create folder and file according to below file structure page
- Brief overview of the project's folder structure.
```bash
my-product-management-system/ my-product-management-system/
├── public/ ├── public/
│ ├── index.html │ ├── index.html
...@@ -49,37 +76,15 @@ my-product-management-system/ ...@@ -49,37 +76,15 @@ my-product-management-system/
│ └── ... │ └── ...
├── package.json ├── package.json
└── ... └── ...
\`\`\` ```
### 3. Editing App.js (15 minutes)
- Modify \`App.js\` to include a welcome message and links to the category and product registration pages.
\`\`\`jsx
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import CategoryFormClass from './components/Category/CategoryFormClass';
import ProductFormClass from './components/Product/ProductFormClass';
function App() {
return (
<Router>
<div className="App">
<h1>Product Management System</h1>
</div>
</Router>
);
}
export default App;
\`\`\`
### 4. Creating Class Components (60 minutes) ### 4. Creating Class Components (30 minutes)
- Deep dive into creating class components. - Deep dive into creating class components.
- Create `CategoryFormClass.js` and `CategoryListClass.js` as class components. - Create `CategoryFormClass.js` and `CategoryListClass.js` as class components.
- Discuss state management, event handling, and lifecycle methods. - Discuss state management, event handling, and lifecycle methods.
CategoryFormClass.js
```bash
\`\`\`jsx
// CategoryFormClass.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { createCategory } from '../../services/ApiCategory'; import { createCategory } from '../../services/ApiCategory';
...@@ -102,7 +107,7 @@ class CategoryFormClass extends Component { ...@@ -102,7 +107,7 @@ class CategoryFormClass extends Component {
}; };
render() { render() {
const { name, description } = this.state; const { name, description } = this.state
return ( return (
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
...@@ -127,10 +132,10 @@ class CategoryFormClass extends Component { ...@@ -127,10 +132,10 @@ class CategoryFormClass extends Component {
} }
export default CategoryFormClass; export default CategoryFormClass;
\`\`\` ```
CategoryListClass.js
```jsx
\`\`\`jsx
// CategoryListClass.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import CategoryFormClass from './CategoryFormClass'; import CategoryFormClass from './CategoryFormClass';
import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory'; import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
...@@ -236,15 +241,14 @@ class CategoryListClass extends Component { ...@@ -236,15 +241,14 @@ class CategoryListClass extends Component {
} }
export default CategoryListClass; export default CategoryListClass;
\`\`\` ```
### 5. Creating Functional Components (60 minutes) ### 5. Creating Functional Components (30 minutes)
- Deep dive into creating functional components with hooks. - Deep dive into creating functional components with hooks.
- Create `CategoryFormFunction.js` and `CategoryListFunction.js` as functional components. - Create `CategoryFormFunction.js` and `CategoryListFunction.js` as functional components.
- Discuss useState and useEffect hooks. - Discuss useState and useEffect hooks.
CategoryFormFunction.js
\`\`\`jsx ```jsx
// CategoryFormFunction.js
import React, { useState } from 'react'; import React, { useState } from 'react';
import { createCategory } from '../../services/ApiCategory'; import { createCategory } from '../../services/ApiCategory';
...@@ -288,10 +292,9 @@ const CategoryFormFunction = ({ fetchCategories }) => { ...@@ -288,10 +292,9 @@ const CategoryFormFunction = ({ fetchCategories }) => {
}; };
export default CategoryFormFunction; export default CategoryFormFunction;
\`\`\` ```
CategoryListFunction.js
\`\`\`jsx ```jsx
// CategoryListFunction.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory'; import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
import './Category.css'; import './Category.css';
...@@ -406,34 +409,85 @@ const CategoryListFunction = () => { ...@@ -406,34 +409,85 @@ const CategoryListFunction = () => {
}; };
export default CategoryListFunction; export default CategoryListFunction;
\`\`\` ```
### 6. Lunch Break (30 minutes)
### 7. Adding CSS (30 minutes) ### 6. Adding CSS (15 minutes)
- Demonstrate how to add and apply CSS in React. - Demonstrate how to add and apply CSS in React.
- Style the category and product forms. - Style the category and product forms.
Category.css *
\`\`\`css ```css
/* Category.css */ form {
form {
margin: 20px; margin: 20px;
} }
input { input {
margin-right: 10px; margin-right: 10px;
} }
\`\`\`
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
}
th {
background-color: #f4f4f4;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f1f1f1;
}
.button {
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.button-delete {
background-color: #ff4d4d;
}
.button-delete:hover {
background-color: #ff1a1a;
}
.button-update {
background-color:blue;
}
.button-update:hover {
background-color: blue;
}
```
### 7. Break (5 minutes)
### 8. Integrating MockAPI for CRUD Operations (60 minutes) ### 8. Integrating MockAPI for CRUD Operations (60 minutes)
- Set up MockAPI for category and product management. - Set up MockAPI for category and product management.
- Perform CRUD operations (Create, Read, Update, Delete) using MockAPI. - Perform CRUD operations (Create, Read, Update, Delete) using MockAPI.
- Url Localhost / Mockapi: 'https://66b1b4381ca8ad33d4f4d9c0.mockapi.io/api/v1/category';
\`\`\`jsx - Discuss Axios/ Await Fectch
// ApiCategory.js ApiCategory.js
```jsx
const apiUrl = 'https://mockapi.io/endpoint'; const apiUrl = 'https://mockapi.io/endpoint';
export const getCategories = () => fetch(apiUrl).then((res) => res.json()); export const getCategories = () => fetch(apiUrl).then((res) => res.json());
export const createCategory = (category) => export const createCategory = (category) =>
fetch(apiUrl, { fetch(apiUrl, {
method: 'POST', method: 'POST',
...@@ -456,77 +510,56 @@ export const updateCategory = (id, category) => ...@@ -456,77 +510,56 @@ export const updateCategory = (id, category) =>
}, },
body: JSON.stringify(category), body: JSON.stringify(category),
}).then((res) => res.json()); }).then((res) => res.json());
\`\`\` ```
### 9. Building Pages for Category and Product Registration (60 minutes) ### 9. Task to Create Product Page (60 minutes)
- Create forms for category and product registration. - Follow category page, task to create product registration page. Can use class / functional component
- Link forms to MockAPI for data submission. - 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';
import { deleteProduct, updateProduct, getProduct } from '../../services/ApiProduct';
import './Product.css';
\`\`\`jsx class ProductList extends Component {
// Example form structure with API integration state = {
const handleSubmit = (event) => { products: [],
event.preventDefault(); isEditing: false,
createCategory({ name: categoryName, description }).then((data) => console.log(data)); currentProduct: { id: '', name: '', description: '', category: '' },
}; };
return (
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Enter category name" />
<button type="submit">Submit</button>
</form>
);
\`\`\`
- Implement similar logic for \`ProductForm.js\`. componentDidMount() {
}
### 10. Building Lists to Display Data (45 minutes) render() {
- Create lists to display categories and products. }
- Fetch data from MockAPI and render it in the components. }
\`\`\`jsx export default ProductList;
// CategoryListFunction.js
import React, { useEffect, useState } from 'react';
import { getCategories } from '../services/ApiCategory';
const CategoryListFunction = () => { ```
const [categories, setCategories] = useState([]);
useEffect(() => {
getCategories().then((data) => setCategories(data));
}, []);
return (
<div>
<h2>Category List</h2>
<ul>
{categories.map((category) => (
<li key={category.id}>{category.name}</li>
))}
</ul>
</div>
);
};
export default CategoryListFunction;
\`\`\`
- Implement similar logic for \`ProductList.js\`.
### 10. Routing Navigation (15 minutes)
### 11. Routing Navigation (15 minutes) - Discus how React Rauter works
- Modify \`App.js\` to include a welcome message and links to the category and product registration pages. - Modify \`App.js\` to include a welcome message and links to the category and product registration pages.
- Step-by-Step Instructions:
#### Step-by-Step Instructions: - **Install React Router:**
1. **Install React Router:**
- Run the following command to install React Router: - Run the following command to install React Router:
\`\`\`bash ```bash
npm install react-router-dom npm install react-router-dom
\`\`\` ```
2. **Modify App.js:** - **Modify App.js:**
- Replace the content of \`App.js\` with the following code: - Replace the content of \`App.js\` with the following code:
\`\`\`jsx ```jsx
import React from 'react'; import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import logo from './logo.svg'; import logo from './logo.svg';
...@@ -558,68 +591,46 @@ export default CategoryListFunction; ...@@ -558,68 +591,46 @@ export default CategoryListFunction;
} }
export default App; export default App;
\`\`\` ```
### 13. Design Content Navigation (15 minutes)
- Modify \`App.js\` to include a welcome message and links to the category and product registration pages.
#### Step-by-Step Instructions:
1. **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';
import logo from './logo.svg';
import './App.css';
import CategoryListClass from './components/Category/CategoryListClass';
import CategoryFormClass from './components/Category/CategoryFormClass';
import CategoryListFunction from './components/Category/CategoryListFunction';
function App() { ### 11. Design Content Navigation (15 minutes)
return ( - Modify \`App.js\` to design topbar,sidebar and contentregistration pages.
<Router> - Step-by-Step Instructions:
<div className="App"> - **Modify App.js:**
<h1>Product Management System</h1> - Replace code to App.js:
<div className="container"> ```jsx
<nav className="sidebar"> .App {
<ul> font-family: sans-serif;
<li> text-align: center;
<Link to="/category">Register Category</Link> display: flex;
</li> flex-direction: column;
<li> height: 100vh;
<Link to="/product">Register Product</Link>
</li>
</ul>
</nav>
<div className="content">
<Routes>
<Route path="/category" element={<CategoryListClass />} />
<Route path="/product" element={<CategoryListFunction />} />
</Routes>
</div>
</div>
</div>
</Router>
);
} }
export default App; ```
\`\`\`
2. **Modify App.css:** - **Modify App.css:**
- Update to add the content of \`App.css\` with the following code: - Add the content of \`App.css\` with the following code:
\`\`\`css ```css
.App { .App {
font-family: sans-serif; font-family: sans-serif;
text-align: center; 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 { .container {
display: flex; display: flex;
height: 100vh; flex-grow: 1;
} }
.sidebar { .sidebar {
...@@ -627,6 +638,7 @@ export default CategoryListFunction; ...@@ -627,6 +638,7 @@ export default CategoryListFunction;
background-color: #f8f9fa; background-color: #f8f9fa;
padding: 15px; padding: 15px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
text-align: left;
} }
.sidebar ul { .sidebar ul {
...@@ -646,14 +658,10 @@ export default CategoryListFunction; ...@@ -646,14 +658,10 @@ export default CategoryListFunction;
.content { .content {
flex-grow: 1; flex-grow: 1;
padding: 20px; padding: 40px;
}
h1 {
margin: 20px;
} }
\`\`\`
```
## Conclusion (15 minutes) ## Conclusion (15 minutes)
...@@ -666,13 +674,44 @@ export default CategoryListFunction; ...@@ -666,13 +674,44 @@ export default CategoryListFunction;
- [MockAPI Documentation](https://mockapi.io/docs) - [MockAPI Documentation](https://mockapi.io/docs)
- [CSS Tricks](https://css-tricks.com/) - [CSS Tricks](https://css-tricks.com/)
- [React Router Documentation](https://reactrouter.com/web/guides/quick-start) - [React Router Documentation](https://reactrouter.com/web/guides/quick-start)
- [Redux Documentation](https://redux.js.org/)
### Advanced Topics
- Discuss state management with Context API.
- 3rd-Party libary like axios,sweertalert,formik,bootstrap/tailwind
- Implementing more complex forms and validation.
- Error handling and debugging tips.
This comprehensive 5-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. ## Prerequisite Topics
- [Explore project files and folders](https://reactjs.org/docs/getting-started.html)
- [Write basic JSX elements](https://reactjs.org/docs/introducing-jsx.html)
- [Practice embedding expressions and adding attributes](https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx)
- [Create functional and class components](https://reactjs.org/docs/components-and-props.html)
- [Pass data via props and set default props](https://reactjs.org/docs/components-and-props.html#props-are-read-only)
- [State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html)
- [Explore basic lifecycle methods in class components](https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class)
- [Use useState to manage state in functional components](https://reactjs.org/docs/hooks-state.html)
- [Event Handling](https://reactjs.org/docs/handling-events.html)
- [Handle button clicks and form submissions](https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers)
- [Practice passing arguments to event handlers](https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers)
- [Implement conditional rendering in components](https://reactjs.org/docs/conditional-rendering.html)
- [Render a list of tasks and add keys to list items](https://reactjs.org/docs/lists-and-keys.html)
- [Create a form to add new tasks](https://reactjs.org/docs/forms.html)
- [Manage form input state](https://reactjs.org/docs/forms.html#controlled-components)
- [Style components using CSS classes and inline styles](https://reactjs.org/docs/faq-styling.html)
## Advanced Topics
- [Building and Using Reusable Component Libraries (axios, sweetalert, formik, bootstrap/tailwind)](https://reactjs.org/docs/reusable-components.html)
- [Forms and Validation / Error handling](https://reactjs.org/docs/forms.html#controlled-components)
- [Complex Forms and Validation](https://formik.org/)
- [Higher-Order Components (HOCs)](https://reactjs.org/docs/higher-order-components.html)
- [Context API](https://reactjs.org/docs/context.html)
- [Advanced State Management](https://redux.js.org/)
- [Get Started with Skeleton Project](https://reactjs.org/docs/getting-started.html)
- [Side Effects and Data Fetching](https://reactjs.org/docs/hooks-effect.html)
- [Performance Optimization (React.memo, React.PureComponent, Code Splitting, and Lazy Loading)](https://reactjs.org/docs/optimizing-performance.html)
- [Advanced Performance Optimization](https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab)
- [GraphQL](https://graphql.org/)
- [Server-Side Rendering (SSR) with Next.js](https://nextjs.org/docs)
- [Animation in React](https://reactcommunity.org/react-transition-group/)
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.
src/components/Category/Category.css
form {
margin: 20px;
}
input {
margin-right: 10px;
}
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment