כיצד לבנות אפליקציית CRUD React עם Supabase Cloud Storage

קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

React חוללה מהפכה באופן שבו מפתחים בונים ממשקי משתמש עבור יישומי אינטרנט. הארכיטקטורה מבוססת הרכיבים והתחביר ההצהרתי שלו מספקים בסיס רב עוצמה ליצירת חוויות משתמש אינטראקטיביות ודינמיות.

גרפיקה משולבת/מובנית

כמפתח React, שליטה ביישום פעולות CRUD (צור, קריאה, עדכן, מחק) הוא צעד ראשון ומכריע לקראת בניית פתרונות אינטרנט חזקים ויעילים.

איפור של סרטון היום גלול כדי להמשיך עם התוכן

למד כיצד לבנות אפליקציית React CRUD פשוטה, תוך שימוש ב-Supabase Cloud Storage כפתרון הקצה שלך.

Supabase Backend-as-a-Service Solution

ספקי Backend-as-a-Service (BaaS). , כמו Supabase, מציעים חלופה נוחה לבניית שירות אחורי מלא מאפס עבור יישומי האינטרנט שלך. באופן אידיאלי, פתרונות אלו מספקים מגוון רחב של שירותי backend שנבנו מראש החיוניים להקמת מערכת backend יעילה עבור יישומי האינטרנט של React.

עם BaaS, אתה יכול להשתמש בתכונות כגון אחסון נתונים, מערכות אימות, מנויים בזמן אמת ועוד ללא צורך בפיתוח ותחזוקה של שירותים אלו באופן עצמאי.

על ידי שילוב פתרונות BaaS כמו Supabase בפרויקט שלך, אתה יכול לצמצם משמעותית את זמן הפיתוח והמשלוח, ועדיין ליהנות משירותי אחורי חזקים.

הגדר פרויקט אחסון בענן של Supabase

כדי להתחיל, עבור אל האתר של Supabase , והירשם לחשבון.

לאחר שנרשמת לחשבון, היכנס לחשבון שלך לוּחַ מַחווָנִים עמוד.
הקלק על ה פרוייקט חדש לַחְצָן.
מלאו את פרטי הפרויקט והקליקו על צור פרויקט חדש .
עם הגדרת הפרויקט, בחר ולחץ על עורך SQL לחצן תכונות בחלונית התכונות השמאלית.
הפעל את הצהרת SQL למטה ב- עורך SQL כדי ליצור טבלת הדגמה. הוא יחזיק את הנתונים שבהם תשתמש עם אפליקציית React.
```
 create table products ( 
  id bigint generated by default as identity primary key, 
  name text, 
  description text 
);
```

הגדר אפליקציית React CRUD

צור אפליקציית React , נווט אל ספריית השורש וצור קובץ חדש, .env , כדי להגדיר כמה משתני סביבה. פנה ל-Supabase שלך הגדרות עמוד, פתח את ממשק API מקטע, והעתק את הערכים עבור כתובת האתר של הפרויקט ו מפתח אנון ציבורי . הדבק את אלה בקובץ ה-env שלך:

 REACT_APP_SUPABASE_URL = project URL 
REACT_APP_SUPABASE_ANON_KEY = public anon key

לאחר מכן, הפעל את הפקודה הזו כדי להתקין את ספריית ה-JavaScript של Supabase בפרויקט React שלך:

 npm install @supabase/supabase-js

הגדר את לקוח Supabase

בתוך ה src ספרייה, צור חדש utils/SupabaseClient.js הקובץ והקוד שלהלן:

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

קוד זה יוצר מופע לקוח של Supabase על ידי אספקת כתובת ה-URL של Supabase ומפתח אנון ציבורי, מה שמאפשר ליישום React לתקשר עם ממשקי ה-API של Supabase ולבצע פעולות CRUD.