Kā izveidot CRUD React lietojumprogrammu, izmantojot Supabase mākoņkrātuvi

React ir mainījis veidu, kā izstrādātāji veido lietotāja saskarnes tīmekļa lietojumprogrammām. Tā uz komponentiem balstītā arhitektūra un deklaratīvā sintakse nodrošina spēcīgu pamatu interaktīvas un dinamiskas lietotāja pieredzes radīšanai.

Kā React izstrādātājam CRUD (izveidošanas, lasīšanas, atjaunināšanas, dzēšanas) operāciju ieviešanas apguve ir būtisks pirmais solis ceļā uz stabilu un efektīvu tīmekļa risinājumu izveidi.

Uzziniet, kā izveidot vienkāršu React CRUD lietojumprogrammu, izmantojot Supabase Cloud Storage kā savu aizmugursistēmas risinājumu.

Supabase aizmugursistēmas kā pakalpojuma risinājums

Backend-as-a-Service (BaaS) nodrošinātāji, tāpat kā Supabase, piedāvā ērtu alternatīvu pilnvērtīga aizmugursistēmas pakalpojuma izveidei no nulles jūsu tīmekļa lietojumprogrammām. Ideālā gadījumā šie risinājumi nodrošina plašu iepriekš izveidotu aizmugursistēmas pakalpojumu klāstu, kas ir būtiski, lai izveidotu efektīvu aizmugursistēmu jūsu React tīmekļa lietojumprogrammām.

Izmantojot BaaS, varat izmantot tādus līdzekļus kā datu glabāšana, autentifikācijas sistēmas, reāllaika abonementi un citas, bez nepieciešamības neatkarīgi izstrādāt un uzturēt šos pakalpojumus.

Integrējot savā projektā BaaS risinājumus, piemēram, Supabase, varat ievērojami samazināt izstrādes un piegādes laiku, vienlaikus gūstot labumu no stabiliem aizmugursistēmas pakalpojumiem.

Iestatiet Supabase mākoņkrātuves projektu

Lai sāktu, dodieties uz Supabase vietneun reģistrējieties kontam.

1. Kad esat reģistrējies kontam, piesakieties savā kontā mērinstrumentu panelis lappuse.
2. Noklikšķiniet uz Jauns Projekts pogu.
3. Aizpildiet informāciju par projektu un noklikšķiniet uz Izveidojiet jaunu projektu.
4. Kad projekts ir iestatīts, atlasiet un noklikšķiniet uz SQL redaktors funkciju poga kreisās rūts funkciju panelī.
5. Palaidiet tālāk esošo SQL priekšrakstu sadaļā SQL redaktors lai izveidotu demonstrācijas tabulu. Tajā tiks glabāti dati, kurus izmantosit ar React lietojumprogrammu.

   izveidottabula produkti (
    id bigint, kas pēc noklusējuma tiek ģenerēts kā identitātes primārā atslēga,
    vārda teksts,
    apraksta teksts
   );

Iestatiet React CRUD lietojumprogrammu

Izveidojiet React lietojumprogrammu, dodieties uz saknes direktoriju un izveidojiet jaunu failu, .env, lai iestatītu dažus vides mainīgos. Dodieties uz savu Supabāzi iestatījumi lapu, atveriet API sadaļu un kopējiet vērtības projekta URL un publiskā anonā atslēga. Ielīmējiet tos savā env failā:

REACT_APP_SUPABASE_URL = projekta URL
REACT_APP_SUPABASE_ANON_KEY = publiska anon atslēga

Pēc tam palaidiet šo komandu, lai savā React projektā instalētu Supabase JavaScript bibliotēku:

npm instalēt @supabase/supabase-js

Konfigurējiet Supabase klientu

Iekš src direktorijā, izveidojiet jaunu utils/SupabaseClient.js failu un tālāk norādīto kodu:

imports { CreateClient } no'@supabase/supabase-js'; 
konst supabaseURL = process.env. REACT_APP_SUPABASE_URL;
konst supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
eksportētkonst supabase = createClient (supabaseURL, supabaseAnonKey);

Šis kods izveido Supabase klienta instanci, nodrošinot Supabase URL un publisko anon atslēgu, ļaujot React lietojumprogrammai sazināties ar Supabase API un veikt CRUD darbības.

Jūs varat atrast šī projekta kodu GitHub repozitorijs.

Īstenojiet CRUD darbības

Tagad, kad esat veiksmīgi iestatījis Supabase mākoņkrātuvi un savu React projektu, ieviesiet CRUD darbības savā React lietojumprogrammā.

1. Pievienojiet datus datu bāzei

Atveriet src/App.js failu, izdzēsiet React kodu un pievienojiet šo:

imports { useState, useEffect } no'reaģēt';
imports Produkta karte no'./components/ProductCard';
imports { supabase } no'./utils/SupabaseClient';
imports'./App.css';
eksportētnoklusējumafunkcijuApp() {
konst [nosaukums, setName] = useState('');
konst [description, setDescription] = useState('');
asinhronsfunkcijupievienotProduktu() {
mēģināt {
konst {dati, kļūda} = gaidīt supabāze
 .from("produkti")
 .insert({
 vārds: vārds,
 apraksts: apraksts
 })
 .viens();
ja (kļūda) mest kļūda;
logs.location.reload();
 } noķert (kļūda) {
 brīdinājums (error.message);
 }
 }

Šis kods definē an pievienotProduktu apdarinātāja funkcija, kas asinhroni ievieto jaunu ierakstu produktiem tabula mākoņa datu bāzē. Ja ievietošanas darbība ir veiksmīga, lapa tiks atkārtoti ielādēta, lai atspoguļotu atjaunināto produktu sarakstu.

2. Lasiet datus no mākoņa datu bāzes

Definējiet apstrādātāja funkciju saglabāto datu iegūšanai no datu bāzes.

konst [products, setProducts] = useState([]);
asinhronsfunkcijugetProducts() {
mēģināt {
konst {dati, kļūda} = gaidīt supabāze
 .from("produkti")
 .select('*')
 .limit(10);
ja (kļūda) mest kļūda;
ja (dati != null) {
 komplektsProdukti (dati);
 }
 } noķert (kļūda) {
 brīdinājums (error.message);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

Šis kods asinhroni ienes datus no datu bāzes. Ieneses vaicājums izgūst visus datus no produktu tabulas, ierobežojot rezultātus līdz 10 ierakstiem, un atjaunina produkti" stāvokli ar izgūtajiem datiem.

The useEffectReakcijas āķis vada getProducts funkcija, kad komponents tiek piestiprināts. Tas nodrošina, ka produktu dati tiek iegūti un renderēti, kad komponents tiek sākotnēji renderēts. Visbeidzot pievienojiet kodu, kas pārlūkprogrammā renderē ievades JSX elementus, lai lietotāji varētu pievienot produktus Supabase datu bāzei un parādīt esošos produktus, kas iegūti no datu bāzes.

atgriezties (
 <>

"galvene-konteiners">
Veikala produkti</h3>
 </div>
 </header>


Pievienot produktu datus Supabase datu bāzei</h3>


"izveidot produktu konteineru">


Produkta nosaukums</label>
 tips="teksts"
 id="vārds"
 onChange={(e) => setName (e.target.value)}
 />
Produkta apraksts</label>
 tips="teksts"
 id="apraksts"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Pievienot produktu
 </button>
 </div>
 </div>




Pašreizējie produkti iekšā datu bāze</h3>

"produktu saraksts-konteiners">
 {products.map((produkts) => (



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

Iegūtie dati mapē produktu masīvs tiek nodots kā rekvizīti un dinamiski atveidots Produkta karte komponents, izmantojot karte funkciju.

3. Atjauniniet un dzēsiet esošos datus datu bāzē

Izveidojiet jaunu komponenti/ProductCard.js failu mapē /src direktoriju. Pirms apdarinātāja funkciju definēšanas apskatīsim stāvokļus un JSX elementus, ko ieviesīsit šajā komponentā.

imports { useState } no'reaģēt';
imports { supabase } no'../utils/SupabaseClient';
imports'./productcard.styles.css';
eksportētnoklusējumafunkcijuProdukta karte(rekvizīti) {
konst produkts = props.product;
konst [rediģēšana, setEditing] = useState(viltus);
konst [nosaukums, setName] = useState (product.name);
konst [description, setDescription] = useState (product.description);
atgriezties (
"produkta karte">


 {rediģēšana viltus? (


{product.name}</h5>


{product.description}</p>
"poga dzēst" onClick={() => deleteProduct()}>Dzēst produktu</button>
"rediģēšanas poga" onClick={() => setEditing(taisnība)}>Rediģēt produktu</button>
 </div>
 ): (


Produkta rediģēšana</h4>
"atpakaļ-poga" onClick={() => setEditing(viltus)}>Atgriezties</button>


"vārds">Produkta nosaukums</label>
 tips="teksts"
 id="vārds"
 defaultValue={product.name}
 onChange={(e) => setName (e.target.value)}/>
"apraksts">Produkta apraksts</label>
 tips="teksts"
 id="apraksts"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


"atjaunināšanas poga" onClick={() => updateProduct()}> Atjaunināt produktu iekšā Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asinhronsfunkcijuatjauninātProduktu() {
mēģināt {
konst {dati, kļūda} = gaidīt supabāze
 .from("produkti")
 .Atjaunināt({
 vārds: vārds,
 apraksts: apraksts
 })
 .eq('id', produkts.id);
ja (kļūda) mest kļūda;
logs.location.reload();
 } noķert (kļūda) {
 brīdinājums (error.message);
 }
}

asinhronsfunkcijudzēstProduktu() {
mēģināt {
konst {dati, kļūda} = gaidīt supabāze
 .from("produkti")
 .delete()
 .eq('id', produkts.id);
ja (kļūda) mest kļūda;
logs.location.reload();
 } noķert (kļūda) {
 brīdinājums (error.message);
 }
}