Vsaka aplikacija CRUD potrebuje trdno bazo podatkov. Ugotovite, kako lahko Supabase izpolnjuje to vlogo za vaše aplikacije React.
React je revolucioniral način, kako razvijalci gradijo uporabniške vmesnike za spletne aplikacije. Njegova arhitektura, ki temelji na komponentah, in deklarativna sintaksa zagotavljata močan temelj za ustvarjanje interaktivnih in dinamičnih uporabniških izkušenj.
Kot razvijalec React je obvladovanje izvajanja operacij CRUD (ustvarjanje, branje, posodabljanje, brisanje) ključni prvi korak k izgradnji robustnih in učinkovitih spletnih rešitev.
Naučite se zgraditi preprosto aplikacijo React CRUD z uporabo Supabase Cloud Storage kot zaledne rešitve.
Rešitev Supabase Backend-as-a-Service
Ponudniki Backend-as-a-Service (BaaS)., tako kot Supabase, ponuja priročno alternativo za gradnjo popolnoma razvite zaledne storitve iz nič za vaše spletne aplikacije. V idealnem primeru te rešitve zagotavljajo široko paleto vnaprej zgrajenih zalednih storitev, ki so bistvenega pomena za nastavitev učinkovitega zalednega sistema za vaše spletne aplikacije React.
Z BaaS lahko uporabljate funkcije, kot so shranjevanje podatkov, sistemi za preverjanje pristnosti, naročnine v realnem času in več, ne da bi morali te storitve razvijati in vzdrževati neodvisno.
Z integracijo rešitev BaaS, kot je Supabase, v vaš projekt, lahko znatno skrajšate čas razvoja in dostave, medtem ko še vedno izkoristite robustne zaledne storitve.
Nastavite projekt za shranjevanje v oblaku Supabase
Za začetek pojdite na Spletno mesto Supabasein se prijavite za račun.
- Ko se prijavite za račun, se prijavite v svoj račun armaturna plošča strani.
- Kliknite na Nov projekt gumb.
- Izpolnite podrobnosti projekta in kliknite Ustvari nov projekt.
- Ko je projekt nastavljen, izberite in kliknite Urejevalnik SQL gumb za funkcije na plošči s funkcijami v levem podoknu.
- Zaženite spodnji stavek SQL v Urejevalnik SQL ustvariti demo tabelo. Vseboval bo podatke, ki jih boste uporabili z aplikacijo React.
ustvarititabela izdelki (
id bigint, ki je privzeto ustvarjen kot primarni ključ identitete,
besedilo imena,
opisno besedilo
);
Nastavite aplikacijo React CRUD
Ustvarite aplikacijo React, se pomaknite do korenskega imenika in ustvarite novo datoteko, .env, da nastavite nekatere spremenljivke okolja. Pojdite na svojo Supabase nastavitve stran, odprite API in kopirajte vrednosti za URL projekta in javni anon ključ. Prilepite jih v datoteko env:
REACT_APP_SUPABASE_URL = URL projekta
REACT_APP_SUPABASE_ANON_KEY = javni anon ključ
Nato zaženite ta ukaz, da namestite knjižnico JavaScript Supabase v svoj projekt React:
npm namestite @supabase/supabase-js
Konfigurirajte odjemalca Supabase
V src imenik, ustvarite novega utils/SupabaseClient.js datoteko in spodnjo kodo:
uvoz { createClient } od'@supabase/supabase-js';
konst supabaseURL = process.env. REACT_APP_SUPABASE_URL;
konst supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
izvozkonst supabase = createClient (supabaseURL, supabaseAnonKey);
Ta koda ustvari primerek odjemalca Supabase z zagotavljanjem URL-ja Supabase in javnega anon ključa, ki aplikaciji React omogoča komunikacijo z API-ji Supabase in izvajanje operacij CRUD.
Tukaj lahko najdete kodo tega projekta Repozitorij GitHub.
Izvedite operacije CRUD
Zdaj, ko ste uspešno nastavili shranjevanje v oblaku Supabase in svoj projekt React, implementirajte operacije CRUD v svoji aplikaciji React.
1. Dodajte podatke v zbirko podatkov
Odprite src/App.js datoteko, izbrišite kodo Boilerplate React in dodajte naslednje:
uvoz {useState, useEffect} od'reagirati';
uvoz ProductCard od'./components/ProductCard';
uvoz {supabase} od'./utils/SupabaseClient';
uvoz'./App.css';izvozprivzetofunkcijoaplikacija() {
konst [ime, setName] = useState('');
konst [opis, setDescription] = useState('');asinhfunkcijoaddProduct() {
poskusi {
konst { podatki, napaka } = čakati nadosnova
.od('izdelki')
.vstavi({
ime: ime,
opis: opis
})
.single();
če (napaka) metati napaka;
okno.location.reload();
} ulov (napaka) {
opozorilo (napaka.sporočilo);
}
}
Ta koda definira an addProduct funkcija obravnave, ki asinhrono vstavi nov zapis v izdelkov tabelo v zbirki podatkov v oblaku. Če je operacija vstavljanja uspešna, se bo stran znova naložila, da bo odražala posodobljen seznam izdelkov.
2. Branje podatkov iz zbirke podatkov v oblaku
Definirajte funkcijo obdelovalca za pridobivanje shranjenih podatkov iz baze podatkov.
konst [izdelki, setProducts] = useState([]);
asinhfunkcijogetProducts() {
poskusi {
konst { podatki, napaka } = čakati nadosnova
.od('izdelki')
.izberi('*')
.limit(10);če (napaka) metati napaka;
če (podatki != nič) {
setProducts (podatki);
}
} ulov (napaka) {
opozorilo (napaka.sporočilo);
}
}
useEffect(() => {
getProducts();
}, []);
Ta koda asinhrono pridobi podatke iz baze podatkov. Poizvedba za pridobitev pridobi vse podatke iz tabele izdelkov, pri čemer omeji rezultate na največ 10 zapisov in posodobi izdelki' stanje s pridobljenimi podatki.
The useEffectReact hook vodi getProducts deluje, ko je komponenta nameščena. To zagotavlja, da so podatki izdelkov pridobljeni in upodobljeni, ko je komponenta prvotno upodobljena. Nazadnje dodajte kodo, ki upodablja vhodne elemente JSX v brskalniku, da uporabnikom omogočite dodajanje izdelkov v bazo podatkov Supabase in prikaz obstoječih izdelkov, pridobljenih iz baze podatkov.
vrnitev (
<> "glavni vsebnik">Trgovina Izdelki</h3>
</div>
</header>Dodajte podatke o izdelkih v zbirko podatkov Supabase</h3>
"create-product-container">
Aktualni izdelki v baza podatkov</h3>
"vsebnik-seznama-izdelkov">
{products.map((izdelek) => (
</div>
))}
</div>
</>
);
}
Pridobljeni podatki v paleto izdelkov je posredovan kot rekvizit in dinamično upodobljen znotraj ProductCard komponento, ki uporablja zemljevid funkcijo.
3. Posodobite in izbrišite obstoječe podatke v zbirki podatkov
Ustvari novo komponente/ProductCard.js datoteka v /src imenik. Pred definiranjem funkcij obdelovalnika si poglejmo stanja in elemente JSX, ki jih boste implementirali v to komponento.
uvoz {useState} od'reagirati';
uvoz {supabase} od'../utils/SupabaseClient';
uvoz'./productcard.styles.css';izvozprivzetofunkcijoProductCard(rekviziti) {
konst izdelek = rekvizit.izdelek;
konst [urejanje, setEditing] = useState(lažno);
konst [name, setName] = useState (product.name);
konst [description, setDescription] = useState (product.description);
vrnitev (
"kartica izdelka">
{urejanje lažno? ({product.name}</h5>
{product.description}</p>
Ta koda ustvari ponovno uporabno ProductCard komponenta, ki prikazuje informacije o izdelku in omogoča urejanje in posodabljanje podrobnosti o izdelku v bazi podatkov Supabase.
Komponenta prejme a izdelek objekt kot rekvizit, ki vsebuje informacije o izdelku, ki bo prikazan, in upodobi kartico div z drugačno vsebino glede na stanje urejanja.
Sprva, od urejanje stanje je nastavljeno na lažno, prikaže ime izdelka, opis in gumbe za brisanje ali urejanje izdelka. Vendar, ko uporabnik klikne Uredi gumb, je stanje urejanja nastavljeno na prav, bo to upodobilo vnosna polja s trenutno izpolnjenimi vrednostmi, kar bo uporabniku omogočilo urejanje in posodabljanje imena in opisa izdelka v bazi podatkov. Zdaj pa definirajte nadgradnja funkcija obdelovalca. Dodajte to kodo pod izjavo držav v komponente/ProductCard.js mapa.
asinhfunkcijoupdateProduct() {
poskusi {
konst { podatki, napaka } = čakati nadosnova
.od('izdelki')
.nadgradnja({
ime: ime,
opis: opis
})
.eq('id', product.id);
če (napaka) metati napaka;
okno.location.reload();
} ulov (napaka) {
opozorilo (napaka.sporočilo);
}
}
Ta koda definira funkcijo asinhronega upravljalnika, ki posodablja podatke izdelka v bazi podatkov Supabase. Uporablja nadosnova primerek izvede operacijo posodobitve tako, da poda tabelo, nove vrednosti in pogoj, ki temelji na ID-ju izdelka, in po uspešni posodobitvi znova naloži okno. Končno definirajte Izbriši funkcija obdelovalca.
asinhfunkcijodeleteProduct() {
poskusi {
konst { podatki, napaka } = čakati nadosnova
.od('izdelki')
.delete()
.eq('id', product.id);
če (napaka) metati napaka;
okno.location.reload();
} ulov (napaka) {
opozorilo (napaka.sporočilo);
}
}
Uporabite Supabase za poenostavljene zaledne storitve
Supabase ponuja priročen način za racionalizacijo zalednih storitev neposredno s strani odjemalca, s čimer se odpravi potreba po pisanju zapletene zaledne kode. Poleg upravljanja podatkov nudi tudi podporo za različne zaledne storitve, kot je varen sistem za preverjanje pristnosti.
Zdaj, ko ste izvedeli o integraciji Supabase z Reactom, nadaljujte in raziščite, kako jo lahko integrirate z drugimi okviri na strani odjemalca in odkrijte, kako lahko izboljša vašo razvojno izkušnjo v različnih platforme.