Операції CRUD у React JS - javascript.org.ua

Вітаю всіх! Давайте поговоримо про те, як створити операції CRUD в React JS і Tailwind з використанням Local Storage з нуля. Це простий, але корисний проект для всіх, хто займається розробкою. Операції create, read, update, delete використовуються в кожному додатку, тому ви можете навчитися, як використовувати React JS і Tailwind для їх реалізації.

Операції CRUD — створення, читання, оновлення та видалення — необхідні для багатьох веб-завдань. Вони дозволяють клієнтам динамічно працювати з інформацією, роблячи робочі процеси більш корисними та зручними для користувачів. Поєднання React JS і TailwindCSS спрощує цей підхід, поєднуючи високу ефективність із стильним дизайном.

Є чотири основні вимоги до міграції в операціях CRUD. "Create" (Створення) означає додавання нового елемента, наприклад, записування нового об'єкта або документа. "Learn" (Читання) включає виведення та відображення інформації, наприклад, списків об'єктів. "Replace" (Оновлення) замінює поточну інформацію, наприклад, зміну товару, а "Delete" (Видалення) видаляє дані з бази даних чи сховища.

Операції CRUD в React JS

Перед тим як перейти до коду, я поділюся з вами відео, яке я зробив. Це відео буде більш корисним для вас, ніж сам код. Перегляньте відео до кінця.

Сподіваюся, відеоурок буде корисним для вас. Якщо ви зіткнетеся з будь-якими проблемами під час перегляду, ви можете перевірити код, який використовується для створення операцій CRUD у React JS.

React JS — це бібліотека JavaScript, яка спрощує створення користувацьких інтерфейсів. Її компонентна структура дозволяє розробникам повторно використовувати компоненти в коді, а керування станом забезпечує, щоб зміни в даних відображалися в інтерфейсі користувача. Віртуальний DOM також покращує ефективність, оновлюючи лише необхідні частини сторінки.

Може вам також сподобаються:

Перш за все, вам потрібно створити проект React за допомогою Vite. Як тільки це буде зроблено, наступним кроком буде скидання всіх за замовчуванням налаштувань коду.
Потім потрібно вставити наведені нижче коди в файл App.jsx

import React from "react";  
import CrudApp from "./components/CrudApp";  
function App() {  
 return (  

    );   }   export default App; ```  
Тепер потрібно створити компонент `CrudApp`. Давайте подивимося код цього компонента нижче.

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);

// завантаження даних з local storage
useEffect(() => {
const storedItems = JSON.parse(localStorage.getItem("items"));
if (storedItems) {
setItems(storedItems);
}
}, []);

// Збереження даних в local storage
useEffect(() => {
localStorage.setItem("items", JSON.stringify(items));
}, [items]);

// Додавання запису
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 }]);
}
};

// Видалення запису
const deleteItem = (id) => {
const updateItems = items.filter((item) => item.id !== id);
setItems(updateItems);
};

// Оновлення або редагування запису
const editItem = (item) => {
setCurrentItem(item);
};

return (
Crud App
);
}

export default CrudApp; ```

У компоненті CrudApp реалізовані всі функції, що використовуються для виконання операцій, таких як створення, читання, оновлення та видалення записів з використанням local storage. Також є два додаткові компоненти: `і `.
Давайте розглянемо кожен компонент по черзі.

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 (  


 setProduct(e.target.value)}    />     setPrice(e.target.value)}    />     setStatus(e.target.value)}    />        {currentItem ? "Update" : "Save"}        
        );   }   export default Form; ```  

## Тепер давайте подивимось фінальний компонент, який відображає записи в таблиці та має кнопки для виконання операцій, таких як редагування та видалення запису на тій самій сторінці.

import React from "react";
function Table({ items, deleteItem, editItem }) {
return (
{items.length > 0 ? (
items.map((item, indx) => (
))
) : (
No Record Found
)}
{/* */}
ID Product Name Price Status Action
{indx + 1} {item.Product} ${item.Price} {item.Status}
editItem(item)} > Edit
deleteItem(item.id)} > Delete
1 Mouse 350 Stocks
Edit
Edit
);
}
export default Table; ```

TailwindCSS — це CSS-фреймворк, орієнтований на програмне забезпечення, який робить стилізацію короткою та постійною. Він пропонує заздалегідь визначені класи для створення адаптивних дизайнів без написання кастомного CSS. Використовуючи ці класи, розробники можуть швидко створювати чисті та професійні інтерфейси безпосередньо в HTML або JSX.

Щоб побудувати операції CRUD у програмі, спершу потрібно створити React-проєкт і інтегрувати TailwindCSS.
Ця комбінація дає ефективну основу для розробки динамічних та адаптивних функцій.

Почніть з проектування інтерфейсу користувача. За допомогою TailwindCSS ви зможете швидко створювати макети, які включають заголовок для назви, форму для додавання або оновлення даних та таблицю або список для відображення елементів. Кожен запис матиме опції для редагування або видалення.

Управління даними в React здійснюється за допомогою стану (state). Для операцій CRUD зберігайте стан, який містить список елементів. Коли дані додаються, оновлюються або видаляються, цей стан оновлюється, і зміни негайно відображаються в інтерфейсі користувача.

Щоб додати нові елементи, надайте форму, в якій користувачі можуть вводити деталі. Коли форма відправляється, дані додаються до списку та оновлюються в стані програми. Для відображення елементів використовуйте структуру, подібну до таблиці або списку, щоб чітко показати дані. TailwindCSS забезпечує, щоб макет залишався візуально привабливим та адаптивним.

Редагування елементів передбачає можливість вибору запису та оновлення його даних. Заповніть форму наявними даними та дайте користувачеві можливість внести зміни, після чого оновіть стан. Видалення елементів вимагає простого вибору для видалення вибраних даних зі списку, що оновлює стан та інтерфейс користувача.

Використання React JS та TailwindCSS разом має кілька переваг. React обробляє продуктивність та динамічні оновлення, в той час як TailwindCSS гарантує, що інструмент буде простим та адаптивним. Ця комбінація також є більш екологічною для створення настроюваних та сучасних можливостей, від доступних менеджерів до покращених методів для виведення даних.

Завдяки виконанню основних кроків розробники можуть ефективно розвивати свої комунікативні навички у контексті досягнення високих стандартів продуктивності та дизайну. Використання CRUD є важливим кроком до покращення веб-технологій, а використання React та TailwindCSS робить цей процес ефективним і захоплюючим.

Перекладено з: Crud Operation in React JS

Операції CRUD в React JS

Вам також може сподобатися

Leave a Reply