Kako izgraditi CRUD React aplikaciju sa Supabase Cloud Storage

Kako izgraditi CRUD React aplikaciju sa Supabase Cloud Storage
Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

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 kako implementirati CRUD (Create, Read, Update, Delete) operacije ključan je prvi korak prema izgradnji robusnih i učinkovitih web rješenja.



MAKEUSEOF VIDEO DANA POMICI SE ZA NASTAVAK SA SADRŽAJEM

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





kako kontrolirati telefon s računala

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 pritom još uvijek 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.



kako skinuti glazbu sa starog iPod -a
  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. 's editor
  5. Pokrenite SQL naredbu ispod u SQL editor za izradu demo tablice. Sadržat će podatke koje ćete koristiti s aplikacijom React.
     create table products ( 
      id bigint generated by default as identity primary key, 
      name text, 
      description text 
    );

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 = project URL 
REACT_APP_SUPABASE_ANON_KEY = public anon key

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



 npm install @supabase/supabase-js

Konfigurirajte Supabase klijenta

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

 import { createClient } from '@supabase/supabase-js';  
const supabaseURL = process.env.REACT_APP_SUPABASE_URL; 
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY; 
export const 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.