Sådan bygger du en CRUD React-applikation med Supabase Cloud Storage

Sådan bygger du en CRUD React-applikation med Supabase Cloud Storage
Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

React har revolutioneret den måde, udviklere bygger brugergrænseflader til webapplikationer på. Dens komponentbaserede arkitektur og deklarative syntaks giver et kraftfuldt grundlag for at skabe interaktive og dynamiske brugeroplevelser.





hvordan man øger dedikeret video ram

Som React-udvikler er det at mestre, hvordan man implementerer CRUD-operationer (Create, Read, Update, Delete) et afgørende første skridt mod at opbygge robuste og effektive webløsninger.



MAKEUSE AF DAGENS VIDEO RUL FOR AT FORTSÆTTE MED INDHOLD

Lær, hvordan du bygger en simpel React CRUD-applikation ved at bruge Supabase Cloud Storage som din backend-løsning.





Supabase Backend-as-a-Service-løsning

Backend-as-a-Service (BaaS) udbydere , ligesom Supabase, tilbyder et praktisk alternativ til at bygge en fuldgyldig backend-tjeneste fra bunden til dine webapplikationer. Ideelt set giver disse løsninger en bred vifte af forudbyggede backend-tjenester, der er afgørende for at opsætte et effektivt backend-system til dine React-webapplikationer.

Med BaaS kan du bruge funktioner som datalagring, autentificeringssystemer, realtidsabonnementer og mere uden at skulle udvikle og vedligeholde disse tjenester selvstændigt.



Ved at integrere BaaS-løsninger som Supabase i dit projekt, kan du reducere udviklings- og forsendelsestiden markant, mens du stadig drager fordel af robuste backend-tjenester.

Konfigurer et Supabase Cloud Storage-projekt

For at komme i gang skal du gå over til Supabases hjemmeside , og tilmeld dig en konto.



  1. Når du har oprettet en konto, skal du logge ind på din konto dashboard side.
  2. Klik på Nyt projekt knap.
  3. Udfyld projektets detaljer og klik videre Opret nyt projekt .
  4. Med projektet opsat skal du vælge og klikke på SQL Editor funktionsknap på funktionspanelet i venstre rude. 's editor
  5. Kør SQL-sætningen nedenfor i SQL editor at oprette en demo-tabel. Det vil indeholde de data, du vil bruge med React-applikationen.
     create table products ( 
      id bigint generated by default as identity primary key, 
      name text, 
      description text 
    );

Konfigurer en React CRUD-applikation

Opret en React-applikation , naviger til rodmappen, og opret en ny fil, .env , for at indstille nogle miljøvariabler. Gå over til din Supabase indstillinger side, skal du åbne API afsnit, og kopier værdierne for projekt URL og offentlig anon nøgle . Indsæt disse i din env-fil:

 REACT_APP_SUPABASE_URL = project URL 
REACT_APP_SUPABASE_ANON_KEY = public anon key

Kør derefter denne kommando for at installere Supabases JavaScript-bibliotek i dit React-projekt:



hvordan man genstarter min macbook pro 
 npm install @supabase/supabase-js

Konfigurer Supabase-klienten

I den src mappe, skal du oprette en ny utils/SupabaseClient.js fil og koden nedenfor:

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

Denne kode opretter en Supabase-klientinstans ved at give Supabase-URL'en og en offentlig anon-nøgle, hvilket tillader React-applikationen at kommunikere med Supabase API'erne og udføre CRUD-operationer.