In this blog, we’ll demonstrate how to implement CRUD operations in a React frontend that communicates with a .NET Core Web API backend for managing a simple Product model.

Steps to Implement CRUD Operations in React

1. Set Up React App:

First, create a React application using Create React App.

1npx create-react-app react-crud
2cd react-crud
3npm start

2. Install Axios:
We will use Axios for making HTTP requests to the API.

1npm install axios

3. Create a Product Component:
Create a Product.js component in the src folder to manage products.

1import React, { useState, useEffect } from 'react';

4.App.js:
Modify the App.js to include the Product component.

1import React from 'react';
2import Product from './Product';
3
4function App() {
5  return (
6    <div className="App">
7      <h1>CRUD Operations in React</h1>
8      <Product />
9    </div>
10  );
11}
12
13export default App;

5. Run the Application:
Start your React app with:

1npm start

6.Test CRUD Operations:

Create: Add a new product by filling the form and clicking “Create Product”.

Read: The list of products will be displayed when fetched from the API.

Update: Edit a product and click “Update Product” to update the product in the list.

Delete: Remove a product by clicking the “Delete” button next to the product.

Conclusion

You now have a simple React application that performs CRUD operations on a .NET Core Web API. You can enhance this by adding error handling, input validation, or more complex features.