Blog

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.

npx create-react-app react-crud
cd react-crud
npm start

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

npm install axios

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

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

const API_URL = 'http://localhost:5000/api/products';

const Product = () => {
  const [products, setProducts] = useState([]);
  const [product, setProduct] = useState({ id: '', name: '', description: '', price: '' });

  // Fetch Products
  useEffect(() => {
    axios.get(API_URL)
      .then(response => setProducts(response.data))
      .catch(error => console.log(error));
  }, []);

  // Create Product
  const createProduct = () => {
    axios.post(API_URL, product)
      .then(response => {
        setProducts([...products, response.data]);
        setProduct({ id: '', name: '', description: '', price: '' });
      })
      .catch(error => console.log(error));
  };

  // Update Product
  const updateProduct = () => {
    axios.put(`${API_URL}/${product.id}`, product)
      .then(() => {
        setProducts(products.map(p => p.id === product.id ? product : p));
        setProduct({ id: '', name: '', description: '', price: '' });
      })
      .catch(error => console.log(error));
  };

  // Delete Product
  const deleteProduct = id => {
    axios.delete(`${API_URL}/${id}`)
      .then(() => setProducts(products.filter(p => p.id !== id)))
      .catch(error => console.log(error));
  };

  return (
    <div>
      <h2>Product Management</h2>

      {/* Form to Create or Update Product */}
      <input
        type="text"
        value={product.name}
        onChange={e => setProduct({ ...product, name: e.target.value })}
        placeholder="Product Name"
      />
      <input
        type="text"
        value={product.description}
        onChange={e => setProduct({ ...product, description: e.target.value })}
        placeholder="Description"
      />
      <input
        type="number"
        value={product.price}
        onChange={e => setProduct({ ...product, price: e.target.value })}
        placeholder="Price"
      />
      <button onClick={product.id ? updateProduct : createProduct}>
        {product.id ? 'Update Product' : 'Create Product'}
      </button>

      <h3>Product List</h3>
      <ul>
        {products.map(p => (
          <li key={p.id}>
            {p.name} - ${p.price}
            <button onClick={() => deleteProduct(p.id)}>Delete</button>
            <button onClick={() => setProduct(p)}>Edit</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Product;

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

import React from 'react';
import Product from './Product';

function App() {
  return (
    <div className="App">
      <h1>CRUD Operations in React</h1>
      <Product />
    </div>
  );
}

export default App;

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

npm 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.