Как да създадете приложение CRUD React с облачно хранилище Supabase

React революционизира начина, по който разработчиците изграждат потребителски интерфейси за уеб приложения. Неговата базирана на компоненти архитектура и декларативен синтаксис осигуряват мощна основа за създаване на интерактивни и динамични потребителски изживявания.

Като разработчик на React, овладяването как да се прилагат CRUD (Създаване, Четене, Актуализиране, Изтриване) операции е решаваща първа стъпка към изграждането на стабилни и ефективни уеб решения.

Научете как да изградите просто React CRUD приложение, като използвате Supabase Cloud Storage като свое бекенд решение.

Решение Supabase Backend-as-a-Service

Доставчици на Backend-as-a-Service (BaaS)., като Supabase, предлагат удобна алтернатива за изграждане на напълно развита бекенд услуга от нулата за вашите уеб приложения. В идеалния случай тези решения предоставят широк набор от предварително изградени бекенд услуги, които са от съществено значение за настройването на ефективна бекенд система за вашите уеб приложения на React.

С BaaS можете да използвате функции като съхранение на данни, системи за удостоверяване, абонаменти в реално време и други, без да е необходимо да разработвате и поддържате тези услуги независимо.

Чрез интегрирането на BaaS решения като Supabase във вашия проект можете значително да намалите времето за разработка и доставка, като същевременно се възползвате от стабилни бекенд услуги.

Настройте проект за облачно съхранение на Supabase

За да започнете, преминете към Уебсайтът на Supabase, и се регистрирайте за акаунт.

1. След като се регистрирате за акаунт, влезте в него табло страница.
2. Кликнете върху Нов проект бутон.
3. Попълнете подробностите за проекта и щракнете върху Създайте нов проект.
4. След като проектът е настроен, изберете и щракнете върху SQL редактор бутон за функции в панела с функции в левия панел.
5. Изпълнете SQL израза по-долу в SQL редактор за създаване на демонстрационна таблица. Той ще съдържа данните, които ще използвате с приложението React.

   създаваммаса продукти (
    id bigint, генериран по подразбиране като първичен ключ за самоличност,
    текст на името,
    описателен текст
   );

Настройте приложение React CRUD

Създайте приложение React, отидете до основната директория и създайте нов файл, .env, за да зададете някои променливи на средата. Отидете до вашата Supabase настройки страница, отворете API и копирайте стойностите за URL адрес на проекта и публичен anon ключ. Поставете тези във вашия env файл:

REACT_APP_SUPABASE_URL = URL адрес на проекта
REACT_APP_SUPABASE_ANON_KEY = публичен anon ключ

След това изпълнете тази команда, за да инсталирате JavaScript библиотеката на Supabase във вашия проект React:

npm инсталира @supabase/supabase-js

Конфигурирайте клиента Supabase

В src директория, създайте нова utils/SupabaseClient.js файл и кода по-долу:

импортиране { createClient } от„@supabase/supabase-js“; 
конст supabaseURL = process.env. REACT_APP_SUPABASE_URL;
конст supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
износконст supabase = createClient (supabaseURL, supabaseAnonKey);

Този код създава екземпляр на клиент на Supabase, като предоставя URL адреса на Supabase и публичен anon ключ, което позволява на приложението React да комуникира с API на Supabase и да изпълнява CRUD операции.

Можете да намерите кода на този проект тук GitHub хранилище.

Приложете операциите CRUD

Сега, след като успешно сте настроили облачното хранилище на Supabase и вашия проект React, внедрете операциите CRUD във вашето приложение React.

1. Добавете данни към базата данни

Отвори src/App.js файл, изтрийте шаблонния код на React и добавете следното:

импортиране {useState, useEffect} от"реагира";
импортиране Продуктова карта от'./components/ProductCard';
импортиране { supabase } от'./utils/SupabaseClient';
импортиране'./App.css';
износпо подразбиранефункцияПриложение() {
конст [име, setName] = useState('');
конст [описание, setDescription] = useState('');
асинхроненфункцияaddProduct() {
опитвам {
конст {данни, грешка} = изчакайте надбаза
 .от("продукти")
 .insert({
 име: име,
 описание: описание
 })
 .single();
ако (грешка) хвърлям грешка;
прозорец.location.reload();
 } улов (грешка) {
 предупреждение (грешка.съобщение);
 }
 }

Този код дефинира addProduct манипулатор функция, която асинхронно вмъква нов запис в продукти таблица в облачната база данни. Ако операцията по вмъкване е успешна, страницата ще се презареди, за да отрази актуализирания списък с продукти.

2. Четете данни от облачната база данни

Дефинирайте манипулираща функция за извличане на съхранените данни от базата данни.

конст [продукти, setProducts] = useState([]);
асинхроненфункцияgetProducts() {
опитвам {
конст {данни, грешка} = изчакайте надбаза
 .от("продукти")
 .изберете('*')
 .limit(10);
ако (грешка) хвърлям грешка;
ако (данни != нула) {
 setProducts (данни);
 }
 } улов (грешка) {
 предупреждение (грешка.съобщение);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

Този код асинхронно извлича данните от базата данни. Заявката за извличане извлича всички данни от таблицата с продукти, като ограничава резултатите до максимум 10 записа и актуализира продукти" състояние с извлечените данни.

The useEffectРеагирайте куката управлява getProducts функция, когато компонентът се монтира. Това гарантира, че данните за продуктите се извличат и изобразяват, когато компонентът се изобразява първоначално. Накрая добавете кода, който изобразява входни JSX елементи в браузъра, за да позволи на потребителите да добавят продукти към база данни на Supabase и да показват съществуващите продукти, извлечени от базата данни.

връщане (
 <>

"заглавен контейнер">
Магазин продукти</h3>
 </div>
 </header>


Добавете данни за продукти към базата данни на Supabase</h3>


"създай-продукт-контейнер">


Име на продукта</label>
 тип="текст"
 id="име"
 onChange={(e) => setName (e.target.value)}
 />
Описание на продукта</label>
 тип="текст"
 id="описание"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Добавете продукт
 </button>
 </div>
 </div>




Актуални продукти в базата данни</h3>

"контейнер за списък с продукти">
 {products.map((продукт) => (



 </div>
 ))}
 </div>
 </>
 );
}

Извлечените данни в набор от продукти се предава като подпори и се изобразява динамично в рамките на Продуктова карта компонент, използващ карта функция.

3. Актуализиране и изтриване на съществуващи данни в базата данни

Създайте нов компоненти/ProductCard.js файл в /src указател. Преди да дефинираме манипулаторните функции, нека видим състоянията и JSX елементите, които ще внедрите в този компонент.

импортиране {useState} от"реагира";
импортиране { supabase } от'../utils/SupabaseClient';
импортиране'./productcard.styles.css';
износпо подразбиранефункцияПродуктова карта(реквизит) {
конст продукт = реквизит.продукт;
конст [редактиране, setEditing] = useState(невярно);
конст [име, setName] = useState (product.name);
конст [description, setDescription] = useState (product.description);
връщане (
"продуктова карта">


 {редактиране невярно? (


{product.name}</h5>


{product.description}</p>
"бутон за изтриване" onClick={() => deleteProduct()}>Изтриване на продукт</button>
"бутон за редактиране" onClick={() => setEditing(вярно)}>Редактиране на продукт</button>
 </div>
 ): (


Редактиране на продукт</h4>
"бутон за връщане назад" onClick={() => setEditing(невярно)}>Назад</button>


"име">Име на продукта</label>
 тип="текст"
 id="име"
 defaultValue={product.name}
 onChange={(e) => setName (e.target.value)}/>
"описание">Описание на продукта</label>
 тип="текст"
 id="описание"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


"бутон за актуализиране" onClick={() => updateProduct()}>Актуализиране на продукта в Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

асинхроненфункцияupdateProduct() {
опитвам {
конст {данни, грешка} = изчакайте надбаза
 .от("продукти")
 .update({
 име: име,
 описание: описание
 })
 .eq('документ за самоличност', идентификация на продукта);
ако (грешка) хвърлям грешка;
прозорец.location.reload();
 } улов (грешка) {
 предупреждение (грешка.съобщение);
 }
}

асинхроненфункцияизтрийПродукт() {
опитвам {
конст {данни, грешка} = изчакайте надбаза
 .от("продукти")
 .Изтрий()
 .eq('документ за самоличност', идентификация на продукта);
ако (грешка) хвърлям грешка;
прозорец.location.reload();
 } улов (грешка) {
 предупреждение (грешка.съобщение);
 }
}