Kuinka rakentaa CRUD React -sovellus Supabase-pilvitallennustilan avulla

React on mullistanut tavan, jolla kehittäjät rakentavat käyttöliittymiä verkkosovelluksiin. Sen komponenttipohjainen arkkitehtuuri ja deklaratiivinen syntaksi tarjoavat tehokkaan perustan interaktiivisten ja dynaamisten käyttökokemusten luomiselle.

React-kehittäjänä CRUD (Create, Read, Update, Delete) -toimintojen toteuttamisen hallitseminen on tärkeä ensimmäinen askel kohti kestävien ja tehokkaiden verkkoratkaisujen rakentamista.

Opi rakentamaan yksinkertainen React CRUD -sovellus käyttämällä Supabase Cloud Storagea taustaratkaisuna.

Supabase Backend-as-a-Service -ratkaisu

Backend-as-a-Service (BaaS) -palveluntarjoajat, kuten Supabase, tarjoavat kätevän vaihtoehdon täysimittaisen taustapalvelun rakentamiselle alusta alkaen verkkosovelluksille. Ihannetapauksessa nämä ratkaisut tarjoavat laajan valikoiman valmiiksi rakennettuja taustapalveluita, jotka ovat välttämättömiä tehokkaan taustajärjestelmän luomiseksi React-verkkosovelluksille.

BaaS: n avulla voit käyttää ominaisuuksia, kuten tietojen tallennusta, todennusjärjestelmiä, reaaliaikaisia ​​tilauksia ja paljon muuta ilman, että sinun tarvitsee kehittää ja ylläpitää näitä palveluita itsenäisesti.

Integroimalla BaaS-ratkaisut, kuten Supabase, projektiisi, voit lyhentää merkittävästi kehitys- ja toimitusaikaa samalla kun hyödyt vankkaista taustapalveluista.

Supabase-pilvitallennusprojektin määrittäminen

Aloita siirtymällä kohtaan Supabasen verkkosivustoja rekisteröidy tilille.

1. Kun olet luonut tilin, kirjaudu sisään tilillesi kojelauta sivu.
2. Klikkaa Uusi projekti -painiketta.
3. Täytä projektin tiedot ja napsauta Luo uusi projekti.
4. Kun projekti on määritetty, valitse ja napsauta SQL-editori ominaisuuspainike vasemman ruudun ominaisuuspaneelissa.
5. Suorita alla oleva SQL-lause kohteessa SQL-editori luodaksesi esittelytaulukon. Se sisältää tiedot, joita käytät React-sovelluksen kanssa.

   luodapöytä Tuotteet (
    id bigint luotu oletuksena identiteetin ensisijaisena avaimena,
    nimen teksti,
    kuvausteksti
   );

Määritä React CRUD -sovellus

Luo React-sovellus, siirry juurihakemistoon ja luo uusi tiedosto, .env, asettaaksesi joitain ympäristömuuttujia. Siirry Supabasellesi asetukset sivu, avaa API -osio ja kopioi arvot kohteelle projektin URL-osoite ja julkinen anon-avain. Liitä nämä env-tiedostoosi:

REACT_APP_SUPABASE_URL = projektin URL-osoite
REACT_APP_SUPABASE_ANON_KEY = julkinen anon-avain

Suorita seuraavaksi tämä komento asentaaksesi Supabasen JavaScript-kirjasto React-projektiisi:

npm asennus @supabase/supabase-js

Määritä Supabase Client

Vuonna src hakemistoon, luo uusi utils/SupabaseClient.js tiedosto ja alla oleva koodi:

tuonti { luo asiakas } alkaen'@supabase/supabase-js'; 
konst supabaseURL = process.env. REACT_APP_SUPABASE_URL;
konst supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
viedäkonst supabase = CreateClient (supabaseURL, supabaseAnonKey);

Tämä koodi luo Supabase-asiakasesiintymän antamalla Supabase-URL-osoitteen ja julkisen anon-avaimen, jolloin React-sovellus voi kommunikoida Supabase-sovellusliittymien kanssa ja suorittaa CRUD-toimintoja.

Löydät tämän projektin koodin tästä GitHub-arkisto.

Toteuta CRUD-toiminnot

Nyt kun olet onnistuneesti määrittänyt Supabasen pilvitallennustilan ja React-projektisi, toteuta CRUD-toiminnot React-sovelluksessasi.

1. Lisää tietoja tietokantaan

Avaa src/App.js tiedosto, poista tiivistelmä React-koodi ja lisää seuraava:

tuonti { useState, useEffect } alkaen'reagoi';
tuonti Tuotekortti alkaen'./components/ProductCard';
tuonti { supabase } alkaen'./utils/SupabaseClient';
tuonti'./App.css';
viedäoletuksenatoimintoSovellus() {
konst [nimi, setName] = useState('');
konst [description, setDescription] = useState('');
asynktoimintoaddProduct() {
yrittää {
konst { data, error } = odottaa supabase
 .from('Tuotteet')
 .insert({
 nimi: nimi,
 kuvaus: kuvaus
 })
 .yksittäinen();
jos (virhe) heittää virhe;
ikkuna.location.reload();
 } ottaa kiinni (virhe) {
 hälytys (error.message);
 }
 }

Tämä koodi määrittelee an addProduct Käsittelijätoiminto, joka lisää asynkronisesti uuden tietueen Tuotteet taulukko pilvitietokannassa. Jos lisäys onnistuu, sivu latautuu uudelleen vastaamaan päivitettyä tuoteluetteloa.

2. Lue tietoja pilvitietokannasta

Määritä käsittelijätoiminto tallennetun tiedon hakemiseksi tietokannasta.

konst [tuotteet, setProducts] = useState([]);
asynktoimintogetProducts() {
yrittää {
konst { data, error } = odottaa supabase
 .from('Tuotteet')
 .select('*')
 .raja(10);
jos (virhe) heittää virhe;
jos (tiedot != tyhjä) {
 setProducts (tiedot);
 }
 } ottaa kiinni (virhe) {
 hälytys (error.message);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

Tämä koodi noutaa tiedot tietokannasta asynkronisesti. Hakukysely hakee kaikki tiedot tuotetaulukosta ja rajoittaa tulokset enintään 10 tietueeseen ja päivittää Tuotteet' tila haettujen tietojen kanssa.

The useEffectReaktiokoukku ajaa getProducts toimii, kun komponentti kiinnitetään. Tämä varmistaa, että tuotteiden tiedot noudetaan ja renderöidään, kun komponentti hahmonnetaan alun perin. Lisää lopuksi koodi, joka tekee syötetyt JSX-elementit selaimessa, jotta käyttäjät voivat lisätä tuotteita Supabase-tietokantaan ja näyttää tietokannasta haetut olemassa olevat tuotteet.

palata (
 <>

"header-container">
Kaupan tuotteet</h3>
 </div>
 </header>


Lisää tuotetiedot Supabase-tietokantaan</h3>


"luo tuote-säilö">


Tuotteen nimi</label>
 tyyppi="teksti"
 id="nimi"
 onChange={(e) => setName (e.target.value)}
 />
Tuotekuvaus</label>
 tyyppi="teksti"
 id="kuvaus"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Lisää tuote
 </button>
 </div>
 </div>




Nykyiset tuotteet sisään tietokanta</h3>

"tuoteluettelo-säiliö">
 {products.map((tuote) => (



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

Haettu data tiedostossa tuotevalikoima välitetään rekvisiittana ja renderöidään dynaamisesti sisällä Tuotekortti komponenttia käyttämällä kartta toiminto.

3. Päivitä ja poista tietokannassa olevat tiedot

Luoda uusi komponentit/ProductCard.js tiedosto tiedostoon /src hakemistosta. Ennen kuin määrität käsittelijän funktiot, katsotaan tilat ja JSX-elementit, jotka toteutat tässä komponentissa.

tuonti { useState } alkaen'reagoi';
tuonti { supabase } alkaen'../utils/SupabaseClient';
tuonti'./productcard.styles.css';
viedäoletuksenatoimintoTuotekortti(rekvisiitta) {
konst tuote = props.product;
konst [editing, setEditing] = useState(väärä);
konst [nimi, setName] = useState (tuote.nimi);
konst [kuvaus, setDescription] = useState (tuote.kuvaus);
palata (
"tuotekortti">


 {editointi väärä? (


{product.name}</h5>


{product.description}</p>
"poista-painike" onClick={() => deleteProduct()}>Poista tuote</button>
"muokkaa-painike" onClick={() => setEditing(totta)}>Muokkaa tuotetta</button>
 </div>
 ): (


Tuotteen muokkaaminen</h4>
"takaisin-painike" onClick={() => setEditing(väärä)}>Palaa takaisin</button>


"nimi">Tuotteen nimi</label>
 tyyppi="teksti"
 id="nimi"
 oletusarvo={tuote.nimi}
 onChange={(e) => setName (e.target.value)}/>
"kuvaus">Tuotekuvaus</label>
 tyyppi="teksti"
 id="kuvaus"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


"päivityspainike" onClick={() => updateProduct()}>Päivitä tuote sisään Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asynktoimintopäivitä tuote() {
yrittää {
konst { data, error } = odottaa supabase
 .from('Tuotteet')
 .päivittää({
 nimi: nimi,
 kuvaus: kuvaus
 })
 .eq('id', Tuotetunnus);
jos (virhe) heittää virhe;
ikkuna.location.reload();
 } ottaa kiinni (virhe) {
 hälytys (error.message);
 }
}

asynktoimintopoista tuote() {
yrittää {
konst { data, error } = odottaa supabase
 .from('Tuotteet')
 .poistaa()
 .eq('id', Tuotetunnus);
jos (virhe) heittää virhe;
ikkuna.location.reload();
 } ottaa kiinni (virhe) {
 hälytys (error.message);
 }
}