Een CRUD React-applicatie bouwen met Supabase Cloud Storage

React heeft een revolutie teweeggebracht in de manier waarop ontwikkelaars gebruikersinterfaces voor webapplicaties bouwen. De op componenten gebaseerde architectuur en declaratieve syntaxis bieden een krachtige basis voor het creëren van interactieve en dynamische gebruikerservaringen.

Als React-ontwikkelaar is het beheersen van het implementeren van CRUD-bewerkingen (Create, Read, Update, Delete) een cruciale eerste stap in de richting van het bouwen van robuuste en efficiënte weboplossingen.

Leer hoe u een eenvoudige React CRUD-applicatie bouwt, met Supabase Cloud Storage als uw backend-oplossing.

Supabase Backend-as-a-Service-oplossing

Backend-as-a-Service (BaaS)-aanbieders, zoals Supabase, bieden een handig alternatief voor het vanaf het begin bouwen van een volwaardige backend-service voor uw webapplicaties. Idealiter bieden deze oplossingen een breed scala aan kant-en-klare backend-services die essentieel zijn voor het opzetten van een efficiënt backend-systeem voor uw React-webapplicaties.

Met BaaS kunt u functies zoals gegevensopslag, authenticatiesystemen, realtime abonnementen en meer gebruiken zonder dat u deze services onafhankelijk hoeft te ontwikkelen en onderhouden.

Door BaaS-oplossingen zoals Supabase in uw project te integreren, kunt u de ontwikkelings- en levertijd aanzienlijk verkorten terwijl u nog steeds profiteert van robuuste backend-services.

Zet een Supabase Cloud Storage-project op

Ga om te beginnen naar Supabase-website, en maak een account aan.

1. Zodra u zich aanmeldt voor een account, logt u in op uw account dashboard bladzijde.
2. Klik op de Nieuw project knop.
3. Vul de details van het project in en klik op Maak een nieuw project aan.
4. Terwijl het project is ingesteld, selecteert en klikt u op het SQL-editor functieknop in het functiepaneel in het linkerdeelvenster.
5. Voer de onderstaande SQL-instructie uit in de SQL-editor om een ​​demotabel te maken. Het bevat de gegevens die u met de React-applicatie gaat gebruiken.

   creërentafel producten (
    id bigint standaard gegenereerd als primaire identiteitssleutel,
    naam tekst,
    beschrijvende tekst
   );

Stel een React CRUD-applicatie in

Maak een React-applicatie, navigeer naar de hoofdmap en maak een nieuw bestand aan, .env, om enkele omgevingsvariabelen in te stellen. Ga naar je Supabase instellingen pagina, open de API sectie en kopieer de waarden voor project-URL En openbare anonieme sleutel. Plak deze in uw env-bestand:

REACT_APP_SUPABASE_URL = project-URL
REACT_APP_SUPABASE_ANON_KEY = openbare anonieme sleutel

Voer vervolgens deze opdracht uit om de JavaScript-bibliotheek van Supabase in uw React-project te installeren:

npm installeer @supabase/supabase-js

Configureer de Supabase-client

In de src map, maak een nieuwe utils/SupabaseClient.js bestand en de onderstaande code:

importeren { createClient } van'@supabase/supabase-js'; 
const supabaseURL = proces.env. REACT_APP_SUPABASE_URL;
const supabaseAnonKey = proces.env. REACT_APP_SUPABASE_ANON_KEY;
exporterenconst supabase = createClient (supabaseURL, supabaseAnonKey);

Deze code maakt een Supabase-clientinstantie door de Supabase-URL en een openbare anon-sleutel op te geven, waardoor de React-toepassing kan communiceren met de Supabase-API's en CRUD-bewerkingen kan uitvoeren.

U kunt de code van dit project hierin vinden GitHub-opslagplaats.

Implementeer de CRUD-operaties

Nu u de cloudopslag van Supabase en uw React-project met succes hebt ingesteld, implementeert u de CRUD-bewerkingen in uw React-applicatie.

1. Voeg gegevens toe aan de database

Open de src/App.js bestand, verwijder de boilerplate React-code en voeg het volgende toe:

importeren { useState, useEffect } van'Reageer';
importeren Productkaart van'./componenten/Productkaart';
importeren { supabase } van'./utils/SupabaseClient';
importeren'./App.css';
exporterenstandaardfunctieapp() {
const [naam, setnaam] = useState('');
const [beschrijving, setbeschrijving] = useState('');
asynchroonfunctieaddProduct() {
poging {
const { gegevens, fout } = wachten supabase
 .van('producten')
 .invoegen({
 naam naam,
 beschrijving: beschrijving
 })
 .enkel();
als (fout) gooien fout;
raam.locatie.herladen();
 } vangst (fout) {
 waarschuwing (foutmelding);
 }
 }

Deze code definieert een addProduct handler-functie die asynchroon een nieuw record invoegt in het producten tabel in de clouddatabase. Als het invoegen is gelukt, wordt de pagina opnieuw geladen om de bijgewerkte productlijst weer te geven.

2. Lees gegevens uit de clouddatabase

Definieer een handlerfunctie om de opgeslagen gegevens uit de database op te halen.

const [producten, setProducten] = useState([]);
asynchroonfunctiegetProducten() {
poging {
const { gegevens, fout } = wachten supabase
 .van('producten')
 .selecteer('*')
 .begrenzing(10);
als (fout) gooien fout;
als (gegevens != nul) {
 setProducten (gegevens);
 }
 } vangst (fout) {
 waarschuwing (foutmelding);
 }
 }
 gebruikEffect(() => {
 haalProducten();
 }, []);

Deze code haalt de gegevens asynchroon uit de database. De ophaalquery haalt alle gegevens op uit de productentabel, beperkt de resultaten tot maximaal 10 records en werkt de producten' staat met de opgehaalde gegevens.

De gebruikEffectReageer haak loopt de getProducten functioneren wanneer het onderdeel wordt gemonteerd. Dit zorgt ervoor dat de productgegevens worden opgehaald en weergegeven wanneer de component voor het eerst wordt weergegeven. Voeg ten slotte de code toe die JSX-invoerelementen in de browser weergeeft, zodat gebruikers producten kunnen toevoegen aan een Supabase-database en de bestaande producten kunnen weergeven die uit de database zijn opgehaald.

opbrengst (
 <>

"header-container">
Producten opslaan</h3>
 </div>
 </header>


Productgegevens toevoegen aan de Supabase-database</h3>


"maak-product-container">


Productnaam</label>
 type="tekst"
 identiteitsbewijs="naam"
 onChange={(e) => setName (e.target.value)}
 />
Productbeschrijving</label>
 type="tekst"
 identiteitsbewijs="beschrijving"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Product toevoegen
 </button>
 </div>
 </div>




Huidige producten in de databank</h3>

"product-lijst-container">
 {producten.kaart((Product) => (



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

De opgehaalde gegevens in de producten reeks wordt doorgegeven als rekwisieten en dynamisch weergegeven in de Productkaart onderdeel met behulp van de kaart functie.

3. Update en verwijder bestaande gegevens in de database

Maak een nieuwe aan componenten/ProductCard.js bestand in de /src map. Laten we, voordat we de handlerfuncties definiëren, de statussen en JSX-elementen bekijken die u in deze component gaat implementeren.

importeren { useState } van'Reageer';
importeren { supabase } van'../utils/SupabaseClient';
importeren'./productkaart.stijlen.css';
exporterenstandaardfunctieProductkaart(rekwisieten) {
const product = rekwisieten.product;
const [bewerken, setBewerken] = useState(vals);
const [naam, setnaam] = useState (product.naam);
const [beschrijving, setbeschrijving] = useState (product.beschrijving);
opbrengst (
"productkaart">


 {bewerken vals? (


{product.naam}</h5>


{product.beschrijving}</p>
"verwijder-knop" onClick={() => deleteProduct()}>Product verwijderen</button>
"bewerk-knop" onClick={() => setEditing(WAAR)}>Product bewerken</button>
 </div>
 ): (


Product bewerken</h4>
"terug-knop" onClick={() => setEditing(vals)}>Ga terug</button>


"naam">Productnaam</label>
 type="tekst"
 identiteitsbewijs="naam"
 defaultValue={product.name}
 onChange={(e) => setName (e.target.value)}/>
"beschrijving">Productbeschrijving</label>
 type="tekst"
 identiteitsbewijs="beschrijving"
 standaardwaarde={product.beschrijving}
 onChange={(e) => setDescription (e.target.value)}/>


"update-knop" onClick={() => updateProduct()}>Product bijwerken in Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asynchroonfunctieupdateProduct() {
poging {
const { gegevens, fout } = wachten supabase
 .van('producten')
 .update({
 naam naam,
 beschrijving: beschrijving
 })
 .eq('ID kaart', Product-ID);
als (fout) gooien fout;
raam.locatie.herladen();
 } vangst (fout) {
 waarschuwing (foutmelding);
 }
}

asynchroonfunctiedeleteProduct() {
poging {
const { gegevens, fout } = wachten supabase
 .van('producten')
 .verwijderen()
 .eq('ID kaart', Product-ID);
als (fout) gooien fout;
raam.locatie.herladen();
 } vangst (fout) {
 waarschuwing (foutmelding);
 }
}