Hur man bygger en CRUD React-applikation med Supabase Cloud Storage

React har revolutionerat hur utvecklare bygger användargränssnitt för webbapplikationer. Dess komponentbaserade arkitektur och deklarativa syntax ger en kraftfull grund för att skapa interaktiva och dynamiska användarupplevelser.

Som React-utvecklare är det ett avgörande första steg mot att bygga robusta och effektiva webblösningar att bemästra hur man implementerar CRUD-operationer (Create, Read, Update, Delete).

Lär dig hur du bygger en enkel React CRUD-applikation med Supabase Cloud Storage som din backend-lösning.

Supabase Backend-as-a-Service Solution

Backend-as-a-Service (BaaS)-leverantörer, liksom Supabase, erbjuder ett bekvämt alternativ till att bygga en fullfjädrad backend-tjänst från grunden för dina webbapplikationer. Helst ger dessa lösningar ett brett utbud av förbyggda backend-tjänster som är nödvändiga för att sätta upp ett effektivt backend-system för dina React-webbapplikationer.

Med BaaS kan du använda funktioner som datalagring, autentiseringssystem, realtidsprenumerationer och mer utan att behöva utveckla och underhålla dessa tjänster självständigt.

Genom att integrera BaaS-lösningar som Supabase i ditt projekt kan du avsevärt minska utvecklings- och leveranstiden samtidigt som du drar nytta av robusta backend-tjänster.

Konfigurera ett Supabase Cloud Storage-projekt

För att komma igång, gå över till Supabases hemsida, och registrera dig för ett konto.

1. När du har registrerat dig för ett konto, logga in på ditt konto instrumentbräda sida.
2. Klicka på Nytt projekt knapp.
3. Fyll i projektets uppgifter och klicka vidare Skapa nytt projekt.
4. Med projektet inställt, välj och klicka på SQL Editor funktionsknapp på funktionspanelen till vänster.
5. Kör SQL-satsen nedan i SQL-redigerare för att skapa en demotabell. Den kommer att hålla data som du kommer att använda med React-applikationen.

   skapatabell Produkter (
    id-bigint genereras som standard som primärnyckel för identitet,
    namntext,
    beskrivningstext
   );

Konfigurera en React CRUD-applikation

Skapa en React-applikation, navigera till rotkatalogen och skapa en ny fil, .env, för att ställa in några miljövariabler. Gå över till din Supabase inställningar sida, öppna API avsnitt och kopiera värdena för projekt-URL och offentlig anonnyckel. Klistra in dessa i din env-fil:

REACT_APP_SUPABASE_URL = projektets URL
REACT_APP_SUPABASE_ANON_KEY = offentlig anonnyckel

Kör sedan det här kommandot för att installera Supabases JavaScript-bibliotek i ditt React-projekt:

npm installera @supabase/supabase-js

Konfigurera Supabase-klienten

I den src katalog, skapa en ny utils/SupabaseClient.js fil och koden nedan:

importera { createClient } från'@supabase/supabase-js'; 
konst supabaseURL = process.env. REACT_APP_SUPABASE_URL;
konst supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
exporterakonst supabase = createClient (supabaseURL, supabaseAnonKey);

Den här koden skapar en Supabase-klientinstans genom att tillhandahålla Supabase URL och en offentlig anonnyckel, vilket gör att React-applikationen kan kommunicera med Supabase API och utföra CRUD-operationer.

Du kan hitta detta projekts kod i denna GitHub-förråd.

Implementera CRUD-verksamheten

Nu när du framgångsrikt har konfigurerat Supabases molnlagring och ditt React-projekt, implementera CRUD-operationerna i din React-applikation.

1. Lägg till data till databasen

Öppna src/App.js fil, ta bort reaktorkoden och lägg till följande:

importera { useState, useEffect } från'reagera';
importera Produktkort från'./components/ProductCard';
importera { supabase } från'./utils/SupabaseClient';
importera'./App.css';
exporterastandardfungeraApp() {
konst [namn, setName] = useState('');
konst [description, setDescription] = useState('');
asynkronfungeraaddProduct() {
Prova {
konst { data, fel } = vänta supabas
 .från('Produkter')
 .Föra in({
 namn: namn,
 beskrivning: beskrivning
 })
 .enda();
om (fel) kasta fel;
fönster.location.reload();
 } fånga (fel) {
 alert (error.message);
 }
 }

Denna kod definierar en addProduct hanterarfunktion som asynkront infogar en ny post i Produkter tabell i molndatabasen. Om infogningen lyckas kommer sidan att laddas om för att återspegla den uppdaterade produktlistan.

2. Läs data från molndatabasen

Definiera en hanterarfunktion för att hämta lagrad data från databasen.

konst [produkter, setProducts] = useState([]);
asynkronfungeragetProducts() {
Prova {
konst { data, fel } = vänta supabas
 .från('Produkter')
 .Välj('*')
 .begränsa(10);
om (fel) kasta fel;
om (data != null) {
 setProdukter (data);
 }
 } fånga (fel) {
 alert (error.message);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

Denna kod hämtar data asynkront från databasen. Hämtningsfrågan hämtar all data från produkttabellen, begränsar resultaten till maximalt 10 poster, och uppdaterar Produkter' tillstånd med de hämtade uppgifterna.

De useEffectReagera krok driver getProducts funktion när komponenten monteras. Detta säkerställer att produkternas data hämtas och renderas när komponenten initialt renderas. Lägg slutligen till koden som återger indata JSX-element i webbläsaren för att tillåta användare att lägga till produkter till en Supabase-databas och visa de befintliga produkterna som hämtats från databasen.

lämna tillbaka (
 <>

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


Lägg till produktdata till Supabase-databasen</h3>


"skapa-produkt-behållare">


Produktnamn</label>
 typ="text"
 id="namn"
 onChange={(e) => setName (e.target.value)}
 />
Produktbeskrivning</label>
 typ="text"
 id="beskrivning"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Lägg till produkt
 </button>
 </div>
 </div>




Aktuella produkter i databasen</h3>

"produktlista-behållare">
 {products.map((produkt) => (



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

Den hämtade datan i produktuppsättning skickas som rekvisita och renderas dynamiskt inom Produktkort komponent med hjälp av Karta fungera.

3. Uppdatera och ta bort befintliga data i databasen

Skapa en ny komponenter/ProductCard.js fil i /src katalog. Innan vi definierar hanterarfunktionerna, låt oss se tillstånden och JSX-elementen du kommer att implementera i den här komponenten.

importera { useState } från'reagera';
importera { supabase } från'../utils/SupabaseClient';
importera'./productcard.styles.css';
exporterastandardfungeraProduktkort(rekvisita) {
konst produkt = rekvisita.produkt;
konst [editing, setEditing] = useState(falsk);
konst [namn, setName] = useState (product.name);
konst [beskrivning, setDescription] = useState (product.description);
lämna tillbaka (
"produktkort">


 {redigering falsk? (


{product.name}</h5>


{product.description}</p>
"radera-knapp" onClick={() => deleteProduct()}>Ta bort produkt</button>
"redigera-knapp" onClick={() => setRedigering(Sann)}>Redigera produkt</button>
 </div>
 ): (


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


"namn">Produktnamn</label>
 typ="text"
 id="namn"
 defaultValue={product.name}
 onChange={(e) => setName (e.target.value)}/>
"beskrivning">Produktbeskrivning</label>
 typ="text"
 id="beskrivning"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


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

asynkronfungerauppdatera Produkt() {
Prova {
konst { data, fel } = vänta supabas
 .från('Produkter')
 .uppdatering({
 namn: namn,
 beskrivning: beskrivning
 })
 .eq('id', Serienummer);
om (fel) kasta fel;
fönster.location.reload();
 } fånga (fel) {
 alert (error.message);
 }
}

asynkronfungerata bort Produkt() {
Prova {
konst { data, fel } = vänta supabas
 .från('Produkter')
 .radera()
 .eq('id', Serienummer);
om (fel) kasta fel;
fönster.location.reload();
 } fånga (fel) {
 alert (error.message);
 }
}