Sådan bygger du en CRUD React-applikation med Supabase Cloud Storage

React har revolutioneret den måde, udviklere bygger brugergrænseflader til webapplikationer på. Dens komponentbaserede arkitektur og deklarative syntaks giver et stærkt grundlag for at skabe interaktive og dynamiske brugeroplevelser.

Som React-udvikler er det at mestre, hvordan man implementerer CRUD-operationer (Create, Read, Update, Delete) et afgørende første skridt mod at opbygge robuste og effektive webløsninger.

Lær, hvordan du bygger en simpel React CRUD-applikation ved at bruge Supabase Cloud Storage som din backend-løsning.

Supabase Backend-as-a-Service-løsning

Backend-as-a-Service (BaaS) udbydere, ligesom Supabase, tilbyder et praktisk alternativ til at bygge en fuldgyldig backend-tjeneste fra bunden til dine webapplikationer. Ideelt set giver disse løsninger en bred vifte af præbyggede backend-tjenester, der er afgørende for at opsætte et effektivt backend-system til dine React-webapplikationer.

Med BaaS kan du bruge funktioner som datalagring, autentificeringssystemer, realtidsabonnementer og mere uden at skulle udvikle og vedligeholde disse tjenester selvstændigt.

Ved at integrere BaaS-løsninger som Supabase i dit projekt, kan du reducere udviklings- og forsendelsestiden markant, mens du stadig nyder godt af robuste backend-tjenester.

Konfigurer et Supabase Cloud Storage-projekt

For at komme i gang skal du gå over til Supabases hjemmeside, og tilmeld dig en konto.

1. Når du har oprettet en konto, skal du logge ind på din konto dashboard side.
2. Klik på Nyt projekt knap.
3. Udfyld projektets detaljer og klik videre Opret nyt projekt.
4. Med projektet opsat skal du vælge og klikke på SQL Editor funktionsknap på funktionspanelet i venstre rude.
5. Kør SQL-sætningen nedenfor i SQL editor at oprette en demo-tabel. Det vil indeholde de data, du vil bruge med React-applikationen.

   skabbord Produkter (
    id bigint genereret som standard som identitets primær nøgle,
    navn tekst,
    beskrivelsestekst
   );

Konfigurer en React CRUD-applikation

Opret en React-applikation, naviger til rodmappen, og opret en ny fil, .env, for at indstille nogle miljøvariabler. Gå over til din Supabase indstillinger side, skal du åbne API afsnit, og kopier værdierne for projekt URL og offentlig anon nøgle. Indsæt disse i din env-fil:

REACT_APP_SUPABASE_URL = projekt-URL
REACT_APP_SUPABASE_ANON_KEY = offentlig anonnøgle

Kør derefter denne kommando for at installere Supabases JavaScript-bibliotek i dit React-projekt:

npm installer @supabase/supabase-js

Konfigurer Supabase-klienten

I src mappe, skal du oprette en ny utils/SupabaseClient.js fil og koden nedenfor:

importere { createClient } fra'@supabase/supabase-js'; 
konst supabaseURL = proces.env. REACT_APP_SUPABASE_URL;
konst supabaseAnonKey = proces.env. REACT_APP_SUPABASE_ANON_KEY;
eksportkonst supabase = createClient (supabaseURL, supabaseAnonKey);

Denne kode opretter en Supabase-klientinstans ved at give Supabase-URL'en og en offentlig anon-nøgle, hvilket tillader React-applikationen at kommunikere med Supabase API'erne og udføre CRUD-operationer.

Du kan finde dette projekts kode i denne GitHub-depot.

Implementer CRUD Operations

Nu hvor du har opsat Supabases cloud-lager og dit React-projekt, skal du implementere CRUD-operationerne i din React-applikation.

1. Tilføj data til databasen

Åbn src/App.js fil, slet boilerplate React-koden, og tilføj følgende:

importere { useState, useEffect } fra'reagere';
importere Produktkort fra'./components/ProductCard';
importere { supabase } fra'./utils/SupabaseClient';
importere'./App.css';
eksportStandardfungereApp() {
konst [navn, sætnavn] = useState('');
konst [description, setDescription] = useState('');
asynkronfungeretilføje Produkt() {
prøve {
konst { data, fejl } = vente supabase
 .fra('Produkter')
 .insert({
 navn: navn,
 beskrivelse: beskrivelse
 })
 .enkelt();
hvis (fejl) kaste fejl;
vindue.location.reload();
 } fangst (fejl) {
 advarsel (fejl.meddelelse);
 }
 }

Denne kode definerer en tilføje Produkt handlerfunktion, der asynkront indsætter en ny post i Produkter tabel i skydatabasen. Hvis indsættelseshandlingen lykkes, genindlæses siden for at afspejle den opdaterede produktliste.

2. Læs data fra skydatabasen

Definer en behandlerfunktion til at hente de lagrede data fra databasen.

konst [produkter, sætProdukter] = useState([]);
asynkronfungeregetProducts() {
prøve {
konst { data, fejl } = vente supabase
 .fra('Produkter')
 .Vælg('*')
 .begrænse(10);
hvis (fejl) kaste fejl;
hvis (data != nul) {
 sætProdukter (data);
 }
 } fangst (fejl) {
 advarsel (fejl.meddelelse);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

Denne kode henter asynkront data fra databasen. Henteforespørgslen henter alle data fra produkttabellen, begrænser resultaterne til maksimalt 10 poster, og opdaterer Produkter' tilstand med de hentede data.

Det useEffectReaktionskrog kører getProducts funktion, når komponenten monteres. Dette sikrer, at produkternes data hentes og gengives, når komponenten oprindeligt gengives. Tilføj endelig koden, der gengiver input JSX-elementer på browseren for at tillade brugere at tilføje produkter til en Supabase-database og vise de eksisterende produkter hentet fra databasen.

Vend tilbage (
 <>

"header-container">
Butiksprodukter</h3>
 </div>
 </header>


Tilføj produktdata til Supabase-databasen</h3>


"opret-produkt-beholder">


Produktnavn</label>
 type="tekst"
 id="navn"
 onChange={(e) => sætNavn (e.target.value)}
 />
Produktbeskrivelse</label>
 type="tekst"
 id="beskrivelse"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Tilføj produkt
 </button>
 </div>
 </div>




Aktuelle produkter i databasen</h3>

"produktliste-beholder">
 {products.map((produkt) => (



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

De hentede data i produkt array sendes som rekvisitter og gengives dynamisk inden for Produktkort komponent ved hjælp af kort fungere.

3. Opdater og slet eksisterende data i databasen

Opret en ny komponenter/ProductCard.js fil i /src vejviser. Før du definerer håndteringsfunktionerne, lad os se de tilstande og JSX-elementer, du vil implementere i denne komponent.

importere { useState } fra'reagere';
importere { supabase } fra'../utils/SupabaseClient';
importere'./productcard.styles.css';
eksportStandardfungereProduktkort(rekvisitter) {
konst produkt = rekvisitter.produkt;
konst [editing, setEditing] = useState(falsk);
konst [navn, sætnavn] = useState (produkt.navn);
konst [description, setDescription] = useState (product.description);
Vend tilbage (
"produktkort">


 {redigering falsk? (


{product.name}</h5>


{product.description}</p>
"slet-knap" onClick={() => deleteProduct()}>Slet produkt</button>
"rediger-knap" onClick={() => sætRedigering(rigtigt)}>Rediger produkt</button>
 </div>
 ): (


Redigering af produkt</h4>
"gå-tilbage-knap" onClick={() => sætRedigering(falsk)}>Gå tilbage</button>


"navn">Produktnavn</label>
 type="tekst"
 id="navn"
 defaultValue={produkt.navn}
 onChange={(e) => sætNavn (e.target.value)}/>
"beskrivelse">Produktbeskrivelse</label>
 type="tekst"
 id="beskrivelse"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


"opdatering-knap" onClick={() => updateProduct()}>Opdater produkt i Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asynkronfungereopdatere Produkt() {
prøve {
konst { data, fejl } = vente supabase
 .fra('Produkter')
 .update({
 navn: navn,
 beskrivelse: beskrivelse
 })
 .eq('id', produkt.id);
hvis (fejl) kaste fejl;
vindue.location.reload();
 } fangst (fejl) {
 advarsel (fejl.meddelelse);
 }
}

asynkronfungereslet Produkt() {
prøve {
konst { data, fejl } = vente supabase
 .fra('Produkter')
 .delete()
 .eq('id', produkt.id);
hvis (fejl) kaste fejl;
vindue.location.reload();
 } fangst (fejl) {
 advarsel (fejl.meddelelse);
 }
}