Kuidas luua CRUD React rakendust Supabase'i pilvesalvestusega

React on muutnud pöörde viisi, kuidas arendajad veebirakenduste jaoks kasutajaliideseid loovad. Selle komponendipõhine arhitektuur ja deklaratiivne süntaks loovad võimsa aluse interaktiivsete ja dünaamiliste kasutajakogemuste loomiseks.

Reacti arendajana on CRUD-i (loomine, lugemine, värskendamine, kustutamine) rakendamise valdamine oluline esimene samm tugevate ja tõhusate veebilahenduste loomise suunas.

Siit saate teada, kuidas luua lihtsat React CRUD rakendust, kasutades taustalahendusena Supabase Cloud Storage.

Supabase'i taustalahendus teenusena

Backend-as-a-Service (BaaS) pakkujad, nagu Supabase, pakuvad mugavat alternatiivi teie veebirakenduste jaoks täieliku taustateenuse loomisele nullist. Ideaalis pakuvad need lahendused laia valikut eelehitatud taustateenuseid, mis on teie Reacti veebirakenduste jaoks tõhusa taustasüsteemi seadistamiseks hädavajalikud.

BaaS-iga saate kasutada selliseid funktsioone nagu andmete salvestamine, autentimissüsteemid, reaalajas tellimused ja palju muud, ilma et peaksite neid teenuseid iseseisvalt arendama ja hooldama.

Integreerides oma projekti BaaS-i lahendusi nagu Supabase, saate oluliselt vähendada arendus- ja tarneaega, saades samas kasu tugevatest taustateenustest.

Supabase'i pilvesalvestusprojekti seadistamine

Alustamiseks minge aadressile Supabase veebisaitja registreerige konto.

1. Kui olete konto registreerinud, logige oma kontole sisse armatuurlaud lehel.
2. Klõpsake nuppu Uus projekt nuppu.
3. Täitke projekti andmed ja klõpsake nuppu Loo uus projekt.
4. Kui projekt on seadistatud, valige ja klõpsake nuppu SQL-redaktor funktsiooninupp vasakpoolsel paanil funktsioonide paneelil.
5. Käivitage allolev SQL-lause rakenduses SQL-redaktor demotabeli loomiseks. See sisaldab andmeid, mida kasutate rakendusega React.

   luualaud tooted (
    id bigint genereeritakse vaikimisi identiteedi primaarvõtmena,
    nime tekst,
    kirjeldav tekst
   );

React CRUD rakenduse seadistamine

Looge rakendus React, navigeerige juurkataloogi ja looge uus fail, .env, et määrata mõned keskkonnamuutujad. Suunduge oma Supabaasi seaded leht, avage API ja kopeerige väärtused projekti URL ja avalik anonvõti. Kleepige need oma env-faili:

REACT_APP_SUPABASE_URL = projekti URL
REACT_APP_SUPABASE_ANON_KEY = avalik anonvõti

Järgmisena käivitage see käsk Supabase'i JavaScripti teegi installimiseks oma Reacti projekti:

npm install @supabase/supabase-js

Supabase'i kliendi konfigureerimine

Aastal src kataloog, looge uus utils/SupabaseClient.js fail ja allolev kood:

importida { CreateClient } alates'@supabase/supabase-js'; 
konst supabaseURL = process.env. REACT_APP_SUPABASE_URL;
konst supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
eksportidakonst supabase = createClient (supabaseURL, supabaseAnonKey);

See kood loob Supabase'i kliendi eksemplari, pakkudes Supabase'i URL-i ja avaliku anonvõtme, võimaldades rakendusel React suhelda Supabase'i API-dega ja teha CRUD-toiminguid.

Selle projekti koodi leiate siit GitHubi hoidla.

Rakendage CRUD-i toiminguid

Nüüd, kui olete Supabase'i pilvmälu ja oma Reacti projekti edukalt seadistanud, rakendage oma Reacti rakenduses CRUD-i toimingud.

1. Andmete lisamine andmebaasi

Ava src/App.js faili, kustutage reageerimiskood ja lisage järgmine:

importida { useState, useEffect } alates'reageeri';
importida Tootekaart alates'./components/ProductCard';
importida { supabase } alates'./utils/SupabaseClient';
importida'./App.css';
eksportidavaikimisifunktsiooniRakendus() {
konst [nimi, setName] = useState('');
konst [kirjeldus, setDescription] = useState('');
asünkrfunktsioonitoote lisamine() {
proovige {
konst { andmed, viga } = ootama supabaas
 .from('tooted')
 .insert({
 nimi: nimi,
 kirjeldus: kirjeldus
 })
 .single();
kui (viga) viskama viga;
aken.location.reload();
 } püüda (viga) {
 hoiatus (error.message);
 }
 }

See kood määratleb an toote lisamine käitleja funktsioon, mis lisab asünkroonselt uue kirje tooted tabel pilvandmebaasis. Kui sisestamise toiming õnnestub, laaditakse leht uuesti, et kajastada värskendatud tooteloendit.

2. Lugege andmeid pilvandmebaasist

Määrake töötleja funktsioon salvestatud andmete toomiseks andmebaasist.

konst [products, setProducts] = useState([]);
asünkrfunktsioonihankigeProducts() {
proovige {
konst { andmed, viga } = ootama supabaas
 .from('tooted')
 .select('*')
 .limit(10);
kui (viga) viskama viga;
kui (andmed != null) {
 komplektTooted (andmed);
 }
 } püüda (viga) {
 hoiatus (error.message);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

See kood tõmbab andmed andmebaasist asünkroonselt. Tõmbamispäring hangib toodete tabelist kõik andmed, piirates tulemuste maksimaalselt 10 kirjet ja värskendab tooted' olek koos hangitud andmetega.

The useEffectReageerimiskonks jookseb hankigeProducts funktsioon komponendi paigaldamisel. See tagab, et toodete andmed tuuakse ja renderdatakse komponendi esmasel renderdamisel. Lõpuks lisage kood, mis renderdab brauseris JSX-i sisendelemente, et võimaldada kasutajatel lisada tooteid Supabase'i andmebaasi ja kuvada andmebaasist hangitud olemasolevad tooted.

tagasi (
 <>

"päis-konteiner">
Kaupluse tooted</h3>
 </div>
 </header>


Lisa toodete andmed Supabase andmebaasi</h3>


"loo-toote-konteiner">


Toote nimi</label>
 tüüp="tekst"
 id="nimi"
 onChange={(e) => setName (e.target.value)}
 />
Toote kirjeldus</label>
 tüüp="tekst"
 id="kirjeldus"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Lisa toode
 </button>
 </div>
 </div>




Praegused tooted sisse andmebaasi</h3>

"tooteloendi konteiner">
 {products.map((toode) => (



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

Toodud andmed failis toodete massiiv edastatakse rekvisiidina ja renderdatakse dünaamiliselt selle sees Tootekaart komponenti kasutades kaart funktsiooni.

3. Värskendage ja kustutage andmebaasis olevaid andmeid

Loo uus komponendid/ProductCard.js faili /src kataloog. Enne töötleja funktsioonide määratlemist vaatame olekuid ja JSX-i elemente, mida selles komponendis rakendate.

importida { useState } alates'reageeri';
importida { supabase } alates'../utils/SupabaseClient';
importida'./productcard.styles.css';
eksportidavaikimisifunktsiooniTootekaart(rekvisiidid) {
konst toode = props.product;
konst [redigeerimine, setEditing] = useState(vale);
konst [nimi, setName] = useState (toote.nimi);
konst [kirjeldus, setDescription] = useState (toode.kirjeldus);
tagasi (
"tootekaart">


 {toimetamine vale? (


{product.name}</h5>


{product.description}</p>
"kustutamisnupp" onClick={() => deleteProduct()}>Kustuta toode</button>
"redigeerimise nupp" onClick={() => setEditing(tõsi)}>Muuda toodet</button>
 </div>
 ): (


Toote redigeerimine</h4>
"tagasi-nupp" onClick={() => setEditing(vale)}>Mine tagasi</button>


"nimi">Toote nimi</label>
 tüüp="tekst"
 id="nimi"
 defaultValue={toote.nimi}
 onChange={(e) => setName (e.target.value)}/>
"kirjeldus">Toote kirjeldus</label>
 tüüp="tekst"
 id="kirjeldus"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


"värskenda nupp" onClick={() => updateProduct()}>Uuenda toodet sisse Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asünkrfunktsioonitoote värskendamine() {
proovige {
konst { andmed, viga } = ootama supabaas
 .from('tooted')
 .update({
 nimi: nimi,
 kirjeldus: kirjeldus
 })
 .eq('id', product.id);
kui (viga) viskama viga;
aken.location.reload();
 } püüda (viga) {
 hoiatus (error.message);
 }
}

asünkrfunktsiooniKustuta toode() {
proovige {
konst { andmed, viga } = ootama supabaas
 .from('tooted')
 .delete()
 .eq('id', product.id);
kui (viga) viskama viga;
aken.location.reload();
 } püüda (viga) {
 hoiatus (error.message);
 }
}