Come creare un'applicazione CRUD React con Supabase Cloud Storage

React ha rivoluzionato il modo in cui gli sviluppatori creano interfacce utente per le applicazioni web. La sua architettura basata su componenti e la sua sintassi dichiarativa forniscono una solida base per la creazione di esperienze utente interattive e dinamiche.

In qualità di sviluppatore React, padroneggiare come implementare le operazioni CRUD (Create, Read, Update, Delete) è un primo passo cruciale verso la creazione di soluzioni web robuste ed efficienti.

Scopri come creare una semplice applicazione React CRUD, utilizzando Supabase Cloud Storage come soluzione di back-end.

Soluzione Supabase Back-end-as-a-Service

Fornitori di back-end come servizio (BaaS)., come Supabase, offrono una comoda alternativa alla creazione da zero di un servizio di backend completo per le tue applicazioni web. Idealmente, queste soluzioni forniscono un'ampia gamma di servizi di backend predefiniti che sono essenziali per configurare un sistema di backend efficiente per le tue applicazioni web React.

Con BaaS, puoi utilizzare funzionalità come l'archiviazione dei dati, i sistemi di autenticazione, gli abbonamenti in tempo reale e altro ancora senza la necessità di sviluppare e mantenere questi servizi in modo indipendente.

Integrando soluzioni BaaS come Supabase nel tuo progetto, puoi ridurre significativamente i tempi di sviluppo e spedizione pur beneficiando di solidi servizi di back-end.

Imposta un progetto di archiviazione cloud Supabase

Per iniziare, vai su Sito web di Supabasee registrati per un account.

1. Dopo esserti registrato per un account, accedi al tuo account pannello di controllo pagina.
2. Clicca sul Nuovo progetto pulsante.
3. Compila i dettagli del progetto e clicca su Crea nuovo progetto.
4. Con il progetto impostato, selezionare e fare clic su Editor SQL pulsante funzione nel pannello delle funzioni del riquadro sinistro.
5. Eseguire l'istruzione SQL di seguito nel file Editor SQL per creare una tabella demo. Conterrà i dati che utilizzerai con l'applicazione React.

   crearetavolo prodotti (
    id bigint generato per impostazione predefinita come chiave primaria di identità,
    testo del nome,
    testo descrittivo
   );

Configurare un'applicazione React CRUD

Crea un'applicazione React, vai alla directory principale e crea un nuovo file, .env, per impostare alcune variabili di ambiente. Vai alla tua Supabase impostazioni pagina, apri il file API sezione e copiare i valori per URL del progetto E chiave anonima pubblica. Incolla questi nel tuo file env:

REACT_APP_SUPABASE_URL = URL del progetto
REACT_APP_SUPABASE_ANON_KEY = chiave anonima pubblica

Successivamente, esegui questo comando per installare la libreria JavaScript di Supabase nel tuo progetto React:

npm install @supabase/supabase-js

Configura il client Supabase

Nel src directory, creane una nuova utils/SupabaseClient.js file e il codice seguente:

importare { creaCliente } da'@supabase/supabase-js'; 
cost supabaseURL = process.env. REACT_APP_SUPABASE_URL;
cost supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
esportarecost supabase = createClient (supabaseURL, supabaseAnonKey);

Questo codice crea un'istanza client Supabase fornendo l'URL Supabase e una chiave anonima pubblica, consentendo all'applicazione React di comunicare con le API Supabase ed eseguire operazioni CRUD.

Puoi trovare il codice di questo progetto in questo Deposito GitHub.

Implementare le operazioni CRUD

Ora che hai configurato correttamente il cloud storage di Supabase e il tuo progetto React, implementa le operazioni CRUD nella tua applicazione React.

1. Aggiungi dati al database

Apri il src/App.js file, eliminare il codice standard React e aggiungere quanto segue:

importare {usaStato, usaEffetto} da'reagire';
importare Scheda prodotto da'./componenti/SchedaProdotto';
importare { supbase } da'./utils/SupabaseClient';
importare'./App.css';
esportarepredefinitofunzioneApp() {
cost [nome, setName] = useState('');
cost [descrizione, setDescrizione] = useState('');
asincronofunzioneaddProdotto() {
Tentativo {
cost { dati, errore } = aspetta supbase
 .da('prodotti')
 .inserire({
 nome: nome,
 descrizione: descrizione
 })
 .separare();
Se (errore) gettare errore;
finestra.posizione.ricarica();
 } presa (errore) {
 avviso (errore.messaggio);
 }
 }

Questo codice definisce un addProdotto funzione del gestore che inserisce in modo asincrono un nuovo record nel file prodotti tabella nel database cloud. Se l'operazione di inserimento ha esito positivo, la pagina verrà ricaricata per riflettere l'elenco dei prodotti aggiornato.

2. Leggi i dati dal database cloud

Definire una funzione di gestione per recuperare i dati archiviati dal database.

cost [prodotti, setProdotti] = useState([]);
asincronofunzionegetProdotti() {
Tentativo {
cost { dati, errore } = aspetta supbase
 .da('prodotti')
 .Selezionare('*')
 .limite(10);
Se (errore) gettare errore;
Se (dati != nullo) {
 setProdotti (dati);
 }
 } presa (errore) {
 avviso (errore.messaggio);
 }
 }
 usaEffetto(() => {
 getProdotti();
 }, []);

Questo codice recupera in modo asincrono i dati dal database. La query fetch recupera tutti i dati dalla tabella prodotti, limitando i risultati a un massimo di 10 record, e aggiorna il prodotti' stato con i dati recuperati.

IL useEffectAggancio di reazione corre il getProdotti funzionare quando il componente viene montato. Ciò garantisce che i dati dei prodotti vengano recuperati e resi quando il componente viene inizialmente reso. Infine, aggiungi il codice che esegue il rendering degli elementi JSX di input nel browser per consentire agli utenti di aggiungere prodotti a un database Supabase e visualizzare i prodotti esistenti recuperati dal database.

ritorno (
 <>

"header-contenitore">
Conservare i prodotti</h3>
 </div>
 </header>


Aggiungi i dati dei prodotti al database Supabase</h3>


"crea-prodotto-contenitore">


Nome prodotto</label>
 tipo="testo"
 id="nome"
 onChange={(e) => setName (e.target.value)}
 />
Descrizione del prodotto</label>
 tipo="testo"
 id="descrizione"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProdotto()}>
 Aggiungi prodotto
 </button>
 </div>
 </div>




Prodotti attuali In la banca dati</h3>

"contenitore-lista-prodotti">
 {prodotti.mappa((Prodotto) => (



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

I dati recuperati nel file matrice di prodotti viene passato come oggetti di scena e reso dinamicamente all'interno del file Scheda prodotto componente utilizzando il carta geografica funzione.

3. Aggiorna ed elimina i dati esistenti nel database

Crea un nuovo componenti/ProductCard.js file nel /src directory. Prima di definire le funzioni del gestore, vediamo gli stati e gli elementi JSX che implementerai in questo componente.

importare { usaStato } da'reagire';
importare { supbase } da'../utils/SupabaseClient';
importare'./schedaprodotto.styles.css';
esportarepredefinitofunzioneScheda prodotto(oggetti di scena) {
cost prodotto = props.prodotto;
cost [editing, setEditing] = useState(falso);
cost [nome, setName] = useState (prodotto.nome);
cost [descrizione, setDescrizione] = useState (prodotto.descrizione);
ritorno (
"scheda-prodotto">


 {la modifica falso? (


{nome.prodotto}</h5>


{prodotto.descrizione}</p>
"pulsante cancella" onClick={() => deleteProduct()}>Elimina prodotto</button>
"pulsante modifica" onClick={() => setEditing(VERO)}>Modifica prodotto</button>
 </div>
 ): (


Modifica prodotto</h4>
"pulsante indietro" onClick={() => setEditing(falso)}>Torna indietro</button>


"nome">Nome prodotto</label>
 tipo="testo"
 id="nome"
 defaultValue={nome.prodotto}
 onChange={(e) => setName (e.target.value)}/>
"descrizione">Descrizione del prodotto</label>
 tipo="testo"
 id="descrizione"
 defaultValue={prodotto.descrizione}
 onChange={(e) => setDescription (e.target.value)}/>


"pulsante di aggiornamento" onClick={() => updateProduct()}>Aggiorna prodotto In Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asincronofunzioneupdateProduct() {
Tentativo {
cost { dati, errore } = aspetta supbase
 .da('prodotti')
 .aggiornamento({
 nome: nome,
 descrizione: descrizione
 })
 .eq('id', Codice prodotto);
Se (errore) gettare errore;
finestra.posizione.ricarica();
 } presa (errore) {
 avviso (errore.messaggio);
 }
}

asincronofunzionedeleteProdotto() {
Tentativo {
cost { dati, errore } = aspetta supbase
 .da('prodotti')
 .eliminare()
 .eq('id', Codice prodotto);
Se (errore) gettare errore;
finestra.posizione.ricarica();
 } presa (errore) {
 avviso (errore.messaggio);
 }
}