Comment créer une application CRUD React avec Supabase Cloud Storage

React a révolutionné la façon dont les développeurs créent des interfaces utilisateur pour les applications Web. Son architecture basée sur les composants et sa syntaxe déclarative fournissent une base puissante pour créer des expériences utilisateur interactives et dynamiques.

En tant que développeur React, maîtriser la mise en œuvre des opérations CRUD (créer, lire, mettre à jour, supprimer) est une première étape cruciale vers la création de solutions Web robustes et efficaces.

Apprenez à créer une application React CRUD simple, en utilisant Supabase Cloud Storage comme solution backend.

Supabase Backend-as-a-Service Solution

Fournisseurs de backend en tant que service (BaaS), comme Supabase, offrent une alternative pratique à la création d'un service backend à part entière pour vos applications Web. Idéalement, ces solutions fournissent une large gamme de services backend prédéfinis qui sont essentiels pour mettre en place un système backend efficace pour vos applications Web React.

Avec BaaS, vous pouvez utiliser des fonctionnalités telles que le stockage de données, les systèmes d'authentification, les abonnements en temps réel, etc., sans avoir besoin de développer et de maintenir ces services de manière indépendante.

En intégrant des solutions BaaS comme Supabase dans votre projet, vous pouvez réduire considérablement le temps de développement et de livraison tout en bénéficiant de services backend robustes.

Configurer un projet Supabase Cloud Storage

Pour commencer, rendez-vous sur Site Web de Supabase, et créez un compte.

1. Une fois que vous avez créé un compte, connectez-vous à votre compte tableau de bord page.
2. Clique sur le Nouveau projet bouton.
3. Remplissez les détails du projet et cliquez sur Créer un nouveau projet.
4. Une fois le projet configuré, sélectionnez et cliquez sur le Éditeur SQL bouton de fonctionnalité sur le panneau de fonctionnalités du volet gauche.
5. Exécutez l'instruction SQL ci-dessous dans le Éditeur SQL pour créer une table de démonstration. Il contiendra les données que vous utiliserez avec l'application React.

   créertableau des produits (
    id bigint généré par défaut comme clé primaire d'identité,
    texte du nom,
    texte descriptif
   );

Configurer une application React CRUD

Créer une application React, accédez au répertoire racine et créez un nouveau fichier, .env, pour définir certaines variables d'environnement. Rendez-vous sur votre Supabase paramètres page, ouvrez la API section, et copiez les valeurs pour URL du projet et clé anonyme publique. Collez-les dans votre fichier env :

REACT_APP_SUPABASE_URL = URL du projet
REACT_APP_SUPABASE_ANON_KEY = clé anonyme publique

Ensuite, exécutez cette commande pour installer la bibliothèque JavaScript de Supabase dans votre projet React :

npm install @supabase/supabase-js

Configurer le client Supabase

Dans le src répertoire, créez un nouveau utils/SupabaseClient.js fichier et le code ci-dessous :

importer { créerClient } depuis'@supabase/supabase-js'; 
constante supabaseURL = process.env. REACT_APP_SUPABASE_URL ;
constante supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY ;
exporterconstante supabase = createClient (supabaseURL, supabaseAnonKey);

Ce code crée une instance client Supabase en fournissant l'URL Supabase et une clé anon publique, permettant à l'application React de communiquer avec les API Supabase et d'effectuer des opérations CRUD.

Vous pouvez trouver le code de ce projet dans ce Référentiel GitHub.

Mettre en œuvre les opérations CRUD

Maintenant que vous avez configuré avec succès le stockage cloud de Supabase et votre projet React, implémentez les opérations CRUD dans votre application React.

1. Ajouter des données à la base de données

Ouvrez le src/App.js fichier, supprimez le code standard React et ajoutez ce qui suit :

importer { useState, useEffect } depuis'réagir';
importer ProductCard depuis'./composants/ProductCard';
importer { supbase } depuis'./utils/SupabaseClient';
importer'./App.css';
exporterdéfautfonctionApplication() {
constante [nom, setName] = useState('');
constante [description, setDescription] = useState('');
asynchronefonctionajouterProduit() {
essayer {
constante { données, erreur } = attendre superbase
 .depuis('des produits')
 .insérer({
 nom nom,
 descriptif: descriptif
 })
 .seul();
si (erreur) lancer erreur;
fenêtre.location.reload();
 } attraper (erreur) {
 alerte (error.message);
 }
 }

Ce code définit un ajouterProduit fonction de gestionnaire qui insère de manière asynchrone un nouvel enregistrement dans le des produits table dans la base de données cloud. Si l'opération d'insertion réussit, la page se rechargera pour refléter la liste de produits mise à jour.

2. Lire les données de la base de données cloud

Définissez une fonction de gestionnaire pour extraire les données stockées de la base de données.

constante [produits, setProducts] = useState([]);
asynchronefonctiongetProducts() {
essayer {
constante { données, erreur } = attendre superbase
 .depuis('des produits')
 .sélectionner('*')
 .limite(10);
si (erreur) lancer erreur;
si (données != nul) {
 setProducts (données);
 }
 } attraper (erreur) {
 alerte (error.message);
 }
 }
 useEffet(() => {
 obtenirProduits();
 }, []);

Ce code récupère de manière asynchrone les données de la base de données. La requête d'extraction récupère toutes les données de la table des produits, en limitant les résultats à un maximum de 10 enregistrements, et met à jour le des produits' état avec les données récupérées.

Le utiliserEffetCrochet de réaction exécute le getProducts fonctionner lorsque le composant est monté. Cela garantit que les données des produits sont récupérées et rendues lors du rendu initial du composant. Enfin, ajoutez le code qui rend les éléments JSX d'entrée sur le navigateur pour permettre aux utilisateurs d'ajouter des produits à une base de données Supabase et d'afficher les produits existants extraits de la base de données.

retour (
 <>

"header-container">
Produits du magasin</h3>
 </div>
 </header>


Ajouter des données de produits à la base de données Supabase</h3>


"créer-un-conteneur-de-produit">


Nom du produit</label>
 taper="texte"
 identifiant="nom"
 onChange={(e) => setName (e.target.value)}
 />
Description du produit</label>
 taper="texte"
 identifiant="description"
 onChange={(e) => setDescription (e.target.value)}
 />


 ajouterProduit()}>
 Ajouter un produit
 </button>
 </div>
 </div>




Produits actuels dans la base de données</h3>

"conteneur-liste-produits">
 {products.map((produit) => (



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

Les données récupérées dans le gamme de produits est transmis en tant qu'accessoires et rendu dynamiquement dans le ProductCard composant utilisant le carte fonction.

3. Mettre à jour et supprimer des données existantes dans la base de données

Créer un nouveau composants/ProductCard.js dossier dans le /src annuaire. Avant de définir les fonctions du gestionnaire, voyons les états et les éléments JSX que vous implémenterez dans ce composant.

importer { useState } depuis'réagir';
importer { supbase } depuis'../utils/SupabaseClient';
importer'./productcard.styles.css';
exporterdéfautfonctionProductCard(accessoires) {
constante produit = accessoires.produit ;
constante [édition, setEditing] = useState(FAUX);
constante [nom, setName] = useState (product.name);
constante [description, setDescription] = useState (product.description);
retour (
"fiche-produit">


 {édition FAUX? (


{product.name}</h5>


{product.description}</p>
"bouton de suppression" onClick={() => deleteProduct()}>Supprimer le produit</button>
"bouton d'édition" onClick={() => setEditing(vrai)}>Modifier le produit</button>
 </div>
 ): (


Modification du produit</h4>
"bouton de retour" onClick={() => setEditing(FAUX)}>Retour</button>


"nom">Nom du produit</label>
 taper="texte"
 identifiant="nom"
 defaultValue={product.name}
 onChange={(e) => setName (e.target.value)}/>
"description">Description du produit</label>
 taper="texte"
 identifiant="description"
 defaultValue={produit.description}
 onChange={(e) => setDescription (e.target.value)}/>


"bouton de mise à jour" onClick={() => updateProduct()}>Mettre à jour le produit dans BD Supabase</button>
 </div>)}
 </div>
 </div>
 );
}

asynchronefonctionmettre à jour le produit() {
essayer {
constante { données, erreur } = attendre superbase
 .depuis('des produits')
 .mise à jour({
 nom nom,
 descriptif: descriptif
 })
 .eq('identifiant', produit.id);
si (erreur) lancer erreur;
fenêtre.location.reload();
 } attraper (erreur) {
 alerte (error.message);
 }
}

asynchronefonctionsupprimerProduit() {
essayer {
constante { données, erreur } = attendre superbase
 .depuis('des produits')
 .supprimer()
 .eq('identifiant', produit.id);
si (erreur) lancer erreur;
fenêtre.location.reload();
 } attraper (erreur) {
 alerte (error.message);
 }
}