Ako vytvoriť aplikáciu CRUD React s cloudovým úložiskom Supabase

React spôsobil revolúciu v spôsobe, akým vývojári vytvárajú používateľské rozhrania pre webové aplikácie. Jeho architektúra založená na komponentoch a deklaratívna syntax poskytujú silný základ pre vytváranie interaktívnych a dynamických používateľských skúseností.

Ako vývojár Reactu je zvládnutie implementácie operácií CRUD (Create, Read, Update, Delete) zásadným prvým krokom k vytvoreniu robustných a efektívnych webových riešení.

Naučte sa, ako vytvoriť jednoduchú aplikáciu React CRUD, využívajúcu Supabase Cloud Storage ako vaše backendové riešenie.

Riešenie Supabase Backend-as-a-Service

Poskytovatelia backend-as-a-Service (BaaS)., podobne ako Supabase, ponúkajú pohodlnú alternatívu k budovaniu plnohodnotnej backendovej služby od nuly pre vaše webové aplikácie. V ideálnom prípade tieto riešenia poskytujú širokú škálu vopred vytvorených backendových služieb, ktoré sú nevyhnutné pre nastavenie efektívneho backendového systému pre vaše webové aplikácie React.

S BaaS môžete využívať funkcie, ako je ukladanie údajov, autentifikačné systémy, predplatné v reálnom čase a ďalšie bez toho, aby ste museli tieto služby vyvíjať a udržiavať nezávisle.

Integráciou riešení BaaS, ako je Supabase, do vášho projektu môžete výrazne skrátiť čas vývoja a dodania, pričom budete stále využívať výhody robustných backendových služieb.

Nastavte projekt cloudového úložiska Supabase

Ak chcete začať, prejdite na Webová stránka Supabasea zaregistrujte si účet.

1. Po zaregistrovaní účtu sa prihláste do svojho účtu prístrojová doska stránku.
2. Klikni na Nový projekt tlačidlo.
3. Vyplňte detaily projektu a kliknite na Vytvorte nový projekt.
4. Po nastavení projektu vyberte a kliknite na SQL Editor tlačidlo funkcie na paneli funkcií na ľavej table.
5. Spustite príkaz SQL nižšie v SQL editor na vytvorenie ukážkovej tabuľky. Budú v ňom uložené dáta, ktoré budete používať s aplikáciou React.

   vytvoriťtabuľky Produkty (
    id bigint sa predvolene vygeneruje ako primárny kľúč identity,
    text mena,
    text popisu
   );

Nastavte aplikáciu React CRUD

Vytvorte aplikáciu React, prejdite do koreňového adresára a vytvorte nový súbor, .env, na nastavenie niektorých premenných prostredia. Choďte do svojej Supabase nastavenie otvorte stránku API a skopírujte hodnoty pre URL projektu a verejný anon kľúč. Prilepte ich do súboru env:

REACT_APP_SUPABASE_URL = URL projektu
REACT_APP_SUPABASE_ANON_KEY = verejný anon kľúč

Potom spustite tento príkaz, aby ste nainštalovali knižnicu JavaScript Supabase vo svojom projekte React:

npm install @supabase/supabase-js

Nakonfigurujte klienta Supabase

V src adresár, vytvorte nový utils/SupabaseClient.js súbor a kód nižšie:

importovať { createClient } od'@supabase/supabase-js'; 
konšt supabaseURL = process.env. REACT_APP_SUPABASE_URL;
konšt supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
exportkonšt supabase = createClient (supabaseURL, supabaseAnonKey);

Tento kód vytvorí inštanciu klienta Supabase poskytnutím adresy URL Supabase a verejného anon kľúča, čo umožňuje aplikácii React komunikovať s rozhraniami Supabase API a vykonávať operácie CRUD.

Kód tohto projektu nájdete v tomto úložisko GitHub.

Implementujte operácie CRUD

Teraz, keď ste úspešne nastavili cloudové úložisko Supabase a svoj projekt React, implementujte operácie CRUD vo svojej aplikácii React.

1. Pridajte údaje do databázy

Otvor src/App.js súbor, odstráňte štandardný kód reakcie a pridajte nasledujúce:

importovať { useState, useEffect } od'reagovať';
importovať ProductCard od'./components/ProductCard';
importovať { supabase } od'./utils/SupabaseClient';
importovať'./App.css';
exportpredvolenáfunkciuApp() {
konšt [name, setName] = useState('');
konšt [description, setDescription] = useState('');
asyncfunkciupridaťProdukt() {
skúste {
konšt { údaje, chyba } = čakať supabase
 .od('Produkty')
 .insert({
 meno: meno,
 popis: popis
 })
 .single();
ak (chyba) hodiť chyba;
okno.location.reload();
 } chytiť (chyba) {
 výstraha (chyba.správa);
 }
 }

Tento kód definuje an pridaťProdukt funkcia handler, ktorá asynchrónne vloží nový záznam do Produkty tabuľky v cloudovej databáze. Ak je operácia vloženia úspešná, stránka sa znova načíta, aby odrážala aktualizovaný zoznam produktov.

2. Čítanie údajov z cloudovej databázy

Definujte funkciu obsluhy na získanie uložených údajov z databázy.

konšt [products, setProducts] = useState([]);
asyncfunkciugetProducts() {
skúste {
konšt { údaje, chyba } = čakať supabase
 .od('Produkty')
 .select('*')
 .limit(10);
ak (chyba) hodiť chyba;
ak (údaje != nulový) {
 setProdukty (dáta);
 }
 } chytiť (chyba) {
 výstraha (chyba.správa);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

Tento kód asynchrónne načítava údaje z databázy. Dotaz na načítanie načíta všetky údaje z tabuľky produktov, pričom výsledky obmedzí na maximálne 10 záznamov a aktualizuje Produkty' stavu s načítanými údajmi.

The useEffectReagovať hák prevádzkuje getProducts funkciu, keď sa komponent namontuje. To zaisťuje, že údaje produktov sa načítajú a vykreslia pri prvotnom vykreslení komponentu. Nakoniec pridajte kód, ktorý vykreslí vstupné prvky JSX v prehliadači, aby používatelia mohli pridávať produkty do databázy Supabase a zobrazovať existujúce produkty načítané z databázy.

vrátiť (
 <>

"hlavička-kontajner">
Produkty obchodu</h3>
 </div>
 </header>


Pridajte údaje o produktoch do databázy Supabase</h3>


"vytvoriť-produkt-kontajner">


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


 addProduct()}>
 Pridať produkt
 </button>
 </div>
 </div>




Aktuálne produkty v Databáza</h3>

"produkt-zoznam-kontajner">
 {products.map((produktu) => (



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

Načítané údaje v pole produktov sa odovzdáva ako rekvizita a dynamicky sa vykresľuje v rámci ProductCard komponent pomocou mapa funkciu.

3. Aktualizujte a odstráňte existujúce údaje v databáze

Vytvorte nový komponenty/ProductCard.js súbor v /src adresár. Pred definovaním funkcií obsluhy sa pozrime na stavy a prvky JSX, ktoré implementujete v tomto komponente.

importovať { useState } od'reagovať';
importovať { supabase } od'../utils/SupabaseClient';
importovať'./productcard.styles.css';
exportpredvolenáfunkciuProductCard(rekvizity) {
konšt produkt = rekvizity.produkt;
konšt [editácia, setEditing] = useState(falošný);
konšt [name, setName] = useState (product.name);
konšt [description, setDescription] = useState (product.description);
vrátiť (
"produktová karta">


 {úprava falošný? (


{product.name}</h5>


{product.description}</p>
"tlačidlo vymazať" onClick={() => deleteProduct()}>Delete Product</button>
"tlačidlo úprav" onClick={() => setEditing(pravda)}>Upraviť produkt</button>
 </div>
 ): (


Úprava produktu</h4>
"tlačidlo vrátiť späť" onClick={() => setEditing(falošný)}>Späť</button>


"názov">Názov produktu</label>
 typ="text"
 id="názov"
 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čidlo aktualizácie" onClick={() => updateProduct()}>Aktualizovať produkt v Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asyncfunkciuaktualizovaťProdukt() {
skúste {
konšt { údaje, chyba } = čakať supabase
 .od('Produkty')
 .update({
 meno: meno,
 popis: popis
 })
 .ekv('id', identifikačné číslo produktu);
ak (chyba) hodiť chyba;
okno.location.reload();
 } chytiť (chyba) {
 výstraha (chyba.správa);
 }
}

asyncfunkciudeleteProduct() {
skúste {
konšt { údaje, chyba } = čakať supabase
 .od('Produkty')
 .delete()
 .ekv('id', identifikačné číslo produktu);
ak (chyba) hodiť chyba;
okno.location.reload();
 } chytiť (chyba) {
 výstraha (chyba.správa);
 }
}