Kako izgraditi CRUD React aplikaciju sa Supabase Cloud Storage

React je revolucionirao način na koji programeri izrađuju korisnička sučelja za web aplikacije. Njegova arhitektura temeljena na komponentama i deklarativna sintaksa pružaju snažan temelj za stvaranje interaktivnih i dinamičnih korisničkih iskustava.

Kao React programer, ovladavanje implementacijom CRUD (Create, Read, Update, Delete) operacija ključan je prvi korak prema izgradnji robusnih i učinkovitih web rješenja.

Naučite kako izraditi jednostavnu React CRUD aplikaciju koristeći Supabase Cloud Storage kao pozadinsko rješenje.

Rješenje Supabase Backend-as-a-Service

Pružatelji backend-as-a-Service (BaaS) usluga, kao i Supabase, nudi prikladnu alternativu izgradnji potpuno razvijene pozadinske usluge od nule za vaše web aplikacije. U idealnom slučaju, ova rješenja pružaju širok raspon unaprijed izgrađenih pozadinskih usluga koje su ključne za postavljanje učinkovitog pozadinskog sustava za vaše React web aplikacije.

S BaaS-om možete koristiti značajke kao što su pohrana podataka, sustavi provjere autentičnosti, pretplate u stvarnom vremenu i više bez potrebe za neovisnim razvojem i održavanjem ovih usluga.

Integriranjem BaaS rješenja kao što je Supabase u vaš projekt, možete značajno smanjiti vrijeme razvoja i dostave, a da i dalje imate koristi od robusnih pozadinskih usluga.

Postavite projekt Supabase Cloud Storage

Za početak idite na Web stranica Supabase, i prijavite se za račun.

1. Nakon što se prijavite za račun, prijavite se na svoj račun nadzorna ploča stranica.
2. Klikni na Novi projekt dugme.
3. Ispunite detalje projekta i kliknite na Stvorite novi projekt.
4. S postavljenim projektom odaberite i kliknite SQL uređivač gumb značajke na ploči značajki lijevog okna.
5. Pokrenite SQL naredbu ispod u SQL editor za izradu demo tablice. Sadržat će podatke koje ćete koristiti s React aplikacijom.

   stvoritistol proizvodi (
    id bigint generiran prema zadanim postavkama kao primarni ključ identiteta,
    tekst imena,
    tekst opisa
   );

Postavite React CRUD aplikaciju

Napravite React aplikaciju, dođite do korijenskog direktorija i izradite novu datoteku, .env, za postavljanje nekih varijabli okruženja. Idite do svoje Supabase postavke stranicu, otvorite API odjeljak i kopirajte vrijednosti za URL projekta i javni anon ključ. Zalijepite ovo u svoju env datoteku:

REACT_APP_SUPABASE_URL = URL projekta
REACT_APP_SUPABASE_ANON_KEY = javni anon ključ

Zatim pokrenite ovu naredbu da instalirate Supabase JavaScript biblioteku u svoj React projekt:

npm instalirajte @supabase/supabase-js

Konfigurirajte Supabase klijenta

u src imenik, stvorite novi utils/SupabaseClient.js datoteku i kod ispod:

uvoz {kreirajKlijenta} iz'@supabase/supabase-js'; 
konst supabaseURL = proces.env. REACT_APP_SUPABASE_URL;
konst supabaseAnonKey = proces.env. REACT_APP_SUPABASE_ANON_KEY;
izvozkonst supabase = createClient (supabaseURL, supabaseAnonKey);

Ovaj kod stvara Supabase klijentsku instancu dajući Supabase URL i javni anon ključ, dopuštajući React aplikaciji da komunicira sa Supabase API-jima i izvodi CRUD operacije.

Kôd ovog projekta možete pronaći ovdje GitHub spremište.

Implementirajte CRUD operacije

Sada kada ste uspješno postavili Supabaseovu pohranu u oblaku i svoj React projekt, implementirajte CRUD operacije u svoju React aplikaciju.

1. Dodajte podatke u bazu podataka

Otvori src/App.js datoteku, izbrišite predložak React koda i dodajte sljedeće:

uvoz {useState, useEffect} iz'reagirati';
uvoz Kartica proizvoda iz'./components/ProductCard';
uvoz {supabase} iz'./utils/SupabaseClient';
uvoz'./App.css';
izvozzadanofunkcijaaplikacija() {
konst [ime, setName] = useState('');
konst [opis, setDescription] = useState('');
asinkronifunkcijaaddProduct() {
probati {
konst { podaci, pogreška } = čekati nadbaza
 .iz('proizvodi')
 .umetnuti({
 ime: ime,
 opis: opis
 })
 .singl();
ako (greška) bacanje greška;
prozor.location.reload();
 } ulov (pogreška) {
 upozorenje (greška.poruka);
 }
 }

Ovaj kod definira addProduct funkcija rukovatelja koja asinkrono umeće novi zapis u proizvoda tablica u bazi podataka u oblaku. Ako je operacija umetanja uspješna, stranica će se ponovno učitati kako bi odražavala ažurirani popis proizvoda.

2. Čitajte podatke iz baze podataka u oblaku

Definirajte funkciju rukovatelja za dohvaćanje pohranjenih podataka iz baze podataka.

konst [proizvodi, setProizvodi] = useState([]);
asinkronifunkcijagetProducts() {
probati {
konst { podaci, pogreška } = čekati nadbaza
 .iz('proizvodi')
 .Izaberi('*')
 .ograničiti(10);
ako (greška) bacanje greška;
ako (podaci != ništavan) {
 setProizvodi (podaci);
 }
 } ulov (pogreška) {
 upozorenje (greška.poruka);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

Ovaj kod asinkrono dohvaća podatke iz baze podataka. Upit za dohvaćanje dohvaća sve podatke iz tablice proizvoda, ograničavajući rezultate na najviše 10 zapisa, i ažurira proizvodi' stanje s dohvaćenim podacima.

The useEffectReagirajte kuku pokreće getProducts funkcioniraju kada se komponenta montira. Ovo osigurava da se podaci proizvoda dohvaćaju i renderiraju kada se komponenta inicijalno renderira. Na kraju dodajte kod koji renderira ulazne JSX elemente u pregledniku kako biste korisnicima omogućili dodavanje proizvoda u bazu podataka Supabase i prikaz postojećih proizvoda dohvaćenih iz baze podataka.

povratak (
 <>

"spremnik zaglavlja">
Trgovina Proizvodi</h3>
 </div>
 </header>


Dodajte podatke o proizvodima u bazu podataka Supabase</h3>


"kreiraj spremnik-proizvoda">


Naziv proizvoda</label>
 vrsta="tekst"
 id="Ime"
 onChange={(e) => setName (e.target.value)}
 />
Opis proizvoda</label>
 vrsta="tekst"
 id="opis"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Dodaj proizvod
 </button>
 </div>
 </div>




Aktualni proizvodi u baza podataka</h3>

"spremnik-popis-proizvoda">
 {products.map((proizvod) => (



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

Dohvaćeni podaci u niz proizvoda prosljeđuje se kao rekvizit i dinamički prikazuje unutar Kartica proizvoda komponenta koja koristi karta funkcija.

3. Ažurirajte i izbrišite postojeće podatke u bazi podataka

Stvorite novi komponente/ProductCard.js datoteka u /src imenik. Prije definiranja funkcija rukovatelja, pogledajmo stanja i JSX elemente koje ćete implementirati u ovu komponentu.

uvoz {useState} iz'reagirati';
uvoz {supabase} iz'../utils/SupabaseClient';
uvoz'./productcard.styles.css';
izvozzadanofunkcijaKartica proizvoda(rekviziti) {
konst proizvod = rekviziti.proizvod;
konst [uređivanje, setEditing] = useState(lažno);
konst [name, setName] = useState (product.name);
konst [description, setDescription] = useState (product.description);
povratak (
"kartica proizvoda">


 {uređivanje lažno? (


{product.name}</h5>


{product.description}</p>
"gumb za brisanje" onClick={() => deleteProduct()}>Izbriši proizvod</button>
"gumb za uređivanje" onClick={() => setEditing(pravi)}>Uredi proizvod</button>
 </div>
 ): (


Uređivanje proizvoda</h4>
"gumb za povratak" onClick={() => setEditing(lažno)}>Idi natrag</button>


"Ime">Naziv proizvoda</label>
 vrsta="tekst"
 id="Ime"
 defaultValue={product.name}
 onChange={(e) => setName (e.target.value)}/>
"opis">Opis proizvoda</label>
 vrsta="tekst"
 id="opis"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


"gumb za ažuriranje" onClick={() => updateProduct()}>Ažuriraj proizvod u Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asinkronifunkcijaupdateProizvod() {
probati {
konst { podaci, pogreška } = čekati nadbaza
 .iz('proizvodi')
 .Ažuriraj({
 ime: ime,
 opis: opis
 })
 .eq('iskaznica', Identifikacijski broj proizvoda);
ako (greška) bacanje greška;
prozor.location.reload();
 } ulov (pogreška) {
 upozorenje (greška.poruka);
 }
}

asinkronifunkcijaizbrisatiProizvod() {
probati {
konst { podaci, pogreška } = čekati nadbaza
 .iz('proizvodi')
 .izbrisati()
 .eq('iskaznica', Identifikacijski broj proizvoda);
ako (greška) bacanje greška;
prozor.location.reload();
 } ulov (pogreška) {
 upozorenje (greška.poruka);
 }
}