Comment construire une application CRUD avec ReactJS ?

introduction dans ce tutoriel, vous allez créer une application crud complète (créer, lire, mettre à jour et supprimer) en utilisant reactjs ce guide est conçu pour effectuer les opérations de base d'une application logicielle en démontrant comment construire des applications crud qui gèrent et mettent à jour efficacement les données vous commencerez par créer et configurer un projet back4app nommé basic crud app reactjs , qui sert de système backend robuste pour votre application web ensuite, vous concevrez un schéma de base de données évolutif en définissant des collections et des champs détaillés—soit manuellement, soit avec l'aide de l'agent ia de back4app puis, vous utiliserez l'application admin de back4app—un outil de gestion convivial avec une interface de glisser déposer—pour gérer facilement vos collections de données cette interface d'administration améliore l'expérience utilisateur et simplifie l'interface utilisateur, permettant aux utilisateurs d'effectuer rapidement des opérations crud enfin, vous déploierez votre frontend reactjs et l'intégrerez avec back4app en utilisant rest/graphql (ou le sdk parse, lorsque disponible), tout en sécurisant votre backend avec des contrôles d'accès avancés à la fin de ce guide, vous aurez construit une application web prête pour la production qui non seulement prend en charge les opérations crud de base, mais inclut également l'authentification des utilisateurs et des capacités de mise à jour de données robustes points clés à retenir apprenez à construire des applications crud qui gèrent efficacement les données à l'aide d'un système de gestion de base de données fiable obtenez des informations pratiques sur la conception d'un backend évolutif et son intégration avec un frontend reactjs pour améliorer l'expérience utilisateur découvrez comment utiliser un outil de gestion par glisser déposer (l'application back4app admin) pour simplifier les opérations de création, de lecture, de mise à jour et de suppression comprenez les techniques de déploiement, y compris la conteneurisation docker, pour lancer rapidement votre application web prérequis avant de commencer, assurez vous d'avoir ce qui suit un compte back4app et un nouveau projet configuré si vous avez besoin d'aide, consultez démarrer avec back4app https //www back4app com/docs/get started/new parse app un environnement de développement reactjs utilisez create react app https //create react app dev/docs/getting started/ ou un outil similaire assurez vous que node js (version 14 ou supérieure) est installé compréhension de base de javascript, reactjs et des api rest consultez la documentation reactjs https //reactjs org/docs/getting started html si nécessaire étape 1 – configuration du projet créer un nouveau projet back4app connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” dans votre tableau de bord entrez le nom du projet basic crud app reactjs et suivez les instructions pour créer votre projet créer un nouveau projet une fois créé, votre nouveau projet apparaîtra sur votre tableau de bord back4app, fournissant une base solide pour votre configuration backend et la gestion de votre projet étape 2 – conception du schéma de base de données conception de votre modèle de données pour l'application crud de base, vous allez créer plusieurs collections voici quelques exemples des collections dont vous aurez besoin, décrivant les champs nécessaires et les types de données pour vous aider à configurer efficacement le schéma de votre base de données ces collections sont conçues pour effectuer les opérations crud fondamentales qui permettent aux utilisateurs de créer, lire, mettre à jour et supprimer des données 1\ collection d'articles cette collection stocke des informations sur chaque article champ type de données description id identifiant d'objet clé primaire générée automatiquement titre chaîne le titre de l'élément description chaîne une brève description de l'article créé à date horodatage lorsque l'élément a été créé mis à jour le date horodatage de la dernière mise à jour de l'élément 2\ collection des utilisateurs cette collection stocke les informations utilisateur et les détails d'authentification champ type de données description id identifiant d'objet clé primaire générée automatiquement nom d'utilisateur chaîne nom d'utilisateur unique pour l'utilisateur email chaîne adresse e mail unique hash de mot de passe chaîne mot de passe haché pour l'authentification créé à date horodatage de la création du compte utilisateur mis à jour le date horodatage de la mise à jour du compte utilisateur vous pouvez configurer ces collections manuellement dans le tableau de bord back4app en créant une nouvelle classe pour chaque collection et en ajoutant des colonnes pour définir les champs créer une nouvelle classe vous pouvez facilement créer des champs pour votre base de données en sélectionnant un type de données, en nommant le champ, en définissant une valeur par défaut et en précisant s'il est requis créer une colonne utiliser l'agent ai back4app pour la génération de schémas l'agent ai back4app est un outil puissant disponible directement depuis votre tableau de bord back4app il vous permet de générer automatiquement le schéma de votre base de données en fonction d'un prompt qui décrit vos collections et champs souhaités cette fonctionnalité permet de gagner un temps précieux pour la gestion de projet et aide à garantir que votre système de gestion de base de données est configuré pour effectuer les opérations de base requises par votre application web comment utiliser l'agent ia ouvrez l'agent ia connectez vous à votre tableau de bord back4app et localisez l'agent ia dans le menu ou dans les paramètres de votre projet décrivez votre modèle de données dans l'interface de l'agent ia, collez un prompt détaillé qui décrit les collections et champs dont vous avez besoin examinez et appliquez une fois soumis, l'agent ia générera les collections et définitions de champs examinez ces suggestions et appliquez les à votre projet exemple de prompt create the following collections in my back4app application 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) utiliser l'agent ia de cette manière permet de gagner du temps et garantit que votre schéma est cohérent et optimisé pour les besoins de votre application étape 3 – activation de l'application admin et opérations crud aperçu de l'application admin l'application admin de back4app est une interface puissante sans code qui vous permet de gérer vos données backend cet outil de gestion fournit une interface utilisateur par glisser déposer qui permet aux utilisateurs d'effectuer facilement des opérations crud telles que créer, lire, mettre à jour et supprimer des enregistrements activation de l'application admin accédez au menu “plus” dans votre tableau de bord back4app cliquez sur “admin app” puis sur “activer l'application admin ” configurez vos identifiants administratifs en créant votre premier utilisateur admin ce processus configure également des rôles (par exemple, b4aadminuser ) et des collections système activer l'application admin après l'activation, connectez vous à l'application admin pour gérer vos données tableau de bord de l'application admin utiliser l'application admin pour les opérations crud dans l'application admin, vous pouvez créer des enregistrements cliquez sur le bouton “ajouter un enregistrement” dans une collection (par exemple, articles) pour créer de nouvelles entrées lire/mettre à jour des enregistrements sélectionnez un enregistrement pour voir ses détails ou modifier des champs, garantissant une mise à jour fluide des données supprimer des enregistrements utilisez l'option de suppression pour retirer les enregistrements qui ne sont plus nécessaires cet outil de gestion facile à utiliser améliore l'expérience utilisateur globale en fournissant une interface simple de glisser déposer pour les fonctions crud étape 4 – intégrer reactjs avec back4app maintenant que votre backend est configuré et géré via l'application admin, il est temps de connecter votre frontend reactjs à back4app option a utiliser le sdk parse installer le sdk parse npm install parse initialiser parse dans votre application react créer un fichier (par exemple, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // remplacez par vos véritables identifiants back4app parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; utiliser parse dans un composant react par exemple, créez un composant pour récupérer et afficher des éléments // src/components/itemslist js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("erreur lors de la récupération des éléments ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>éléments\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; option b utiliser rest ou graphql si votre environnement ne prend pas en charge le sdk parse, vous pouvez effectuer des opérations crud en utilisant rest ou graphql par exemple, pour récupérer des éléments en utilisant rest // example rest call to fetch items const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); intégrez ces appels api dans vos composants react selon vos besoins étape 5 – sécuriser votre backend listes de contrôle d'accès (acl) sécurisez vos données en attribuant des acl aux objets par exemple, pour créer un élément privé async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl only the owner can read and write const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } permissions au niveau de la classe (clp) dans le tableau de bord back4app, configurez les clp pour chaque collection afin de définir des règles d'accès par défaut cela garantit que seuls les utilisateurs authentifiés ou autorisés peuvent accéder aux données sensibles étape 6 – authentification des utilisateurs configuration des comptes utilisateurs back4app utilise la classe user de parse pour l'authentification dans votre application react, gérez l'inscription et la connexion des utilisateurs comme suit // src/components/auth js import react, { usestate } from 'react'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user signed up successfully!'); } catch (error) { alert('error signing up ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; une approche similaire peut être utilisée pour la connexion et la gestion des sessions des fonctionnalités supplémentaires telles que les connexions sociales, la vérification des emails et la réinitialisation des mots de passe peuvent être configurées dans le tableau de bord de back4app étape 7 – déployer votre frontend reactjs avec le déploiement web la fonctionnalité de déploiement web de back4app vous permet d'héberger votre frontend reactjs sans effort en déployant votre code depuis un dépôt github dans cette section, vous apprendrez à préparer votre build de production, à valider votre code source sur github, à intégrer votre dépôt avec le déploiement web et à déployer votre site 7 1 préparez votre build de production ouvrez votre dossier de projet dans un terminal exécutez la commande de construction npm run build cette commande crée un dossier de construction contenant tous les fichiers statiques optimisés (y compris index html , javascript, css et images) vérifiez la construction assurez vous que le dossier de construction contient un fichier index html ainsi que les sous répertoires d'actifs nécessaires 7 2 organisez et téléchargez votre code source votre dépôt doit inclure l'intégralité du code source de votre frontend reactjs une structure de fichiers typique pourrait ressembler à ceci basic crud app reactjs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md exemples de fichiers de code source src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; \#### commit your code to github 1\ initialize a git repository in your project folder (if you haven’t already) ```bash git init ajoutez vos fichiers sources git add engagez vos modifications git commit m "engagement initial du code source frontend reactjs" créez un dépôt github par exemple, créez un dépôt nommé basic crud app reactjs frontend sur github poussez votre code sur github git remote add origin https //github com/votre nom utilisateur/basic crud app reactjs frontend git git push u origin main 7 3 intégrer votre dépôt github avec le déploiement web accéder au déploiement web connectez vous à votre tableau de bord back4app, naviguez vers votre projet (basic crud app reactjs), et cliquez sur la fonctionnalité de déploiement web connectez vous à github si vous ne l'avez pas encore fait, intégrez votre compte github en suivant les instructions à l'écran cette connexion permet à back4app d'accéder à votre dépôt sélectionnez votre dépôt et votre branche choisissez le dépôt que vous avez créé (par exemple, basic crud app reactjs frontend ) et sélectionnez la branche (par exemple, main ) qui contient votre code reactjs 7 4 configurez votre déploiement fournissez des détails de configuration supplémentaires commande de construction si votre dépôt n'inclut pas de dossier de construction , spécifiez la commande de construction (par exemple, npm run build ) back4app exécutera cette commande lors du déploiement répertoire de sortie définissez le répertoire de sortie sur build afin que back4app sache quel dossier contient vos fichiers de site statiques variables d'environnement si votre application dépend de variables d'environnement (par exemple, des clés api), ajoutez les dans les paramètres de configuration 7 5 dockerisez votre projet d'application reactjs si vous préférez utiliser docker pour le déploiement, vous pouvez containeriser votre application reactjs incluez un dockerfile dans votre dépôt avec un contenu similaire à ce qui suit \# use an official node runtime as a parent image from node 16 alpine as build \# set the working directory workdir /app \# copy package json and package lock json copy package json / \# install dependencies run npm install \# copy the rest of the application copy \# build the react app run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] incluez ce dockerfile dans votre dépôt ensuite, dans votre configuration de déploiement web, sélectionnez l'option de déploiement docker pour construire et déployer votre application conteneurisée 7 6 déployez votre application cliquez sur le bouton déployer une fois que vous avez configuré les paramètres de déploiement, cliquez sur le déployer bouton surveillez le processus de construction back4app récupérera votre code depuis github, exécutera la commande de construction (si configurée) et déploiera votre application dans un conteneur obtenez votre url après la fin du déploiement, back4app fournira une url où votre application reactjs est hébergée 7 7 vérifiez votre déploiement visitez l'url fournie ouvrez l'url dans votre navigateur web pour voir votre site déployé testez l'application vérifiez que votre application se charge correctement, que toutes les routes fonctionnent comme prévu et que tous les actifs (css, javascript, images) sont correctement servis déboguez si nécessaire utilisez les outils de développement de votre navigateur pour vérifier les erreurs si des problèmes surviennent, consultez les journaux de déploiement dans back4app et vérifiez votre intégration github et vos paramètres de construction étape 8 – conclusion et prochaines étapes félicitations ! vous avez construit une application crud de base complète en utilisant reactjs et back4app vous avez configuré un projet nommé basic crud app reactjs , conçu des collections de base de données détaillées pour les articles et les utilisateurs, et géré vos données via la puissante admin app vous avez également intégré votre frontend reactjs avec votre backend et sécurisé vos données avec des contrôles d'accès robustes prochaines étapes améliorez votre frontend étendez votre application reactjs avec des fonctionnalités telles que des vues détaillées des articles, une fonctionnalité de recherche et des notifications en temps réel intégrez des fonctionnalités supplémentaires envisagez d'ajouter une logique backend plus avancée (par exemple, des fonctions cloud), des intégrations d'api tierces ou des contrôles d'accès basés sur les rôles explorez d'autres ressources consultez la documentation de back4app https //www back4app com/docs et des tutoriels supplémentaires pour des plongées plus profondes dans l'optimisation des performances et les intégrations personnalisées en suivant ce tutoriel, vous avez maintenant les compétences nécessaires pour créer un backend crud robuste et évolutif pour votre application reactjs en utilisant back4app bon codage !