import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import From from './From.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Form/>
  </StrictMode>,
)

Code For Create , Read, Update ,Delete Part In React Js

import React, { useEffect, useState } from 'react';
import './form.css';
import Card from '../card/Card';

function Form() {
    const [allUser, setAllUser] = useState(() => {
        const storedUsers = localStorage.getItem('allUsers');
        return storedUsers ? JSON.parse(storedUsers) : [];
    });

    const [editing, setEditing] = useState(false);
    const [findKey, setFindKey] = useState(null);
    const [user, setUser] = useState({
        first_name: "",
        last_name: "",
        email: "",
    });

    useEffect(() => {
        localStorage.setItem('allUsers', JSON.stringify(allUser));
    }, [allUser]);

    const handleChange = (e) => {
        setUser({
            ...user,
            [e.target.name]: e.target.value,
        });
    };

    const formSubmit = (e) => {
        e.preventDefault();

        if (!editing) {
            setAllUser([...allUser, user]);
        } else {
            allUser[findKey] = user; // Update the specific user
            setAllUser([...allUser]); // Trigger a re-render with updated array
            setEditing(false);
        }

        setUser({
            first_name: "",
            last_name: "",
            email: "",
        });
    };

    const updateUser = (index) => {
        const data = allUser[index];
        setUser({
            first_name: data.first_name,
            last_name: data.last_name,
            email: data.email,
        });
        setEditing(true);
        setFindKey(index);
    };

    const deleteUser = (index) => {
        const updatedUsers = allUser.filter((_, i) => i !== index);
        setAllUser(updatedUsers);
    };

    return (
        <>
            <form onSubmit={formSubmit}>
                <div className='main_form'>
                    <label>First Name</label>
                    <input
                        name='first_name'
                        type='text'
                        placeholder='First Name'
                        value={user.first_name}
                        onChange={handleChange}
                    />
                    <label>Last Name</label>
                    <input
                        name='last_name'
                        type='text'
                        placeholder='Last Name'
                        value={user.last_name}
                        onChange={handleChange}
                    />
                    <label>Email</label>
                    <input
                        name='email'
                        type='email'
                        placeholder='Email'
                        value={user.email}
                        onChange={handleChange}
                    />
                </div>
                <button type='submit'>{editing ? 'Update User' : 'Save User'}</button>
            </form>
            <ul>
                {allUser.map((item, index) => (
                    <li key={index}>
                        <Card
                            user={item}
                            index={index}
                            updateUser={updateUser}
                            deleteUser={deleteUser}
                        />
                    </li>
                ))}
            </ul>
        </>
    );
}

export default Form;

CSS For Create and Read Update Delete

.main_form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
}

.main_form label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
}

.main_form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.main_form input:focus {
    border-color: #007BFF;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
}

.main_form input::placeholder {
    color: #aaa;
}

.main_form input[type="email"] {
    font-style: italic;
}

.main_form input:invalid {
    border-color: red;
}

.main_form input:valid {
    border-color: green;
}

.main_form label:first-of-type {
    margin-top: 0;
}

/* Add responsiveness */
@media (max-width: 600px) {
    .main_form {
        padding: 15px;
    }

    .main_form input {
        font-size: 13px;
    }
}

Card to show Read Data

import React from 'react';
import './Card.css';

function Card({user,index,updateUser,deleteUser}) {

  return (
    <div className="card">
      <h2 className="card-title">User Information</h2>
      <div className="card-content">
        <p>
          <strong>First Name:</strong> {user.first_name}
        </p>
        <p>
          <strong>Last Name:</strong> {user.last_name}
        </p>
        <p>
          <strong>Email:</strong> {user.email}
        </p>
      </div>
      <div className='btndiv'>
        <button onClick={()=>{updateUser(index)}}>Edit</button>
        <button onClick={()=>{deleteUser(index)}}>Delete</button>
      </div>
    </div>
  );
}

export default Card;

/* Card.css */

.card {
    width: 300px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    text-align: left;
  }

  .card-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
  }

  .card-content p {
    margin: 10px 0;
    font-size: 14px;
    color: #555;
  }

  .card-content strong {
    color: #222;
  }
.btndiv{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 40px;
}