Kaip sukurti CRUD React programą naudojant „Supabase Cloud Storage“.

„React“ pakeitė būdą, kuriuo kūrėjai kuria interneto programų vartotojo sąsajas. Jo komponentais pagrįsta architektūra ir deklaratyvi sintaksė yra galingas pagrindas kuriant interaktyvią ir dinamišką vartotojo patirtį.

Kaip „React“ kūrėjas, įsisavinimas, kaip įdiegti CRUD (kūrimas, skaitymas, naujinimas, ištrynimas) operacijas, yra svarbus pirmasis žingsnis kuriant patikimus ir efektyvius žiniatinklio sprendimus.

Sužinokite, kaip sukurti paprastą „React CRUD“ programą, naudodami „Supabase Cloud Storage“ kaip pagrindinį sprendimą.

„Supabase Backend-as-a-Service“ sprendimas

Backend-as-a-Service (BaaS) teikėjai, kaip ir Supabase, siūlo patogią alternatyvą visavertei užpakalinei paslaugai kurti nuo nulio jūsų žiniatinklio programoms. Idealiu atveju šie sprendimai teikia platų iš anksto sukurtų užpakalinių paslaugų spektrą, kurie yra būtini norint sukurti efektyvią „React“ žiniatinklio programų bazinę sistemą.

Naudodami BaaS galite naudotis tokiomis funkcijomis kaip duomenų saugojimas, autentifikavimo sistemos, prenumeratos realiuoju laiku ir dar daugiau, nereikės kurti ir prižiūrėti šių paslaugų savarankiškai.

Į savo projektą integravę BaaS sprendimus, pvz., Supabase, galite žymiai sutrumpinti kūrimo ir pristatymo laiką, tuo pačiu naudodamiesi patikimomis fono paslaugomis.

Sukurkite „Supabase“ debesies saugyklos projektą

Norėdami pradėti, eikite į Supabase svetainėir prisiregistruokite prie paskyros.

1. Kai prisiregistruosite gauti paskyrą, prisijunkite prie savo paskyros prietaisų skydelis puslapį.
2. Spustelėkite ant Naujas projektas mygtuką.
3. Užpildykite projekto duomenis ir spustelėkite Sukurti naują projektą.
4. Kai projektas yra nustatytas, pasirinkite ir spustelėkite SQL redaktorius funkcijos mygtukas kairiosios srities funkcijų skydelyje.
5. Vykdykite toliau pateiktą SQL teiginį SQL redaktorius norėdami sukurti demonstracinę lentelę. Jame bus duomenys, kuriuos naudosite su programa „React“.

   sukurtistalo Produktai (
    ID bigint sugeneruotas pagal numatytuosius nustatymus kaip pirminis tapatybės raktas,
    vardo tekstas,
    aprašymo tekstas
   );

Nustatykite „React CRUD“ programą

Sukurkite programą „React“., eikite į šakninį katalogą ir sukurkite naują failą, .env, norėdami nustatyti kai kuriuos aplinkos kintamuosius. Eikite į savo Supabazę nustatymus puslapį, atidarykite API skyrių ir nukopijuokite reikšmes projekto URL ir viešasis anoninis raktas. Įklijuokite juos į savo env failą:

REACT_APP_SUPABASE_URL = projekto URL
REACT_APP_SUPABASE_ANON_KEY = viešasis anoninis raktas

Tada paleiskite šią komandą, kad įdiegtumėte Supabase JavaScript biblioteką savo React projekte:

npm įdiegti @supabase/supabase-js

Sukonfigūruokite „Supabase“ klientą

Viduje src katalogą, sukurkite naują utils/SupabaseClient.js failą ir žemiau esantį kodą:

importuoti { CreateClient } iš„@supabase/supabase-js“; 
konst supabaseURL = process.env. REACT_APP_SUPABASE_URL;
konst supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
eksportuotikonst supabase = CreateClient (supabaseURL, supabaseAnonKey);

Šis kodas sukuria „Supabase“ kliento egzempliorių pateikdamas „Supabase“ URL ir viešąjį anoninį raktą, leidžiantį programai „React“ susisiekti su „Supabase“ API ir atlikti CRUD operacijas.

Šio projekto kodą rasite čia GitHub saugykla.

Įgyvendinti CRUD operacijas

Dabar, kai sėkmingai nustatėte Supabase debesies saugyklą ir React projektą, įdiekite CRUD operacijas savo React programoje.

1. Pridėti duomenis į duomenų bazę

Atidaryk src/App.js failą, ištrinkite „React“ kodą ir pridėkite:

importuoti { useState, useEffect } iš'reaguoti';
importuoti Produkto kortelė iš„./components/ProductCard“;
importuoti { supabase } iš„./utils/SupabaseClient“;
importuoti'./App.css';
eksportuotinumatytasfunkcijaProgramėlė() {
konst [vardas, setName] = useState('');
konst [description, setDescription] = useState('');
asyncfunkcijapridėtiProduktą() {
bandyti {
konst { duomenys, klaida } = laukti supabazė
 .from ('Produktai')
 .Įdėti({
 vardas: vardas,
 aprašymas: aprašymas
 })
 .single();
jeigu (klaida) mesti klaida;
langas.location.reload();
 } sugauti (klaida) {
 įspėjimas (error.message);
 }
 }

Šis kodas apibrėžia an pridėtiProduktą tvarkyklės funkcija, kuri asinchroniškai įterpia naują įrašą į Produktai lentelė debesų duomenų bazėje. Jei įterpimo operacija bus sėkminga, puslapis bus įkeltas iš naujo, kad atspindėtų atnaujintą produktų sąrašą.

2. Skaitykite duomenis iš debesies duomenų bazės

Apibrėžkite tvarkyklės funkciją, kad būtų galima gauti saugomus duomenis iš duomenų bazės.

konst [products, setProducts] = useState([]);
asyncfunkcijagautiProduktai() {
bandyti {
konst { duomenys, klaida } = laukti supabazė
 .from ('Produktai')
 .select('*')
 .limit(10);
jeigu (klaida) mesti klaida;
jeigu (duomenys != nulinis) {
 rinkinysProduktai (duomenys);
 }
 } sugauti (klaida) {
 įspėjimas (error.message);
 }
 }
 useEffect (() => {
 getProducts();
 }, []);

Šis kodas asinchroniškai paima duomenis iš duomenų bazės. Gavimo užklausa nuskaito visus duomenis iš produktų lentelės, apribodama rezultatus iki daugiausiai 10 įrašų ir atnaujina Produktai' būsena su gautais duomenimis.

The naudojimoEfektasReagavimo kabliukas paleidžia gautiProduktai funkcija, kai komponentas pritvirtinamas. Taip užtikrinama, kad produktų duomenys būtų paimti ir pateikti pirmą kartą pateikiant komponentą. Galiausiai pridėkite kodą, kuris pateikia įvesties JSX elementus naršyklėje, kad vartotojai galėtų įtraukti produktus į Supabase duomenų bazę ir rodyti esamus produktus, gautus iš duomenų bazės.

grąžinti (
 <>

"antraštė-konteineris">
Parduotuvės produktai</h3>
 </div>
 </header>


Pridėkite produktų duomenis į Supabase duomenų bazę</h3>


„sukurti produkto sudėtinį rodinį“>


Produkto pavadinimas</label>
 tipas ="tekstas"
 id="vardas"
 onChange={(e) => setName (e.target.value)}
 />
Produkto aprašymas</label>
 tipas ="tekstas"
 id="apibūdinimas"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Pridėti produktą
 </button>
 </div>
 </div>




Dabartiniai produktai in duomenų bazėje</h3>

"produktų sąrašo konteineris">
 {products.map((produktas) => (



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

Gauti duomenys produktų masyvas yra perduodamas kaip rekvizitas ir dinamiškai pateikiamas viduje Produkto kortelė komponentas naudojant žemėlapį funkcija.

3. Atnaujinkite ir ištrinkite esamus duomenis duomenų bazėje

Sukurti naują komponentai/ProductCard.js failą /src katalogas. Prieš apibrėždami tvarkyklės funkcijas, pažiūrėkime būsenas ir JSX elementus, kuriuos įdiegsite šiame komponente.

importuoti { useState } iš'reaguoti';
importuoti { supabase } iš„../utils/SupabaseClient“;
importuoti„./productcard.styles.css“;
eksportuotinumatytasfunkcijaProdukto kortelė(rekvizitai) {
konst produktas = butaforija.produktas;
konst [redagavimas, setEditing] = useState(klaidinga);
konst [pavadinimas, setName] = useState (produkto.pavadinimas);
konst [description, setDescription] = useState (product.description);
grąžinti (
"produkto kortelė">


 {redagavimas klaidinga? (


{product.name}</h5>


{product.description}</p>
"ištrynimo mygtukas" onClick={() => deleteProduct()}>Ištrinti produktą</button>
"redagavimo mygtukas" onClick={() => setEditing(tiesa)}>Redaguoti produktą</button>
 </div>
 ): (


Produkto redagavimas</h4>
"grįžimo mygtukas" onClick={() => setEditing(klaidinga)}>Grįžti</button>


"vardas">Produkto pavadinimas</label>
 tipas ="tekstas"
 id="vardas"
 defaultValue={produkto.pavadinimas}
 onChange={(e) => setName (e.target.value)}/>
"apibūdinimas">Produkto aprašymas</label>
 tipas ="tekstas"
 id="apibūdinimas"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


"Atnaujinimo mygtukas" onClick={() => updateProduct()}>Atnaujinti produktą in Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asyncfunkcijaatnaujintiProduktą() {
bandyti {
konst { duomenys, klaida } = laukti supabazė
 .from ('Produktai')
 .update({
 vardas: vardas,
 aprašymas: aprašymas
 })
 .eq('id', produktas.id);
jeigu (klaida) mesti klaida;
langas.location.reload();
 } sugauti (klaida) {
 įspėjimas (error.message);
 }
}

asyncfunkcijaištrintiProduktą() {
bandyti {
konst { duomenys, klaida } = laukti supabazė
 .from ('Produktai')
 .Ištrinti()
 .eq('id', produktas.id);
jeigu (klaida) mesti klaida;
langas.location.reload();
 } sugauti (klaida) {
 įspėjimas (error.message);
 }
}