Cum să construiți o aplicație CRUD React cu Supabase Cloud Storage

React a revoluționat modul în care dezvoltatorii construiesc interfețe cu utilizatorul pentru aplicațiile web. Arhitectura sa bazată pe componente și sintaxa declarativă oferă o bază puternică pentru crearea unor experiențe interactive și dinamice pentru utilizatori.

În calitate de dezvoltator React, stăpânirea modului de implementare a operațiunilor CRUD (Create, Read, Update, Delete) este un prim pas crucial către construirea de soluții web robuste și eficiente.

Aflați cum să creați o aplicație simplă React CRUD, utilizând Supabase Cloud Storage ca soluție backend.

Soluție Supabase Backend-as-a-Service

Furnizori Backend-as-a-Service (BaaS)., precum Supabase, oferă o alternativă convenabilă la construirea unui serviciu backend complet de la zero pentru aplicațiile dvs. web. În mod ideal, aceste soluții oferă o gamă largă de servicii de backend pre-construite, care sunt esențiale pentru configurarea unui sistem backend eficient pentru aplicațiile dvs. web React.

Cu BaaS, puteți utiliza funcții precum stocarea datelor, sisteme de autentificare, abonamente în timp real și multe altele, fără a fi nevoie să dezvoltați și să întrețineți aceste servicii în mod independent.

Prin integrarea soluțiilor BaaS precum Supabase în proiectul dvs., puteți reduce semnificativ timpul de dezvoltare și livrare, beneficiind în același timp de servicii backend robuste.

Configurați un proiect Supabase de stocare în cloud

Pentru a începe, mergeți la Site-ul Supabaseși creați un cont.

1. După ce vă înregistrați pentru un cont, conectați-vă la contul dvs bord pagină.
2. Faceți clic pe Proiect nou buton.
3. Completați detaliile proiectului și faceți clic pe Creați un nou proiect.
4. Cu proiectul configurat, selectați și faceți clic pe Editor SQL butonul caracteristică din panoul de caracteristici din panoul din stânga.
5. Rulați instrucțiunea SQL de mai jos în Editor SQL pentru a crea un tabel demonstrativ. Acesta va deține datele pe care le veți folosi cu aplicația React.

   creamasa produse (
    id bigint generat implicit ca cheie primară de identitate,
    textul numelui,
    text de descriere
   );

Configurați o aplicație React CRUD

Creați o aplicație React, navigați la directorul rădăcină și creați un fișier nou, .env, pentru a seta unele variabile de mediu. Mergeți la Supabaza dvs setări pagina, deschideți API secțiunea și copiați valorile pentru adresa URL a proiectului și cheie publică anon. Lipiți acestea în fișierul dvs. env:

REACT_APP_SUPABASE_URL = adresa URL a proiectului
REACT_APP_SUPABASE_ANON_KEY = cheie publică anonimă

Apoi, rulați această comandă pentru a instala biblioteca JavaScript Supabase în proiectul dvs. React:

npm install @supabase/supabase-js

Configurați clientul Supabase

În src director, creați un nou utils/SupabaseClient.js fișier și codul de mai jos:

import { createClient } din„@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);

Acest cod creează o instanță client Supabase furnizând adresa URL Supabase și o cheie publică anon, permițând aplicației React să comunice cu API-urile Supabase și să efectueze operațiuni CRUD.

Puteți găsi codul acestui proiect în aceasta Depozitul GitHub.

Implementați operațiunile CRUD

Acum că ați configurat cu succes stocarea în cloud Supabase și proiectul dvs. React, implementați operațiunile CRUD în aplicația dvs. React.

1. Adăugați date la baza de date

Deschide src/App.js fișier, ștergeți codul boilerplate React și adăugați următoarele:

import { useState, useEffect } din'reacţiona';
import ProductCard din„./components/ProductCard”;
import { supabaza } din„./utils/SupabaseClient”;
import„./App.css”;
exportMod implicitfuncţieApp() {
const [nume, setName] = useState('');
const [descriere, setDescription] = useState('');
asincronfuncţieaddProduct() {
încerca {
const { date, error } = așteaptă supabaza
 .din('produse')
 .introduce({
 nume: nume,
 descriere: descriere
 })
 .singur();
dacă (eroare) arunca eroare;
fereastră.location.reload();
 } captură (eroare) {
 alertă (error.message);
 }
 }

Acest cod definește un addProduct funcția de gestionare care inserează asincron o nouă înregistrare în fișierul produse tabel din baza de date cloud. Dacă operația de inserare are succes, pagina se va reîncărca pentru a reflecta lista de produse actualizată.

2. Citiți datele din baza de date cloud

Definiți o funcție de gestionare pentru a prelua datele stocate din baza de date.

const [produse, setProducts] = useState([]);
asincronfuncţiegetProducts() {
încerca {
const { date, error } = așteaptă supabaza
 .din('produse')
 .Selectați('*')
 .limită(10);
dacă (eroare) arunca eroare;
dacă (date != nul) {
 setProduse (date);
 }
 } captură (eroare) {
 alertă (error.message);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

Acest cod preia asincron datele din baza de date. Interogarea de preluare preia toate datele din tabelul de produse, limitând rezultatele la maximum 10 înregistrări și actualizează produse' stare cu datele preluate.

The useEffectCârlig de reacție rulează getProducts funcţionează când se montează componenta. Acest lucru asigură că datele produselor sunt preluate și redate atunci când componenta este redată inițial. În cele din urmă, adăugați codul care redă elementele JSX de intrare în browser pentru a permite utilizatorilor să adauge produse la o bază de date Supabase și să afișeze produsele existente preluate din baza de date.

întoarcere (
 <>

"antet-container">
Produse magazin</h3>
 </div>
 </header>


Adăugați date despre produse în baza de date Supabase</h3>


"creeaza-produs-container">


Nume produs</label>
 tip="text"
 id="Nume"
 onChange={(e) => setName (e.target.value)}
 />
Descriere produs</label>
 tip="text"
 id="Descriere"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Adăugați produs
 </button>
 </div>
 </div>




Produse curente în baza de date</h3>

„container-listă-produse”>
 {products.map((produs) => (



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

Datele preluate în matrice de produse este transmis ca recuzită și redat dinamic în cadrul ProductCard componentă folosind Hartă funcţie.

3. Actualizați și ștergeți datele existente în baza de date

Creaza un nou componente/ProductCard.js dosar în /src director. Înainte de a defini funcțiile de gestionare, să vedem stările și elementele JSX pe care le veți implementa în această componentă.

import { useState } din'reacţiona';
import { supabaza } din„../utils/SupabaseClient”;
import„./productcard.styles.css”;
exportMod implicitfuncţieProductCard(recuzită) {
const produs = props.product;
const [editare, setEditing] = useState(fals);
const [nume, setName] = useState (nume.produs);
const [description, setDescription] = useState (product.description);
întoarcere (
"card-produs">


 {editare fals? (


{nume.produs}</h5>


{product.description}</p>
"butonul de ștergere" onClick={() => deleteProduct()}>Delete Product</button>
"butonul de editare" onClick={() => setEditing(Adevărat)}>Editați produsul</button>
 </div>
 ): (


Editarea produsului</h4>
„butonul-înapoi” onClick={() => setEditing(fals)}>Înapoi</button>


"Nume">Numele produsului</label>
 tip="text"
 id="Nume"
 defaultValue={product.name}
 onChange={(e) => setName (e.target.value)}/>
"Descriere">Descrierea produsului</label>
 tip="text"
 id="Descriere"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


"butonul de actualizare" onClick={() => updateProduct()}>Actualizează produsul în Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asincronfuncţieactualizareProdus() {
încerca {
const { date, error } = așteaptă supabaza
 .din('produse')
 .Actualizați({
 nume: nume,
 descriere: descriere
 })
 .eq('id', product.id);
dacă (eroare) arunca eroare;
fereastră.location.reload();
 } captură (eroare) {
 alertă (error.message);
 }
}

asincronfuncţiedeleteProduct() {
încerca {
const { date, error } = așteaptă supabaza
 .din('produse')
 .șterge()
 .eq('id', product.id);
dacă (eroare) arunca eroare;
fereastră.location.reload();
 } captură (eroare) {
 alertă (error.message);
 }
}