CRUD Using AXIOS API - React Router & Bootstrap | React Tutorial

📌 What is CRUD with Axios?

Overview

In this tutorial, we will build a CRUD application in React using Axios for API requests, React Router for navigation, and Bootstrap for styling.

We'll use MockAPI.io as a free online REST API service to store and manage data.

1. Setting up Mock API

Go to mockapi.io and create a free account. Create a new project and a CRUD resource (e.g., /crud) to manage users.

You'll get a unique API endpoint like: https://xxxx.mockapi.io/crud

2. Project Setup

Initialize a new React project with Vite:

npm create vite@latest my-crud-app

Install dependencies:

npm install axios react-router-dom bootstrap

Include Bootstrap in index.html:

React Playground

import React from "react";
import { Routes, Route, Link } from "react-router-dom";
import Create from "./Create.jsx";
import Read from "./Read.jsx";
import Edit from "./Edit.jsx";

function App() {
  return (
    <div className="container mt-4">
      <h2 className="text-center mb-4">CRUD Using Axios</h2>
      <nav className="mb-3">
        <Link className="btn btn-primary me-2" to="/create">Create</Link>
        <Link className="btn btn-success me-2" to="/read">Read</Link>
      </nav>
      <Routes>
        <Route path="/create" element={<Create />} />
        <Route path="/read" element={<Read />} />
        <Route path="/edit/:id" element={<Edit />} />
      </Routes>
    </div>
  );
}

export default App;

Open Sandbox

react

Nearby lessons