React a révolutionné la façon dont les développeurs construisent des interfaces utilisateur pour les applications web. Son architecture basée sur des 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, la maîtrise de 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 de manière significative 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 le site de Supabase et créez un compte.
- Une fois que vous avez ouvert un compte, connectez-vous à votre compte tableau de bord page.
- Cliquez sur l’icône Nouveau projet bouton.
- Remplir les détails du projet et cliquer sur Créer un nouveau projet.
- Une fois le projet configuré, sélectionnez et cliquez sur le bouton Éditeur SQL Bouton de fonctionnalité dans le panneau de fonctionnalités du panneau de gauche.
- Exécuter 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.
create table products (
id bigint generated by default as identity primary key,
name text,
description text
);
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, .envpour définir quelques variables d’environnement. Dirigez-vous vers votre Supabase paramètres ouvrir la page API et copier les valeurs de URL du projet et clé publique anonyme. Collez-les dans votre fichier env :
REACT_APP_SUPABASE_URL = project URL
REACT_APP_SUPABASE_ANON_KEY = public anon key
Ensuite, lancez cette commande pour installer la bibliothèque JavaScript de Supabase dans votre projet React :
npm install @supabase/supabase-js
Configurer le client Supabase
Dans la fenêtre src créer un nouveau répertoire utils/SupabaseClient.js et le code ci-dessous :
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);
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.
Implémenter 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 fenêtre src/App.js supprimez le code React standard et ajoutez ce qui suit :
import { useState, useEffect } from 'react';
import ProductCard from './components/ProductCard';
import { supabase } from './utils/SupabaseClient';
import './App.css';
export default function App() {
const [name, setName] = useState('');
const [description, setDescription] = useState('');
async function addProduct() {
try {
const { data, error } = await supabase
.from('products')
.insert({
name: name,
description: description
})
.single();
if (error) throw error;
window.location.reload();
} catch (error) {
alert(error.message);
}
}
Ce code définit un ajouterProduit 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 réussit, 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 dans le nuage
Définir une fonction de traitement pour récupérer les données stockées dans la base de données.
const [products, setProducts] = useState([]);
async function getProducts() {
try {
const { data, error } = await supabase
.from('products')
.select('*')
.limit(10);
if (error) throw error;
if (data != null) {
setProducts(data);
}
} catch (error) {
alert(error.message);
}
}
useEffect(() => {
getProducts();
}, []);
Ce code récupère de manière asynchrone les données de la base de données. La requête de récupération extrait toutes les données de la table des produits, en limitant les résultats à un maximum de 10 enregistrements, et met à jour le fichier produits’ avec les données récupérées.
Le effet d’utilisation Le hook React exécute la fonction getProducts lors du montage du composant. Cela permet de s’assurer que les données des produits sont récupérées et affichées lors du premier rendu 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.
return (
<>
<header>
<div className="header-container">
<h3>Store Products</h3>
</div>
</header>
<h3>Add products Data to the Supabase Database</h3>
<div className="create-product-container">
<div>
<label>Product Name</label>
<input
type="text"
id="name"
onChange={(e) => setName(e.target.value)}
/>
<label>Product Description</label>
<input
type="text"
id="description"
onChange={(e) => setDescription(e.target.value)}
/>
<br />
<button onClick={() => addProduct()}>
Add Product
</button>
</div>
</div>
<hr />
<h3>Current Products in the Database</h3>
<div className="product-list-container">
{products.map((product) => (
<div key={product.id}>
<ProductCard product={product} />
</div>
))}
</div>
</>
);
}
Les données récupérées dans le composant tableau des produits est passé en tant que props et rendu dynamiquement dans la page ProductCard à l’aide du composant carte fonction.
3. Mise à jour et suppression des données existantes dans la base de données
Créer un nouveau composants/ProductCard.js dans le fichier /src répertoire. Avant de définir les fonctions de gestion, voyons les états et les éléments JSX que vous allez implémenter dans ce composant.
import { useState } from 'react';
import { supabase } from '../utils/SupabaseClient';
import './productcard.styles.css';
export default function ProductCard(props) {
const product = props.product;
const [editing, setEditing] = useState(false);
const [name, setName] = useState(product.name);
const [description, setDescription] = useState(product.description);
return (
<div className="product-card">
<div>
{editing === false ? (
<div>
<h5>{product.name}</h5>
<p>{product.description}</p>
<button className="delete-button" onClick={() => deleteProduct()}>Delete Product</button>
<button className="edit-button" onClick={() => setEditing(true)}>Edit Product</button>
</div>
) : (
<div>
<h4>Editing Product</h4>
<button className="go-back-button" onClick={() => setEditing(false)}>Go Back</button>
<br />
<label htmlFor="name">Product Name</label>
<input
type="text"
id="name"
defaultValue={product.name}
onChange={(e) => setName(e.target.value)}/>
<label htmlFor="description">Product Description</label>
<input
type="text"
id="description"
defaultValue={product.description}
onChange={(e) => setDescription(e.target.value)}/>
<br />
<button className="update-button" onClick={() => updateProduct()}>Update Product in Supabase DB</button>
</div>)}
</div>
</div>
);
}
Ce code crée un élément réutilisable ProductCard composant qui affiche des informations sur les produits et permet d’éditer et de mettre à jour les détails des produits dans la base de données Supabase.
Le composant reçoit un produit en tant qu’objet prop, contenant des informations sur le produit à afficher, et rend une div card avec un contenu différent en fonction de l’état d’édition.
Initialement, puisque l’objet l’édition l’état est défini sur faux, il affiche le nom et la description du produit, ainsi que des 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 vraiCela rendra les champs de saisie avec les valeurs actuelles pré-remplies, permettant à l’utilisateur d’éditer et de mettre à jour le nom et la description du produit dans la base de données. Définissez maintenant l’élément update fonction handler. Ajoutez ce code sous la déclaration des états dans le fichier composants/ProductCard.js fichier.
async function updateProduct() {
try {
const { data, error } = await supabase
.from('products')
.update({
name: name,
description: description
})
.eq('id', product.id);
if (error) throw error;
window.location.reload();
} catch (error) {
alert(error.message);
}
}
Ce code définit une fonction 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 fonction du gestionnaire.
async function deleteProduct() {
try {
const { data, error } = await supabase
.from('products')
.delete()
.eq('id', product.id);
if (error) throw error;
window.location.reload();
} catch (error) {
alert(error.message);
}
}
Utiliser Supabase pour rationaliser les services backend
Supabase offre un moyen pratique de rationaliser les services backend directement du côté client, éliminant ainsi le besoin d’écrire un code backend complexe. Outre la gestion des données, Supabase prend également en charge 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 plates-formes.