Introduction:

In the world of web development, CRUD (Create, Read, Update, Delete) operations are fundamental for interacting with data. React, with its component-based architecture and declarative syntax, is an ideal framework for building dynamic user interfaces. In this tutorial, we’ll walk through the process of building a CRUD (Create, Read, Update, Delete) application using React, guiding beginners through each step.

Prerequisites:

Before diving into the tutorial, make sure you have a basic understanding of HTML, CSS, and JavaScript. Additionally, you’ll need Node.js installed on your machine to set up the React project. No prior experience with React is required.

Getting Started:

To start, let’s set up a new React project using Vite, a popular tool for bootstrapping React applications. Open your terminal and run the following command:

npm create vite@latest crud-app

Select a framework: React

Select a variant: Javascript

This command will create a new directory named crud-app and set up a basic React project structure inside it.

Next, navigate into the project directory:

cd crud-app

Install dependencies:

npm install

Run the project: npm run dev

Click on local host website link ( should look something like this: http://localhost:3001/ )

Now, let’s install React Router, a library for handling client-side routing in React applications:

npm install react-router-dom

Part 1: Setting Up the Project Structure

In the src directory of your project, create four new files: StudentList.jsx, StudCreate.jsx, StudDetails.jsx, and StudEdit.jsx. These files will represent different components of our CRUD application.

// src/StudentList.jsx
import React from 'react';

const StudentList = () => {
  // Component logic goes here
};

export default StudentList;

Repeat the above process to create the StudCreate, StudDetails, and StudEdit components.

Part 2: Implementing the Student List

Now, let’s implement the StudentList component to display a list of students. We’ll use JSON Server to simulate a backend API. First, install JSON Server:

npm install -g json-server

Create a new file named db.json in the root of your project, and populate it with some sample data:

{
  "students": [
    { "id": 1, "name": "John Doe", "subject": "Math", "grade": "A" },
    { "id": 2, "name": "Jane Smith", "subject": "Science", "grade": "B" },
    // Add more sample data here
  ]
}

Now, start the JSON Server:

json-server --watch db.json --port 8000

In your StudentList component, fetch the student data from the JSON Server:

// src/StudentList.jsx
import React, { useState, useEffect } from 'react';

const StudentList = () => {
  const [students, setStudents] = useState([]);

  useEffect(() => {
    fetch('http://localhost:8000/students')
      .then((res) => res.json())
      .then((data) => setStudents(data))
      .catch((error) => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h2>Student List</h2>
      <ul>
        {students.map((student) => (
          <li key={student.id}>{student.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default StudentList;

Conclusion:

In this tutorial, we’ve covered the initial setup and implementation of the Student List component for our CRUD application. Stay tuned for the next part of the tutorial, where we’ll add functionality for creating, updating, and deleting student records.

Stay tuned for more updates and don’t forget to explore the full source code on GitHub (will update with github link, as soon as the project is completed)!

Next Steps:

In the next part of the tutorial, we’ll add functionality for creating, updating, and deleting student records. We’ll also enhance the user experience with client-side routing and improved styling.

Stay with us

---