Comment construire une application CRUD React avec Supabase Cloud Storage

React a révolutionné la façon dont les développeurs construisent des interfaces utilisateur pour les applications web. Son architecture basée sur les composants et sa syntaxe déclarative constituent 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 (Create, Read, Update, Delete) est une première étape cruciale vers la construction de solutions web robustes et efficaces.

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

Solution Supabase Backend-as-a-Service

Les fournisseurs de Backend-as-a-Service (BaaS), comme Supabase, offrent une alternative pratique à la construction d’un service de backend complet à partir de zéro pour vos applications web. Idéalement, ces solutions fournissent une large gamme de services backend préconstruits 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, et plus encore, 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 d’expédition tout en bénéficiant de services backend robustes.

Mise en place d’un projet de stockage en nuage Supabase

Pour commencer, rendez-vous sur site web de Supabase et ouvrez un compte.

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

Mise en place d’une application CRUD React

Créez une application React, naviguez jusqu’au répertoire racine et créez un nouveau fichier,. env pour définir quelques variables d’environnement. Dirigez-vous vers votre Supabase paramètres et ouvrez la page API et copiez les valeurs de URL du projet et clé publique anonyme. Collez-les dans votre fichier env :

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

Configurer le client Supabase

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

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

Vous pouvez trouver le code de ce projet dans ce dépôt GitHub.

Mettre en œuvre les opérations CRUD

Maintenant que vous avez configuré avec succès le stockage en nuage de Supabase et votre projet React, mettez en œuvre les opérations CRUD dans votre application React.

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

Ouvrez la base de données src/App.js supprimez le code React standard et ajoutez ce qui suit :

Ce code définit un addProduct qui insère de manière asynchrone un nouvel enregistrement dans la base de données produits dans la base de données en nuage. Si l’opération d’insertion est réussie, la page sera rechargée pour refléter la liste de produits mise à jour.

2. Lire les données de la base de données en nuage

Définissez une fonction de traitement pour récupérer les données stockées dans la base de données.

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 la table des produits. produits’ avec les données récupérées.

Les useEffect exécute le hook React getProducts lors du montage du composant. Cela permet de s’assurer 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.

Les données extraites dans l’élément produits sont transmises en tant qu’accessoires et rendues dynamiquement à l’intérieur de l’élément ProductCard à l’aide du composant carte à l’aide de la fonction map .

3. Mise à jour et suppression des données existantes dans la base de données

Créer une nouvelle components/ProductCard.js dans le fichier /src dans le répertoire /src . Avant de définir les fonctions de gestion, voyons les états et les éléments JSX que vous allez mettre en œuvre dans ce composant.

Ce code crée un élément réutilisable ProductCard réutilisable qui affiche des informations sur le produit et permet de modifier et de mettre à jour les détails du produit dans la base de données Supabase.

Le composant reçoit un produit contenant des informations sur le produit à afficher, et rend une div de carte avec un contenu différent en fonction de l’état d’édition.

Initialement, puisque l’objet édition est réglé sur faux il affiche le nom et la description du produit, ainsi que les boutons permettant de le supprimer ou de le modifier. Cependant, lorsqu’un utilisateur clique sur le bouton éditer le bouton d’édition est réglé sur vrai Cela rendra les champs de saisie avec les valeurs actuelles pré-remplies, permettant à l’utilisateur de modifier et de mettre à jour le nom et la description du produit dans la base de données. Définissez maintenant l’élément mise à jour . Ajoutez ce code sous la déclaration des états dans la section composants/ProductCard.js dans le fichier.

Ce code définit une fonction de gestion asynchrone qui met à jour les données du produit dans la base de données Supabase. Il utilise la fonction supabase pour effectuer l’opération de mise à jour en spécifiant la table, les nouvelles valeurs et une condition basée sur l’ID du produit et recharge la fenêtre après une mise à jour réussie. Enfin, définissez l’instance Supprimer de la fonction de traitement.

Utiliser Supabase pour rationaliser les services dorsaux

Supabase offre un moyen pratique de rationaliser les services backend directement à partir du côté client, éliminant ainsi la nécessité d’écrire un code backend complexe. Outre la gestion des données, il fournit également un support pour divers services backend tels qu’un système d’authentification sécurisé.

Maintenant que vous avez appris l’intégration de Supabase avec React, allez de l’avant et explorez comment vous pouvez l’intégrer avec d’autres frameworks côté client et découvrez comment il peut améliorer votre expérience de développement sur diverses plateformes.

S’abonner à notre newsletter