Steps to Create the Application
1. Set Up the Development Environment
First, make sure you have Node.js and npm installed. Use the following commands to check:
node -v
npm -v
If not installed, download and install Node.js from nodejs.org.
2. Create a React App
To create a new React project, use the following command:
npx create-react-app crud-app
Navigate to the project directory:
cd crud-app
Start the development server:
npm start
3. Design the Application Structure
For a simple CRUD application, we need the following components:
- App Component: The root component of the application.
- AddItem Component: To add new items.
- ItemList Component: To display the list of items.
- EditItem Component: To edit existing items.
4. Implement CRUD Operations
Step 1: Create State for Managing Data In the App.js file, create a state to manage the list of items. Use the useState hook to initialize and update the data.
import React, { useState } from "react";
import AddItem from "./components/AddItem";
import ItemList from "./components/ItemList";
function App() {
const [items, setItems] = useState([]);
// Function to add a new item
const addItem = (newItem) => {
setItems([...items, newItem]);
};
// Function to delete an item
const deleteItem = (id) => {
setItems(items.filter((item) => item.id !== id));
};
// Function to update an item
const updateItem = (id, updatedItem) => {
setItems(items.map((item) => (item.id === id ? updatedItem : item)));
};
return (
<div>
<h1>CRUD Operations in ReactJS</h1>
<AddItem addItem={addItem} />
<ItemList items={items} deleteItem={deleteItem} updateItem={updateItem} />
</div>
);
}
export default App;
Step 2: Add New Items Create the AddItem component to allow users to add new items.
import React, { useState } from "react";
function AddItem({ addItem }) {
const [input, setInput] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
if (input.trim()) {
addItem({ id: Date.now(), name: input });
setInput("");
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Add an item"
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<button type="submit">Add</button>
</form>
);
}
export default AddItem;
Step 3: Display Items Create the ItemList component to display all items and provide options to edit or delete them.
import React from "react";
function ItemList({ items, deleteItem, updateItem }) {
return (
<ul>
{items.map((item) => (
<li key={item.id}>
{item.name}
<button onClick={() => deleteItem(item.id)}>Delete</button>
<button onClick={() => updateItem(item.id, { ...item, name: "Updated Name" })}>Edit</button>
</li>
))}
</ul>
);
}
export default ItemList;
Step 4: Edit Items To edit items, you can modify the updateItem function in the App.js file to accept user input for updating item details dynamically.
Output Example: When you add, update, or delete an item, the list updates dynamically on the screen. This demonstrates the power of React’s state management.
Frequently Asked Questions
What is the role of state in ReactJS CRUD operations?
State in ReactJS is used to manage dynamic data. It helps track and update the list of items in real-time during CRUD operations.
Can I use APIs for CRUD operations in ReactJS?
Yes, APIs are commonly used for CRUD operations. You can integrate React with a backend service to fetch, update, and delete data using HTTP requests.
What are some libraries to simplify CRUD operations in ReactJS?
Popular libraries like Redux and React Query can simplify state management and data fetching, making CRUD operations easier to implement.
Conclusion
In this article, we discussed how to implement CRUD operations in ReactJS. We started by setting up the development environment, creating a React application, and designing the application structure. Then, we implemented Create, Read, Update, and Delete functionalities step by step. These operations form the backbone of any interactive React application.
518+ registered 
