Integrating a [REST API](/courses/expressjs) with [React](/courses/reactjs) means sending HTTP requests to a backend and using the returned data to update the user interface. A typical [React](/courses/reactjs) application communicates with endpoints such as: ```text GET /api/products GET /api/products/123 POST /api/products PATCH /api/products/123 DELETE /api/products/123 ``` ### Basic REST API Flow ```text React Component ↓ HTTP request ↓ Backend REST API ↓ Database / business logic ↓ JSON response ↓ React updates UI ``` ### Fetching Data with fetch ```jsx import { useEffect, useState } from "react"; function ProductList() { const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { async function loadProducts() { try { setLoading(true); setError(null); const response = await fetch("/api/products"); if (!response.ok) { throw new Error( `Request failed with ${response.status}` ); } const data = await response.json(); setProducts(data); } catch (error) { setError(error.message); } finally { setLoading(false); } } loadProducts(); }, []); if (loading) { return

Loading products...

; } if (error) { return

Unable to load products.

; } if (products.length === 0) { return

No products found.

; } return (

{product.name}

); } ``` ### Important: fetch Does Not Reject Every HTTP Error A request returning: ```text 404 Not Found 500 Internal Server Error ``` can still produce a resolved `fetch` Promise. Therefore check: ```javascript if (!response.ok) { throw new Error("Request failed"); } ``` ### Creating Data with POST ```javascript async function createProduct(product) { const response = await fetch("/api/products", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(product) }); if (!response.ok) { throw new Error("Unable to create product"); } return response.json(); } ``` Usage: ```jsx async function handleCreate() { try { const product = await createProduct({ name: "Keyboard", price: 2500 }); setProducts((products) => [ product, ...products ]); } catch (error) { setError(error.message); } } ``` ### Updating Data A partial update often uses `PATCH`: ```javascript async function updateProduct(id, changes) { const response = await fetch( `/api/products/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(changes) } ); if (!response.ok) { throw new Error("Unable to update product"); } return response.json(); } ``` ### Deleting Data ```javascript async function deleteProduct(id) { const response = await fetch( `/api/products/${id}`, { method: "DELETE" } ); if (!response.ok) { throw new Error("Unable to delete product"); } } ``` ### Keep Request Logic Organized As an application grows, avoid writing full `fetch` implementations inside every UI component. Instead: ```text Component ↓ API/service function ↓ REST API ``` For example: ```javascript // api/products.js export async function getProducts() { const response = await fetch("/api/products"); if (!response.ok) { throw new Error("Unable to load products"); } return response.json(); } ``` Then the component focuses on UI behavior rather than HTTP configuration. ### REST Data Is Often Server State Data such as: ```text Products Users Articles Comments Orders ``` comes from a server and can become stale independently from the current React component. Larger applications may therefore use tools that provide: ```text Caching Deduplication Refetching Invalidation Mutation handling Loading/error states ``` instead of manually rebuilding those features around every request. ### Related Questions to Learn More This category focuses on integration patterns. For deeper coverage of fetching behavior, see these previously covered questions: ```text Data Fetching in React → How Do You Fetch API Data with the Fetch API in React? → Fetch API vs Axios in React: What Is the Difference? → How Do You Handle Loading, Error, Empty, and Success States When Fetching Data in React? → How Do You Cancel API Requests and Prevent Race Conditions in React? → What Is Data Caching in React and Why Is It Important? Error Handling → How Do You Handle API Errors and Display Useful Fallback UI in React? ``` ### Interview-Ready Answer React integrates with [REST APIs](/courses/expressjs) by sending HTTP requests through APIs such as `fetch`, parsing the response, and storing the resulting data in the appropriate UI or server-state layer. Applications should handle loading, success, empty, and error states, check HTTP status explicitly, organize reusable request logic outside large components, and use caching or server-state tools when data synchronization becomes complex.