This project demonstrates how to perform CRUD (Create, Read, Update, Delete) operations in a table using various popular React libraries and tools. It utilizes React-Table for data presentation and management, Formik & Yup for form handling and validation, JSON Server for the API, React Icons for icons, and React Bootstrap for styling.
Before you begin, ensure you have met the following requirements:
- Node.js and npm installed (at least Node.js version 14 or higher)
- Familiarity with React and basic JavaScript
- Git installed (optional, for cloning the repository)
To get this project up and running on your local machine, follow these steps:
-
Clone the repository (if you haven't already):
git clone https://github.com/mateen-mahi/react-table-intermediate1.git
Install project dependencies:
Start the development server:
In a separate terminal, start the JSON Server for the API:
- CRUD Operations: Easily perform Create, Read, Update, and Delete operations in a table.
- Form Handling: Utilize Formik & Yup for form validation and handling.
- Customizable Design: Customize the application's design to match your preferences.
- Error Handling: Gracefully handle errors that may occur during operations.
- Performance Optimization: Minimize unnecessary re-renders to improve performance.
/src: Main application source code./src/components: React components used in the project./data: JSON file used by JSON Server as the data source.
Feel free to customize the project to meet your specific requirements. Modify styles, add new features, or integrate additional libraries as needed.
Contributions are welcome! If you'd like to contribute to this project, follow the standard GitHub workflow:
- Fork the repository.
- Create a feature branch.
- Make your changes.
- Submit a pull request.