Hvordan bygge en CRUD React-applikasjon med Supabase Cloud Storage

React har revolusjonert måten utviklere bygger brukergrensesnitt for webapplikasjoner på. Dens komponentbaserte arkitektur og deklarative syntaks gir et kraftig grunnlag for å skape interaktive og dynamiske brukeropplevelser.

Som React-utvikler er det å mestre hvordan man implementerer CRUD-operasjoner (Create, Read, Update, Delete) et avgjørende første skritt mot å bygge robuste og effektive nettløsninger.

Lær hvordan du bygger en enkel React CRUD-applikasjon ved å bruke Supabase Cloud Storage som din backend-løsning.

Supabase Backend-as-a-Service Solution

Backend-as-a-Service (BaaS)-leverandører, som Supabase, tilbyr et praktisk alternativ til å bygge en fullverdig backend-tjeneste fra bunnen av for webapplikasjonene dine. Ideelt sett gir disse løsningene et bredt spekter av forhåndsbygde backend-tjenester som er avgjørende for å sette opp et effektivt backend-system for React-nettapplikasjonene dine.

Med BaaS kan du bruke funksjoner som datalagring, autentiseringssystemer, sanntidsabonnementer og mer uten å måtte utvikle og vedlikeholde disse tjenestene uavhengig.

Ved å integrere BaaS-løsninger som Supabase i prosjektet ditt, kan du redusere utviklings- og leveringstiden betraktelig samtidig som du drar nytte av robuste backend-tjenester.

Sett opp et Supabase Cloud Storage-prosjekt

For å komme i gang, gå over til Supabase sin nettside, og registrer deg for en konto.

1. Når du har registrert deg for en konto, logger du på kontoen din dashbord side.
2. Klikk på Nytt prosjekt knapp.
3. Fyll ut prosjektets detaljer og klikk videre Opprett nytt prosjekt.
4. Med prosjektet satt opp, velg og klikk på SQL Editor funksjonsknapp på funksjonspanelet i venstre rute.
5. Kjør SQL-setningen nedenfor i SQL editor for å lage et demobord. Den vil inneholde dataene du vil bruke med React-applikasjonen.

   skapebord Produkter (
    id bigint generert som standard som primærnøkkel for identitet,
    navnetekst,
    beskrivelsestekst
   );

Sett opp en React CRUD-applikasjon

Opprett en React-applikasjon, naviger til rotkatalogen og lag en ny fil, .env, for å angi noen miljøvariabler. Gå over til Supabase innstillinger siden, åpne API delen, og kopier verdiene for prosjekt-URL og offentlig anonnøkkel. Lim inn disse i env-filen din:

REACT_APP_SUPABASE_URL = prosjekt-URL
REACT_APP_SUPABASE_ANON_KEY = offentlig anonnøkkel

Deretter kjører du denne kommandoen for å installere Supabases JavaScript-bibliotek i React-prosjektet ditt:

npm installer @supabase/supabase-js

Konfigurer Supabase-klienten

I src katalog, opprette en ny utils/SupabaseClient.js fil og koden nedenfor:

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

Denne koden oppretter en Supabase-klientforekomst ved å gi Supabase URL og en offentlig anonnøkkel, slik at React-applikasjonen kan kommunisere med Supabase APIer og utføre CRUD-operasjoner.

Du finner dette prosjektets kode i denne GitHub-depot.

Implementer CRUD-operasjonene

Nå som du har konfigurert Supabases skylagring og React-prosjektet ditt, implementer CRUD-operasjonene i React-applikasjonen din.

1. Legg til data i databasen

Åpne src/App.js fil, slett reaktorkoden og legg til følgende:

import { useState, useEffect } fra'reagere';
import Produktkort fra'./components/ProductCard';
import { supabase } fra'./utils/SupabaseClient';
import'./App.css';
eksportmisligholdefunksjonApp() {
konst [navn, settnavn] = brukState('');
konst [description, setDescription] = useState('');
asynkronfunksjonaddProduct() {
prøve {
konst { data, feil } = avvente supabase
 .fra('Produkter')
 .sett inn({
 navn: navn,
 beskrivelse: beskrivelse
 })
 .enkelt();
hvis (feil) kaste feil;
vindu.location.reload();
 } å fange (feil) {
 varsel (feil.melding);
 }
 }

Denne koden definerer en addProduct handlerfunksjon som asynkront setter inn en ny post i Produkter tabell i skydatabasen. Hvis innsettingsoperasjonen er vellykket, vil siden lastes inn på nytt for å gjenspeile den oppdaterte produktlisten.

2. Les data fra skydatabasen

Definer en behandlerfunksjon for å hente de lagrede dataene fra databasen.

konst [produkter, settProdukter] = brukState([]);
asynkronfunksjongetProducts() {
prøve {
konst { data, feil } = avvente supabase
 .fra('Produkter')
 .plukke ut('*')
 .grense(10);
hvis (feil) kaste feil;
hvis (data != null) {
 settProdukter (data);
 }
 } å fange (feil) {
 varsel (feil.melding);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

Denne koden henter dataene asynkront fra databasen. Henting-spørringen henter alle dataene fra produkttabellen, begrenser resultatene til maksimalt 10 poster, og oppdaterer Produkter' tilstand med de hentede dataene.

De useEffectReagerkrok kjører getProducts funksjon når komponenten monteres. Dette sikrer at produktenes data hentes og gjengis når komponenten først gjengis. Til slutt legger du til koden som gjengir input JSX-elementer i nettleseren for å tillate brukere å legge til produkter til en Supabase-database og vise de eksisterende produktene hentet fra databasen.

komme tilbake (
 <>

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


Legg til produktdata til Supabase-databasen</h3>


"skape-produkt-beholder">


Produktnavn</label>
 type="tekst"
 id="Navn"
 onChange={(e) => setName (e.target.value)}
 />
Produktbeskrivelse</label>
 type="tekst"
 id="beskrivelse"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Legg til produkt
 </button>
 </div>
 </div>




Aktuelle produkter i databasen</h3>

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



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

De hentede dataene i produkt utvalg sendes som rekvisitter og gjengis dynamisk i Produktkort komponent ved hjelp av kart funksjon.

3. Oppdater og slett eksisterende data i databasen

Lage en ny komponenter/ProductCard.js fil i /src katalog. Før du definerer behandlerfunksjonene, la oss se tilstandene og JSX-elementene du skal implementere i denne komponenten.

import { useState } fra'reagere';
import { supabase } fra'../utils/SupabaseClient';
import'./productcard.styles.css';
eksportmisligholdefunksjonProduktkort(Rekvisitter) {
konst produkt = rekvisitter.produkt;
konst [editing, setEditing] = useState(falsk);
konst [navn, settnavn] = brukState (produkt.navn);
konst [description, setDescription] = useState (product.description);
komme tilbake (
"produktkort">


 {redigering falsk? (


{product.name}</h5>


{product.description}</p>
"slett-knapp" onClick={() => deleteProduct()}>Slett produkt</button>
"rediger-knapp" onClick={() => setRedigering(ekte)}>Rediger produkt</button>
 </div>
 ): (


Redigering av produkt</h4>
"gå-tilbake-knapp" onClick={() => setRedigering(falsk)}>Gå tilbake</button>


"Navn">Produktnavn</label>
 type="tekst"
 id="Navn"
 defaultValue={product.name}
 onChange={(e) => setName (e.target.value)}/>
"beskrivelse">Produktbeskrivelse</label>
 type="tekst"
 id="beskrivelse"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


"oppdateringsknapp" onClick={() => updateProduct()}>Oppdater produkt i Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asynkronfunksjonoppdater Produkt() {
prøve {
konst { data, feil } = avvente supabase
 .fra('Produkter')
 .Oppdater({
 navn: navn,
 beskrivelse: beskrivelse
 })
 .eq('id', Produkt ID);
hvis (feil) kaste feil;
vindu.location.reload();
 } å fange (feil) {
 varsel (feil.melding);
 }
}

asynkronfunksjonslett Produkt() {
prøve {
konst { data, feil } = avvente supabase
 .fra('Produkter')
 .delete()
 .eq('id', Produkt ID);
hvis (feil) kaste feil;
vindu.location.reload();
 } å fange (feil) {
 varsel (feil.melding);
 }
}