How to get data from database using asp.net core web api

Question

i have a crud operation in asp.net core web api.i check all api on postman all doing work fine. Now i want to connect this project with react and perform all operation using react please someone help me right now.... Thank you

Tuhin Paul · Answer

Axios is a popular library for making HTTP requests in React. Install it by running npm install axios apiService.js import axios from 'axios'; const API_URL = 'https://your-api-url.com/api'; // Replace with your actual API URL export const getItems = () => { return axios.get(`${API_URL}/items`); }; export const getItemById = (id) => { return axios.get(`${API_URL}/items/${id}`); }; export const createItem = (data) => { return axios.post(`${API_URL}/items` data); }; export const updateItem = (id data) => { return axios.put(`${API_URL}/items/${id}` data); }; export const deleteItem = (id) => { return axios.delete(`${API_URL}/items/${id}`); }; In your React components you can now use the functions from apiService.js to perform CRUD operations. import React { useEffect useState } from 'react'; import { getItems createItem updateItem deleteItem } from './apiService'; const App = () => { const [items setItems] = useState([]); const [newItem setNewItem] = useState(''); useEffect(() => { fetchItems(); } []); const fetchItems = async () => { try { const response = await getItems(); setItems(response.data); } catch (error) { console.error('Error fetching items' error); } }; const handleCreate = async () => { try { await createItem({ name: newItem }); setNewItem(''); fetchItems(); } catch (error) { console.error('Error creating item' error); } }; const handleUpdate = async (id) => { try { await updateItem(id { name: 'Updated Name' }); fetchItems(); } catch (error) { console.error('Error updating item' error); } }; const handleDelete = async (id) => { try { await deleteItem(id); fetchItems(); } catch (error) { console.error('Error deleting item' error); } }; return ( Items setNewItem(e.target.value)} /> Add Item {items.map((item) => ( {item.name} handleUpdate(item.id)}>Update handleDelete(item.id)}>Delete ))} ); }; export default App;

Aman Gupta · Answer

Hi Soheb To connect your ASP.NET Core Web API with a React frontend and perform CRUD operations follow these steps: Create a Service to Handle API Calls Create a file called apiService.js in your src folder import axios from 'axios'; const API_URL = 'http://localhost:5000/api'; // Replace with your API base URL export const getItems = async () => { return await axios.get(`${API_URL}/items`); }; export const getItemById = async (id) => { return await axios.get(`${API_URL}/items/${id}`); }; export const createItem = async (data) => { return await axios.post(`${API_URL}/items` data); }; export const updateItem = async (id data) => { return await axios.put(`${API_URL}/items/${id}` data); }; export const deleteItem = async (id) => { return await axios.delete(`${API_URL}/items/${id}`); }; Implement CRUD Operations in React In your App.js or any component where you want to perform CRUD operations import the service and use it. import React { useState useEffect } from 'react'; import { getItems createItem updateItem deleteItem } from './apiService'; function App() { const [items setItems] = useState([]); const [newItem setNewItem] = useState(''); useEffect(() => { loadItems(); } []); const loadItems = async () => { const response = await getItems(); setItems(response.data); }; const handleCreate = async () => { await createItem({ name: newItem }); loadItems(); setNewItem(''); }; const handleUpdate = async (id) => { await updateItem(id { name: 'Updated Item' }); loadItems(); }; const handleDelete = async (id) => { await deleteItem(id); loadItems(); }; return ( Items {items.map(item => ( {item.name} handleUpdate(item.id)}>Update handleDelete(item.id)}>Delete ))} setNewItem(e.target.value)} /> Add Item ); } export default App; Test Your Application Run your React app using npm start Ensure your ASP.NET Core Web API is running and test your application by performing CRUD operations from the React frontend. CORS Configuration (if needed) If you face CORS issues ensure your ASP.NET Core Web API allows requests from your React app. In your Startup.cs  configure CORS: This setup should get you started with integrating React with your ASP.NET Core Web API for performing CRUD operations. Let me know if you need further assistance!

Soheb Ahmad · Answer

Thank You Tuhin PaulAman Gupta