Hey everyone Let’s talk about how to make a crud operation in react js and tailwinds with local storage from scratch. It’s a simple but useful project for everyone who is building the projects. The create read update delete operations are used in each application, so you can learn how to use react js and tailwinds to build it.
CRUD operations—create, learn, modify, and delete—are necessary for many net tasks. They allow clients to work with information dynamically, making workflows even more useful and user-friendly. The combination of React JS and TailwindCSS simplifies its event approach by combining high efficiency with the sleek design.
There are four migration requirements in a CRUD operation. “Create” means next to another fact, just like putting down a piece of paper or a current object. “Learn” includes retrieving and displaying information, for example, lists of objects. “Replace” replaces current information, such as changing merchandise information, just as “Delete” removes data from stock or database.
Crud Operation in React JS
Before moving the codes I’m going to share with you the video that I made, the video is more useful for you than the codes. You need to watch the video till to end.
I hope the video tutorial is useful for you, if you face any problem during the video you can check it the codes that are used to build the crud operation in React JS.
React JS is a JavaScript library that simplifies building customer interfaces. Its issue-primarily based shape allows builders to reuse additives in their code, whereas state administration ensures that records adjustments are without delay mirrored in the consumer interface. The virtual DOM additionally improves performance by way of updating entirely the required additives of a web page.
You May Also Like:
- Building a Responsive Admin Dashboard in React JS
- How to Make Portfolio Website in React JS
- Search Bar Filter in React JS with API
- How to Build Weather App in React JS
- How to Make a Quiz App in React JS
First of All, you need to build the react project using Vite, once you do that the next thing you need to reset the all codes that are default. Then you need to put the below-mentioned codes inside the App.jsx
import React from "react";
import CrudApp from "./components/CrudApp";
function App() {
return (
<div className="flex justify-center items-center h-screen">
<CrudApp />
</div>
);
}
export default App;
Then you need to build a CrudApp component, Let’s see the component codes below.
import React, { useEffect, useState } from "react";
import Form from "./Form";
import Table from "./Table";
function CrudApp() {
const [items, setItems] = useState([]);
const [currentItem, setCurrentItem] = useState(null);
// load data from local storage
useEffect(() => {
const storedItems = JSON.parse(localStorage.getItem("items"));
if (storedItems) {
setItems(storedItems);
}
}, []);
// Save Data to local storage
useEffect(() => {
localStorage.setItem("items", JSON.stringify(items));
}, [items]);
// Add the Record
const addItem = (item) => {
if (currentItem) {
const updateItems = items.map((i) =>
i.id === currentItem.id ? item : i
);
setItems(updateItems);
setCurrentItem(null);
} else {
setItems([...items, { id: Date.now(), ...item }]);
}
};
// delete the record
const deleteItem = (id) => {
const updateItems = items.filter((item) => item.id !== id);
setItems(updateItems);
};
// update or edit the record
const editItem = (item) => {
setCurrentItem(item);
};
return (
<div className="w-1/2 bg-[#1d293d] shadow rounded py-10 px-2">
<h2 className="text-center text-4xl/9 font-bold tracking-tighter text-white">
Crud App
</h2>
<Form addItem={addItem} currentItem={currentItem} />
<Table items={items} deleteItem={deleteItem} editItem={editItem} />
</div>
);
}
export default CrudApp;
in CrudApp the component has all the functions that are used to perform the operations such as create read update and delete operations with local storage, also has two more components such <Form/> and <Table/>. Let’s look at them one by one component.
import React, { useEffect, useState } from "react";
function Form({ addItem, currentItem }) {
const [Product, setProduct] = useState("");
const [Price, setPrice] = useState(null);
const [Status, setStatus] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
if (!Product.trim() || !Price.trim() || !Status.trim()) return;
addItem({ id: Date.now(), Product, Price, Status });
setProduct("");
setPrice("");
setStatus("");
};
useEffect(() => {
if (currentItem) {
setProduct(currentItem.Product);
setPrice(currentItem.Price);
setStatus(currentItem.Status);
}
}, [currentItem]);
return (
<form onSubmit={handleSubmit}>
<div className="flex justify-between m-10">
<input
type="text"
placeholder="Product Name"
className="py-1.5 px-3 shadow rounded"
value={Product}
onChange={(e) => setProduct(e.target.value)}
/>
<input
type="text"
placeholder="Price"
className="py-1.5 px-3 shadow rounded"
value={Price}
onChange={(e) => setPrice(e.target.value)}
/>
<input
type="text"
placeholder="Status"
className="py-1.5 px-3 shadow rounded"
value={Status}
onChange={(e) => setStatus(e.target.value)}
/>
<button
type="submit"
className="h-10 py-1 px-3 font-semibold rounded border border-slate-200 text-slate-600 bg-white active: scale-95"
>
{currentItem ? "Update" : "Save"}
</button>
</div>
</form>
);
}
export default Form;
Let’s see the final component <Table/> that have displayed the records inside the table and also have buttons used to perform the operations such as edit and delete the record in the same page.
import React from "react";
function Table({ items, deleteItem, editItem }) {
return (
<table className="shadow-lg bg-white mx-auto font-[poppins] w-[860px] rounded">
<tr>
<th className="bg-zinc-100 text-start px-4 py-3">ID</th>
<th className="bg-zinc-100 text-start px-4 py-3">Product Name</th>
<th className="bg-zinc-100 text-start px-4 py-3">Price</th>
<th className="bg-zinc-100 text-start px-4 py-3">Status</th>
<th className="bg-zinc-100 text-start px-4 py-3">Action</th>
</tr>
{items.length > 0 ? (
items.map((item, indx) => (
<tr key={indx}>
<td className="px-4 py-4">{indx + 1}</td>
<td className="px-4 py-1">{item.Product}</td>
<td className="px-4 py-1">${item.Price}</td>
<td className="px-4 py-1">{item.Status}</td>
<td className="px-4 py-4">
<button
type="button"
className="bg-green-700 text-white px-4 py-1.5 rounded active:scale-95 mr-5"
onClick={() => editItem(item)}
>
Edit
</button>
<button
type="button"
className="bg-red-700 text-white px-4 py-1.5 rounded active:scale-95 mr-5"
onClick={() => deleteItem(item.id)}
>
Delete
</button>
</td>
</tr>
))
) : (
<tr> No Record Found</tr>
)}
{/* <td className="px-4 py-4">1</td>
<td className="px-4 py-4">Mouse</td>
<td className="px-4 py-4">350</td>
<td className="px-4 py-4">Stocks</td>
<td className="px-4 py-4">
<button
type="submit"
className="bg-green-700 text-white px-4 py-1.5 rounded active:scale-95 mr-5"
>
Edit
</button>
<button
type="submit"
className="bg-red-700 text-white px-4 py-1.5 rounded active:scale-95 mr-5"
>
Edit
</button>
</td> */}
</table>
);
}
export default Table;
TailwindCSS is a software-first CSS framework that makes styling short and constant. It offers predefined lessons to create responsive designs without writing customized CSS. Through using those classes, builders can construct clear and expert interfaces immediately of their HTML or JSX.
To build CRUD operations in software, you first should install a React assignment and combine TailwindCSS. This combination gives an effective foundation for growing dynamic and responsive features.
Begin with the aid of a manner of designing the consumer interface. With TailwindCSS, you’ll be capable of rapidly creating layouts that encompass a header for the call, a type for together with or updating facts, and a desk or tick list to reveal the objects. Every access could have options for reinforcing or deleting.
Managing information in React is finished using nation. For CRUD operations, maintain a nation that holds the checklist of things. When data is added, up to date, or deleted, this kingdom is updated, and the adjustments are right now mirrored inside the consumer interface.
So as to add new items, present a kind of area where clients can input details. When the shape is submitted, the statistics is introduced to the checklist and updated within the utility’s state. For showing items, use a structure equivalent to a desk or tick list to cutting-edge the statistics honestly. TailwindCSS guarantees the layout stays visually interesting and responsive.
Enhancing items includes allowing clients to select an access and replace its details. Pre-fill the shape with the existing records, and allow the purchaser make modifications, after which replace the state. Deleting gadgets calls for a easy preference to do away with the selected data from the checklist, which updates the state and the consumer interface.
Utilizing React JS and TailwindCSS together presents numerous advantages. React handles performance and dynamic updates, at the same time as TailwindCSS ensures that the tool is plain and responsive. This set could also be extra inexperienced to create customizable and today’s talents, from available amusing managers to higher superior techniques to push fact.
By doing the middle of these steps, builders can results accumulate verbal alternate competencies in terms of any pleasant trendy efficiency and layout. Utilizing CRUD is the pinnacle to improving the Web, and using React and TailwindCSS makes this technique environmentally great and thrilling.
How to Deploy React Project on Hostinger
Once you developed the project, you can move it to the server Once you do that then everyone easily see your project around the world. So, let’s see the video tutorial that helps you to understand how to upload your react project on the server.
That’s it for building and uploading the project form scratch. I hope this tutorial is helpful and beneficial for you.
