CRUD Operations in ReactJS Without API: GitHub Code Step-by-Step Example 2024

Posted Apr 22, 2024

In the realm of web development, CRUD operations play a pivotal role in managing data within applications. CRUD, an acronym for Create, Read, Update, and Delete, represents the fundamental actions performed on data in various software systems. This article dives into implementing CRUD operations specifically in ReactJS without relying on an external API, providing a comprehensive step-by-step guide and a GitHub code example.

npm init vite is a convenient tool for setting up a new Vite-powered React.js project. In this guide, we'll walk through the process of implementing CRUD (Create, Read, Update, Delete) operations in a React.js application using npm init vite. By leveraging Vite's fast development server and React's component-based architecture, we can create a dynamic and responsive user interface that interacts with data effectively.

Table of Contents

1. Setting Up a Vite Project
2. Creating Mock Data and State Management
3. Implementing CRUD Operations a. Create (Add Item) b. Read (Display Items) c. Update (Edit Item) d. Delete (Remove Item)
4. Integrating CRUD Functions into the UI
5. GitHub Code
6. Conclusion
7. FAQs

Setting Up a Vite Project

First, ensure you have Node.js and npm (Node Package Manager) installed on your system. Then, use the following commands to create a new Vite-powered React.js project:

npm init vite@latest my-crud-app --template react
cd my-crud-app
npm install

This command initializes a new React.js project named my-crud-app using the Vite template for React.

Creating Mock Data and State Management

Let's set up a mock data source and manage state using React's useState hook. Open the src/App.jsx file and create an initial list of items:

import React, { useState } from "react";

const App = () => {
  const [items, setItems] = useState([
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" },
  ]);

  // CRUD operations will go here

  return <div className="App">{/* Display items and CRUD forms */}</div>;
};

export default App;

Implementing CRUD Operations

Let's add functions to handle each CRUD operation within the App component:

1. Create (Add Item):

const addItem = (name) => {
  const newItem = { id: items.length + 1, name };
  setItems([...items, newItem]);
};

2. Read (Display Items):

const displayItems = items.map((item) => (
  <div key={item.id}>
    <span>{item.name}</span>
    <button onClick={() => updateItem(item.id)}>Edit</button>
    <button onClick={() => deleteItem(item.id)}>Delete</button>
  </div>
));

3. Update (Edit Item):

const updateItem = (id) => {
  const updatedName = prompt("Enter the new name:");
  if (updatedName) {
    const updatedItems = items.map((item) =>
      item.id === id ? { ...item, name: updatedName } : item
    );
    setItems(updatedItems);
  }
};

4. Delete (Remove Item):

const deleteItem = (id) => {
  const updatedItems = items.filter((item) => item.id !== id);
  setItems(updatedItems);
};

Integrating CRUD Functions into the UI

Finally, integrate these CRUD functions into your component's JSX to create a user interface for interacting with the data. Update the return statement in the App component:

const handleSubmit = (e) => {
  e.preventDefault();
  addItem(e.target.itemName.value);
};

return (
  <div className="App">
    {displayItems}
    <form onSubmit={handleSubmit}>
      <input type="text" name="itemName" placeholder="Enter item name" />
      <button type="submit">Add Item</button>
    </form>
  </div>
);

Running the Application

To run your Vite-powered React.js application, use the following command:

npm run dev

This command starts the development server, allowing you to view and interact with your CRUD-enabled React application in the browser.

GitHub Code

🔗 Click here

Conclusion

By following this guide, you've learned how to set up a Vite-powered React.js project using npm init vite and implement CRUD operations within your application. Combining Vite's speed with React's flexibility enables you to create powerful web applications with efficient data management capabilities. Whether you're building a small project or a large-scale application, mastering CRUD operations in React.js is essential for developing robust and user-friendly interfaces.

FAQs

Q1: How do you do CRUD operations in ReactJS?

• CRUD operations in ReactJS involve creating components for each operation (Create, Read, Update, Delete), managing state using hooks like useState, designing forms for user input, and implementing logic to interact with data within the application.

Q1: Is React good for CRUD?

• Yes, React is well-suited for CRUD operations due to its component-based architecture, state management capabilities, and efficient rendering, making it easier to build dynamic and interactive user interfaces for data management tasks.

Q2: What does CRUD stand for in React?

• In React, CRUD stands for Create, Read, Update, and Delete, which are fundamental operations used to manage data within applications.

Q3: What are the operations of CRUD?

• The operations of CRUD are as follows:
  • Create: Adding new data entries.
  • Read: Retrieving existing data for display.
  • Update: Modifying existing data entries.
  • Delete: Removing unwanted data from the system.

Q4: What is the CRUD operation in React hooks?

• In React hooks, CRUD operations involve using useState to manage component state for data manipulation, useEffect for handling side effects such as data fetching, and other hooks like useContext or useReducer for more complex state management scenarios.

Q5: What is Axios in ReactJS?

• Axios is a popular JavaScript library used for making HTTP requests in web applications, including ReactJS. It simplifies the process of sending asynchronous requests to APIs and handling responses.

Q6: What is CRUD for API?

• CRUD for API refers to implementing Create, Read, Update, and Delete operations in API endpoints, allowing clients (such as React applications) to interact with backend data through HTTP requests.

Q9: What is REST API CRUD operations?

• REST API CRUD operations adhere to the principles of Representational State Transfer (REST), where HTTP methods like GET (Read), POST (Create), PUT (Update), and DELETE (Delete) are used to perform data manipulation tasks on a server-side database or resource.