Jak vytvořit aplikaci CRUD React s cloudovým úložištěm Supabase

React způsobil revoluci ve způsobu, jakým vývojáři vytvářejí uživatelská rozhraní pro webové aplikace. Jeho architektura založená na komponentách a deklarativní syntaxe poskytují silný základ pro vytváření interaktivních a dynamických uživatelských zkušeností.

Jako vývojář Reactu je zvládnutí implementace operací CRUD (Create, Read, Update, Delete) zásadním prvním krokem k budování robustních a efektivních webových řešení.

Naučte se, jak vytvořit jednoduchou aplikaci React CRUD s využitím Supabase Cloud Storage jako vašeho backendového řešení.

Řešení Supabase Backend-as-a-Service

Poskytovatelé backend-as-a-Service (BaaS)., stejně jako Supabase, nabízejí pohodlnou alternativu k vybudování plnohodnotné backendové služby od nuly pro vaše webové aplikace. V ideálním případě tato řešení poskytují širokou škálu předpřipravených backendových služeb, které jsou nezbytné pro nastavení efektivního backendového systému pro vaše webové aplikace React.

S BaaS můžete používat funkce, jako je ukládání dat, autentizační systémy, předplatné v reálném čase a další, aniž byste museli tyto služby vyvíjet a udržovat nezávisle.

Integrací řešení BaaS, jako je Supabase, do vašeho projektu můžete výrazně zkrátit dobu vývoje a expedice a přitom stále těžit z robustních backendových služeb.

Nastavte projekt cloudového úložiště Supabase

Chcete-li začít, přejděte na Web společnosti Supabasea zaregistrujte si účet.

1. Jakmile si zaregistrujete účet, přihlaste se ke svému účtu přístrojová deska strana.
2. Klikněte na Nový projekt knoflík.
3. Vyplňte detaily projektu a klikněte na Vytvořit nový projekt.
4. Po nastavení projektu vyberte a klikněte na SQL Editor tlačítko funkce na levém panelu funkcí.
5. Spusťte příkaz SQL níže v SQL editor k vytvoření ukázkové tabulky. Bude obsahovat data, která budete používat s aplikací React.

   vytvořitstůl produkty (
    id bigint generováno ve výchozím nastavení jako primární klíč identity,
    text jména,
    popisný text
   );

Nastavte aplikaci React CRUD

Vytvořte aplikaci React, přejděte do kořenového adresáře a vytvořte nový soubor, .env, k nastavení některých proměnných prostředí. Zamiřte do své Supabase nastavení stránku, otevřete API a zkopírujte hodnoty pro URL projektu a veřejný anon klíč. Vložte je do souboru env:

REACT_APP_SUPABASE_URL = adresa URL projektu
REACT_APP_SUPABASE_ANON_KEY = veřejný anon klíč

Dále spusťte tento příkaz pro instalaci knihovny JavaScript Supabase do vašeho projektu React:

npm install @supabase/supabase-js

Nakonfigurujte klienta Supabase

V src adresář, vytvořte nový utils/SupabaseClient.js soubor a kód níže:

import { createClient } z'@supabase/supabase-js'; 
konst supabaseURL = process.env. REACT_APP_SUPABASE_URL;
konst supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
vývozníkonst supabase = createClient (supabaseURL, supabaseAnonKey);

Tento kód vytvoří instanci klienta Supabase poskytnutím adresy URL Supabase a veřejného anon klíče, což umožňuje aplikaci React komunikovat s rozhraními API Supabase a provádět operace CRUD.

Zde najdete kód tohoto projektu úložiště GitHub.

Implementujte operace CRUD

Nyní, když jste úspěšně nastavili cloudové úložiště Supabase a svůj projekt React, implementujte operace CRUD ve své aplikaci React.

1. Přidejte data do databáze

Otevři src/App.js soubor, odstraňte standardní React kód a přidejte následující:

import { useState, useEffect } z'reagovat';
import ProductCard z'./components/ProductCard';
import { supabase } z'./utils/SupabaseClient';
import'./App.css';
vývoznívýchozífunkceAplikace() {
konst [name, setName] = useState('');
konst [description, setDescription] = useState('');
asynchronnífunkcepřidatProdukt() {
Snaž se {
konst { data, chyba } = čekat supabáze
 .z('produkty')
 .vložit({
 jméno: jméno,
 popis: popis
 })
 .singl();
-li (chyba) házet chyba;
okno.location.reload();
 } chytit (chyba) {
 upozornění (chyba.zpráva);
 }
 }

Tento kód definuje an přidatProdukt funkce handleru, která asynchronně vloží nový záznam do produkty tabulky v cloudové databázi. Pokud je operace vložení úspěšná, stránka se znovu načte, aby odrážela aktualizovaný seznam produktů.

2. Čtení dat z cloudové databáze

Definujte funkci handleru pro načítání uložených dat z databáze.

konst [products, setProducts] = useState([]);
asynchronnífunkcegetProducts() {
Snaž se {
konst { data, chyba } = čekat supabáze
 .z('produkty')
 .vybrat('*')
 .omezit(10);
-li (chyba) házet chyba;
-li (údaje != nula) {
 setProdukty (data);
 }
 } chytit (chyba) {
 upozornění (chyba.zpráva);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

Tento kód asynchronně načítá data z databáze. Načítací dotaz načte všechna data z tabulky produktů, přičemž výsledky omezí na maximálně 10 záznamů a aktualizuje produkty' stavu s načtenými daty.

The useEffectReagovat háček provozuje getProducts funkce při montáži součásti. To zajišťuje, že data produktů budou načtena a vykreslena při prvotním vykreslení komponenty. Nakonec přidejte kód, který vykreslí vstupní prvky JSX v prohlížeči, aby uživatelé mohli přidávat produkty do databáze Supabase a zobrazovat existující produkty načtené z databáze.

vrátit se (
 <>

"záhlaví-kontejner">
Produkty obchodu</h3>
 </div>
 </header>


Přidejte data produktů do databáze Supabase</h3>


"vytvořit-produkt-kontejner">


Název produktu</label>
 typ="text"
 id="název"
 onChange={(e) => setName (e.target.value)}
 />
Popis produktu</label>
 typ="text"
 id="popis"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Přidat produkt
 </button>
 </div>
 </div>




Aktuální produkty v databáze</h3>

"produkt-seznam-kontejner">
 {products.map((produkt) => (



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

Načtená data v pole produktů je předán jako rekvizita a dynamicky vykreslen v rámci ProductCard součást pomocí mapa funkce.

3. Aktualizovat a odstranit existující data v databázi

Vytvoř nový komponenty/ProductCard.js soubor v /src adresář. Před definováním funkcí obslužné rutiny se podívejme na stavy a prvky JSX, které implementujete v této komponentě.

import { useState } z'reagovat';
import { supabase } z'../utils/SupabaseClient';
import'./productcard.styles.css';
vývoznívýchozífunkceProductCard(rekvizity) {
konst produkt = rekvizita.produkt;
konst [editace, setEditing] = useState(Nepravdivé);
konst [name, setName] = useState (product.name);
konst [description, setDescription] = useState (product.description);
vrátit se (
"produktová karta">


 {editace Nepravdivé? (


{product.name}</h5>


{product.description}</p>
"tlačítko smazat" onClick={() => deleteProduct()}>Delete Product</button>
"tlačítko upravit" onClick={() => setEditing(skutečný)}>Upravit produkt</button>
 </div>
 ): (


Úprava produktu</h4>
"tlačítko návratu" onClick={() => setEditing(Nepravdivé)}>Zpět</button>


"název">Název produktu</label>
 typ="text"
 id="název"
 defaultValue={product.name}
 onChange={(e) => setName (e.target.value)}/>
"popis">Popis produktu</label>
 typ="text"
 id="popis"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


"tlačítko aktualizace" onClick={() => updateProduct()}>Aktualizovat produkt v Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asynchronnífunkceaktualizovatProdukt() {
Snaž se {
konst { data, chyba } = čekat supabáze
 .z('produkty')
 .Aktualizace({
 jméno: jméno,
 popis: popis
 })
 .ekv('id', product.id);
-li (chyba) házet chyba;
okno.location.reload();
 } chytit (chyba) {
 upozornění (chyba.zpráva);
 }
}

asynchronnífunkcedeleteProduct() {
Snaž se {
konst { data, chyba } = čekat supabáze
 .z('produkty')
 .vymazat()
 .ekv('id', product.id);
-li (chyba) házet chyba;
okno.location.reload();
 } chytit (chyba) {
 upozornění (chyba.zpráva);
 }
}