So erstellen Sie eine CRUD React-Anwendung mit Supabase Cloud Storage

React hat die Art und Weise revolutioniert, wie Entwickler Benutzeroberflächen für Webanwendungen erstellen. Seine komponentenbasierte Architektur und deklarative Syntax bieten eine leistungsstarke Grundlage für die Erstellung interaktiver und dynamischer Benutzererlebnisse.

Als React-Entwickler ist die Beherrschung der Implementierung von CRUD-Vorgängen (Erstellen, Lesen, Aktualisieren, Löschen) ein entscheidender erster Schritt zum Aufbau robuster und effizienter Weblösungen.

Erfahren Sie, wie Sie eine einfache React CRUD-Anwendung erstellen und dabei Supabase Cloud Storage als Backend-Lösung verwenden.

Supabase Backend-as-a-Service-Lösung

Backend-as-a-Service (BaaS)-Anbieter, wie Supabase, bieten eine praktische Alternative zum Aufbau eines vollwertigen Backend-Dienstes von Grund auf für Ihre Webanwendungen. Im Idealfall bieten diese Lösungen eine breite Palette vorgefertigter Backend-Dienste, die für die Einrichtung eines effizienten Backend-Systems für Ihre React-Webanwendungen unerlässlich sind.

Mit BaaS können Sie Funktionen wie Datenspeicherung, Authentifizierungssysteme, Echtzeitabonnements und mehr nutzen, ohne diese Dienste unabhängig entwickeln und warten zu müssen.

Durch die Integration von BaaS-Lösungen wie Supabase in Ihr Projekt können Sie die Entwicklungs- und Lieferzeit erheblich verkürzen und gleichzeitig von robusten Backend-Diensten profitieren.

Richten Sie ein Supabase-Cloud-Speicherprojekt ein

Um zu beginnen, gehen Sie zu Supabases Website, und melden Sie sich für ein Konto an.

1. Sobald Sie sich für ein Konto angemeldet haben, melden Sie sich bei Ihrem Konto an Armaturenbrett Buchseite.
2. Klick auf das Neues Projekt Taste.
3. Geben Sie die Projektdetails ein und klicken Sie auf Neues Projekt erstellen.
4. Wenn das Projekt eingerichtet ist, wählen Sie das aus und klicken Sie darauf SQL-Editor Klicken Sie auf die Funktionsschaltfläche im linken Funktionsbereich.
5. Führen Sie die folgende SQL-Anweisung aus SQL-Editor um eine Demo-Tabelle zu erstellen. Es enthält die Daten, die Sie mit der React-Anwendung verwenden.

   erstellenTisch Produkte (
    id bigint wird standardmäßig als Identitätsprimärschlüssel generiert,
    Namenstext,
    Beschreibungstext
   );

Richten Sie eine React CRUD-Anwendung ein

Erstellen Sie eine React-Anwendung, navigieren Sie zum Stammverzeichnis und erstellen Sie eine neue Datei. .env, um einige Umgebungsvariablen festzulegen. Gehen Sie zu Ihrer Supabase Einstellungen Seite, öffnen Sie die API Abschnitt und kopieren Sie die Werte für Projekt-URL Und öffentlicher anonymer Schlüssel. Fügen Sie diese in Ihre env-Datei ein:

REACT_APP_SUPABASE_URL = Projekt-URL
REACT_APP_SUPABASE_ANON_KEY = öffentlicher anonymer Schlüssel

Führen Sie als Nächstes diesen Befehl aus, um die JavaScript-Bibliothek von Supabase in Ihrem React-Projekt zu installieren:

npm install @supabase/supabase-js

Konfigurieren Sie den Supabase-Client

Im src Verzeichnis, erstellen Sie ein neues utils/SupabaseClient.js Datei und den folgenden Code:

importieren {createClient} aus'@supabase/supabase-js'; 
const supabaseURL = process.env. REACT_APP_SUPABASE_URL;
const supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
Exportconst supabase = createClient (supabaseURL, supabaseAnonKey);

Dieser Code erstellt eine Supabase-Client-Instanz, indem er die Supabase-URL und einen öffentlichen Anonymschlüssel bereitstellt, wodurch die React-Anwendung mit den Supabase-APIs kommunizieren und CRUD-Vorgänge ausführen kann.

Den Code dieses Projekts finden Sie hier GitHub-Repository.

Implementieren Sie die CRUD-Operationen

Nachdem Sie den Cloud-Speicher von Supabase und Ihr React-Projekt erfolgreich eingerichtet haben, implementieren Sie die CRUD-Vorgänge in Ihrer React-Anwendung.

1. Daten zur Datenbank hinzufügen

Öffne das src/App.js Datei, löschen Sie den Boilerplate-React-Code und fügen Sie Folgendes hinzu:

importieren { useState, useEffect } aus'reagieren';
importieren Produktkarte aus'./components/ProductCard';
importieren { Supabase } aus'./utils/SupabaseClient';
importieren'./App.css';
ExportStandardFunktionApp() {
const [name, setName] = useState('');
const [description, setDescription] = useState('');
asynchronFunktionProdukt hinzufügen() {
versuchen {
const { Daten, Fehler } = erwarten Supabase
 .aus('Produkte')
 .Einfügung({
 Name Name,
 Beschreibung: Beschreibung
 })
 .einzel();
Wenn (Fehler) Wurf Fehler;
Fenster.location.reload();
 } fangen (Fehler) {
 Warnung (Fehlermeldung);
 }
 }

Dieser Code definiert eine Produkt hinzufügen Handlerfunktion, die asynchron einen neuen Datensatz in die einfügt Produkte Tabelle in der Cloud-Datenbank. Wenn der Einfügevorgang erfolgreich ist, wird die Seite neu geladen, um die aktualisierte Produktliste anzuzeigen.

2. Lesen Sie Daten aus der Cloud-Datenbank

Definieren Sie eine Handlerfunktion, um die gespeicherten Daten aus der Datenbank abzurufen.

const [products, setProducts] = useState([]);
asynchronFunktiongetProducts() {
versuchen {
const { Daten, Fehler } = erwarten Supabase
 .aus('Produkte')
 .wählen('*')
 .Grenze(10);
Wenn (Fehler) Wurf Fehler;
Wenn (Daten != Null) {
 setProducts (Daten);
 }
 } fangen (Fehler) {
 Warnung (Fehlermeldung);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

Dieser Code ruft die Daten asynchron aus der Datenbank ab. Die Abrufabfrage ruft alle Daten aus der Produkttabelle ab, beschränkt die Ergebnisse auf maximal 10 Datensätze und aktualisiert die Produkte' Zustand mit den abgerufenen Daten.

Der useEffectHaken reagieren läuft die getProducts Funktion, wenn die Komponente montiert wird. Dadurch wird sichergestellt, dass die Daten der Produkte abgerufen und gerendert werden, wenn die Komponente zum ersten Mal gerendert wird. Fügen Sie abschließend den Code hinzu, der eingegebene JSX-Elemente im Browser rendert, damit Benutzer Produkte zu einer Supabase-Datenbank hinzufügen und die vorhandenen, aus der Datenbank abgerufenen Produkte anzeigen können.

zurückkehren (
 <>

„Header-Container“>
Shop-Produkte</h3>
 </div>
 </header>


Fügen Sie Produktdaten zur Supabase-Datenbank hinzu</h3>


„Produktcontainer erstellen“>


Produktname</label>
 Typ="Text"
 id="Name"
 onChange={(e) => setName (e.target.value)}
 />
Produktbeschreibung</label>
 Typ="Text"
 id="Beschreibung"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Produkt hinzufügen
 </button>
 </div>
 </div>




Aktuelle Produkte In die Datenbank</h3>

„Produktlistencontainer“>
 {products.map((Produkt) => (



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

Die abgerufenen Daten im Produktpalette wird als Requisiten übergeben und innerhalb der dynamisch gerendert Produktkarte Komponente mit der Karte Funktion.

3. Vorhandene Daten in der Datenbank aktualisieren und löschen

Erstelle eine neue Komponenten/ProductCard.js Datei in der /src Verzeichnis. Bevor wir die Handlerfunktionen definieren, sehen wir uns die Zustände und JSX-Elemente an, die Sie in dieser Komponente implementieren werden.

importieren { useState } aus'reagieren';
importieren { Supabase } aus'../utils/SupabaseClient';
importieren'./productcard.styles.css';
ExportStandardFunktionProduktkarte(Requisiten) {
const Produkt = Requisiten.Produkt;
const [editing, setEditing] = useState(FALSCH);
const [name, setName] = useState (product.name);
const [description, setDescription] = useState (product.description);
zurückkehren (
„Produktkarte“>


 {Bearbeitung FALSCH? (


{Produktname}/h5>


{product.description}</p>
„Löschen-Button“ onClick={() => deleteProduct()}>Produkt löschen</button>
„Bearbeiten-Button“ onClick={() => setEditing(WAHR)}>Produkt bearbeiten</button>
 </div>
 ): (


Produkt bearbeiten</h4>
„Zurück-Taste“ onClick={() => setEditing(FALSCH)}>Zurück</button>


"Name">Produktname</label>
 Typ="Text"
 id="Name"
 defaultValue={product.name}
 onChange={(e) => setName (e.target.value)}/>
"Beschreibung">Produktbeschreibung</label>
 Typ="Text"
 id="Beschreibung"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


„Update-Button“ onClick={() => updateProduct()}>Produkt aktualisieren In Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asynchronFunktionupdateProduct() {
versuchen {
const { Daten, Fehler } = erwarten Supabase
 .aus('Produkte')
 .aktualisieren({
 Name Name,
 Beschreibung: Beschreibung
 })
 .eq('Ausweis', Produkt ID);
Wenn (Fehler) Wurf Fehler;
Fenster.location.reload();
 } fangen (Fehler) {
 Warnung (Fehlermeldung);
 }
}

asynchronFunktiondeleteProduct() {
versuchen {
const { Daten, Fehler } = erwarten Supabase
 .aus('Produkte')
 .löschen()
 .eq('Ausweis', Produkt ID);
Wenn (Fehler) Wurf Fehler;
Fenster.location.reload();
 } fangen (Fehler) {
 Warnung (Fehlermeldung);
 }
}