Ako vytvoriť aplikáciu CRUD React s cloudovým úložiskom Supabase

Ako vytvoriť aplikáciu CRUD React s cloudovým úložiskom Supabase
Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

React spôsobil revolúciu v spôsobe, akým vývojári vytvárajú používateľské rozhrania pre webové aplikácie. Jeho architektúra založená na komponentoch a deklaratívna syntax poskytujú silný základ pre vytváranie interaktívnych a dynamických používateľských skúseností.





Ako vývojár Reactu je zvládnutie implementácie operácií CRUD (Create, Read, Update, Delete) zásadným prvým krokom k vytvoreniu robustných a efektívnych webových riešení.



amazon Nedostal som svoj balíček
VYUŽITIE VIDEA DŇA POKRAČUJTE V OBSAHU POKRAČOVANÍM

Naučte sa, ako vytvoriť jednoduchú aplikáciu React CRUD, využívajúcu Supabase Cloud Storage ako vaše backendové riešenie.





Riešenie Supabase Backend-as-a-Service

Poskytovatelia backend-as-a-Service (BaaS). , podobne ako Supabase, ponúkajú pohodlnú alternatívu k budovaniu plnohodnotnej backendovej služby od nuly pre vaše webové aplikácie. V ideálnom prípade tieto riešenia poskytujú širokú škálu vopred vytvorených backendových služieb, ktoré sú nevyhnutné pre nastavenie efektívneho backendového systému pre vaše webové aplikácie React.

S BaaS môžete využívať funkcie, ako je ukladanie údajov, autentifikačné systémy, predplatné v reálnom čase a ďalšie bez toho, aby ste museli tieto služby vyvíjať a udržiavať nezávisle.



Integráciou riešení BaaS, ako je Supabase, do vášho projektu môžete výrazne skrátiť čas vývoja a dodania, pričom budete stále využívať výhody robustných backendových služieb.

čo môžete urobiť s 3D tlačiarňou

Nastavte projekt cloudového úložiska Supabase

Ak chcete začať, prejdite na Web spoločnosti Supabase a zaregistrujte si účet.



  1. Po zaregistrovaní účtu sa prihláste do svojho účtu prístrojová doska stránku.
  2. Klikni na Nový projekt tlačidlo.
  3. Vyplňte detaily projektu a kliknite na Vytvorte nový projekt .
  4. Po nastavení projektu vyberte a kliknite na SQL Editor tlačidlo funkcie na paneli funkcií na ľavej table. 's editor
  5. Spustite príkaz SQL nižšie v SQL editor na vytvorenie ukážkovej tabuľky. Bude obsahovať údaje, ktoré budete používať s aplikáciou React.
     create table products ( 
      id bigint generated by default as identity primary key, 
      name text, 
      description text 
    );

Nastavte aplikáciu React CRUD

Vytvorte aplikáciu React , prejdite do koreňového adresára a vytvorte nový súbor, .env , na nastavenie niektorých premenných prostredia. Choďte do svojej Supabase nastavenie otvorte stránku API a skopírujte hodnoty pre URL projektu a verejný anon kľúč . Prilepte ich do súboru env:

 REACT_APP_SUPABASE_URL = project URL 
REACT_APP_SUPABASE_ANON_KEY = public anon key

Potom spustite tento príkaz, aby ste nainštalovali knižnicu JavaScript Supabase vo svojom projekte React:



 npm install @supabase/supabase-js

Nakonfigurujte klienta Supabase

V src adresár, vytvorte nový utils/SupabaseClient.js súbor a kód nižšie:

 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);

Tento kód vytvorí inštanciu klienta Supabase poskytnutím adresy URL Supabase a verejného anon kľúča, čo umožňuje aplikácii React komunikovať s rozhraniami Supabase API a vykonávať operácie CRUD.