Comment créer un frontend React et le connecter à un backend ?

dans ce tutoriel, vous allez créer une application de liste de tâches en utilisant react et la connecter à un service backend ce projet est un point de départ idéal car il implique des opérations crud fondamentales (créer, lire, mettre à jour, supprimer) et une interface utilisateur simple à la fin, vous aurez une application entièrement fonctionnelle avec un backend connecté, démontrant comment intégrer des services backend gérés dans votre flux de travail de développement construire une application full stack à partir de zéro nécessite souvent de configurer un backend, de gérer une base de données, de gérer l'authentification et de déployer l'infrastructure ces tâches peuvent être complexes et chronophages, surtout si vous vous concentrez sur le développement frontend et nous utiliserons back4app à cette fin back4app simplifie ce processus en fournissant un backend as a service (baas) évolutif solution, vous permettant de vous concentrer sur la construction de votre application pendant qu'il gère l'hébergement, les bases de données et les api back4app offre des services backend, y compris une base de données prête à l'emploi, l'authentification, le cloud code pour la logique côté serveur, et des sdk pour une intégration transparente il prend également en charge les déploiements conteneurisés, ce qui en fait un choix flexible pour l'hébergement d'applications full stack avec ces fonctionnalités, vous pouvez rapidement construire et déployer des applications sans gérer l'infrastructure serveur points clés à retenir en lisant cet article, vous apprendrez à configurer un projet react moderne en utilisant des outils standard de l'industrie intégrer sans effort un service backend pour gérer les données de l'application implémenter des opérations crud essentielles pour une expérience utilisateur dynamique déployer une application todo entièrement fonctionnelle et la voir fonctionner sur todo app prérequis pour suivre ce tutoriel efficacement, assurez vous d'avoir les outils et compétences suivants node js et npm installés sur votre machine vous utiliserez npm pour installer les dépendances et exécuter votre application react vérifiez votre installation en exécutant node v et npm v dans votre terminal connaissances de base en react , y compris les composants fonctionnels, la gestion d'état avec des hooks et la gestion des entrées utilisateur ce tutoriel ne couvrira pas les fondamentaux de react, donc une familiarité avec jsx et la structure des composants est attendue un compte back4app pour configurer et gérer vos services backend inscrivez vous sur back4app https //www back4app com/ si vous n'avez pas de compte avec cela en place, vous êtes prêt à configurer votre projet et à commencer à construire configuration du projet pour commencer, vous devez configurer votre environnement de développement local et initialiser votre projet frontend en utilisant vite cela garantit une expérience de développement rapide et efficace tout en maintenant la structure de votre projet propre tout d'abord, assurez vous d'avoir node js (version lts) installé si ce n'est pas le cas, téléchargez le depuis nodejs org https //nodejs org/ et installez le une fois installé, vérifiez le en exécutant node v npm v maintenant, initialisez votre projet react en utilisant vite , un outil de construction moderne qui offre une vitesse supérieure par rapport à create react app exécutez la commande suivante dans votre terminal, en remplaçant todo app par le nom de projet de votre choix npm create vite\@latest todo app template react naviguez dans le dossier du projet cd todo app installez les dépendances nécessaires npm install démarrez le serveur de développement pour vérifier la configuration npm run dev cela lance votre application react localement ouvrez l'url fournie dans votre navigateur pour confirmer qu'elle fonctionne avec votre frontend configuré, l'étape suivante consiste à créer un backend sur back4app pour gérer le stockage des données et les interactions avec l'api création du backend todo back4app fournit un service backend entièrement géré alimenté par parse , offrant une base de données nosql, authentification, cloud code et génération d'api prêt à l'emploi cela vous permet de gérer les données de votre application sans construire un backend à partir de zéro vous allez créer un modèle de données task pour stocker les éléments de la liste de tâches et le connecter à votre frontend react créer une application backend connectez vous à votre tableau de bord back4app https //www back4app com/ et cliquez sur "créer une nouvelle application " entrez un nom pour votre application (par exemple, todoapp ) et sélectionnez nodejs/parse comme type de backend une fois créé, allez dans "base de données" > "navigateur" , cliquez sur "créer une classe" , et choisissez "personnalisé" nommez le task et définissez les permissions de niveau de classe pour permettre la lecture et l'écriture publiques (vous pourrez affiner cela plus tard) dans la classe task , ajoutez les champs suivants titre (string) – titre de la tâche description (string) – détails de la tâche terminé (boolean) – état d'achèvement datelimite (date) – date limite de la tâche cliquez sur "enregistrer" pour créer le schéma connexion de back4app à react maintenant, intégrez back4app dans votre projet react en utilisant le parse javascript sdk pour communiquer avec le backend installez le via npm npm install parse ensuite, configurez le sdk en l'initialisant avec votre id d'application et votre clé javascript récupérez ces identifiants depuis le tableau de bord back4app sous la section paramètres de l'application > sécurité et clés page des clés back4app avec l'id de l'application et la clé js mises en évidence à l'intérieur de src/main jsx , configurez parse en important le sdk minifié et en l'initialisant avec votre id d'application et votre clé javascript import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; avec votre backend connecté, vous pouvez construire le to do list ui et intégrer des opérations crud développer le frontend maintenant que votre backend est configuré et connecté, il est temps de construire le to do list ui en react vous allez créer des composants pour ajouter, afficher, mettre à jour et supprimer des tâches tout en gérant efficacement l'état structurer les composants votre application se composera de trois composants clés taskform jsx – gère l'ajout de nouvelles tâches tasklist jsx – affiche toutes les tâches et fournit des contrôles pour marquer les tâches comme complètes ou les supprimer taskitem jsx – représente une seule tâche avec des actions comme marquer comme complète ou supprimer commencez par créer un dossier components à l'intérieur de src et ajoutez ces fichiers mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx gestion de l'état vous utiliserez le usestate et useeffect hooks pour gérer les tâches localement tout en récupérant et en mettant à jour les données de back4app tout d'abord, définissez l'état à l'intérieur de app jsx import { usestate, useeffect } from "react"; import parse from "parse/dist/parse min js"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; function app() { const \[tasks, settasks] = usestate(\[]); useeffect(() => { fetchtasks(); }, \[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map((task) => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; return ( \<div classname="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; création du formulaire de tâche à l'intérieur de taskform jsx , créez un formulaire contrôlé pour ajouter de nouvelles tâches cela stockera les valeurs d'entrée dans l'état et soumettra les données à back4app import { usestate } from "react"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title); task set("description", description); task set("completed", false); await task save(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; affichage des tâches à l'intérieur de tasklist jsx , affichez la liste des tâches et incluez des actions pour les marquer comme complètes et les supprimer import taskitem from " /taskitem"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; composant d'élément de tâche à l'intérieur de taskitem jsx , définissez des actions pour marquer une tâche comme complète ou la supprimer de back4app import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; styliser l'application créez un styles css fichier dans src et ajoutez un style de base / container to center the content and add some spacing / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } / make the heading stand out and add spacing below it / container h1 { margin bottom 20px; } / style the form so that inputs and the button are nicely spaced and aligned / form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } / make the text inputs fill a reasonable width and add padding / form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } / style the 'add task' button / form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } / basic text styles for empty task list message / container p { font size 1rem; } / task item container \ centered in both directions (flex + align items/justify content) \ a gap between elements for visual breathing room / task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; / centers text for titles/descriptions / transition background color 0 2s ease; } / completed tasks visually differ strikethrough and grey text / task item completed h3, task item completed p { text decoration line through; color #888; } / task title / task item h3 { margin 0; font size 1 1rem; } / task description / task item p { margin 0; font size 1rem; } / buttons within each task item (centered and with some spacing) / task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } / on wider screens, you can display elements in a row but keep them centered adjust justify content/align items if you want them spaced differently / @media (min width 600px) { task item { flex direction row; } } importez ce css dans main jsx import " /styles css"; l'interface utilisateur de l'application votre application de liste de tâches a maintenant un frontend fonctionnel avec une interface utilisateur react, une intégration back4app et un style de base application de liste de tâches terminée ensuite, vous déploierez ce frontend sur back4app web deployment déploiement du frontend sur back4app web deployment back4app web deployment fournit un environnement entièrement géré et conteneurisé pour déployer des applications il prend en charge des déploiements basés sur docker , vous permettant d'emballer votre frontend dans un conteneur et de l'exécuter sur l'infrastructure de back4app cela garantit évolutivité, sécurité et un pipeline ci/cd facile en s'intégrant directement avec github configurer vite pour la conteneurisation vite sert des applications en mode développement par défaut pour la production, vous devez générer une version statique et la servir en utilisant un serveur web léger comme nginx tout d'abord, mettez à jour vite config js pour spécifier un chemin de base approprié pour le déploiement import { defineconfig } from 'vite'; import react from '@vitejs/plugin react'; export default defineconfig({ plugins \[react()], base ' /', // ensures correct asset paths in a containerized environment }); maintenant, exécutez la commande de construction pour générer des fichiers prêts pour la production npm run build créer un dockerfile pour le déploiement un dockerfile définit comment votre application react est conteneurisée créez un fichier nommé dockerfile à la racine de votre projet et ajoutez la configuration suivante # use an official lightweight node js image from node 18 alpine as build \# set working directory workdir /app \# copy package json and install dependencies copy package json package lock json / run npm install \# copy project files copy \# build the project run npm run build \# use an nginx server for efficient static file serving from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html \# expose port 80 expose 80 \# start nginx cmd \["nginx", " g", "daemon off;"] ce dockerfile fait ce qui suit utilise node js pour installer les dépendances et construire l'application react copie les fichiers construits dans un nginx conteneur pour un service efficace des fichiers statiques expose le port 80 pour servir l'application construction et test du conteneur localement avant de déployer, testez le conteneur localement pour vous assurer qu'il fonctionne comme prévu exécutez la commande suivante pour construire l'image docker docker build t todo frontend ensuite, démarrez un conteneur en utilisant docker run p 8080 80 todo frontend ouvrez http //localhost 8080 dans votre navigateur pour confirmer que votre application react est servie correctement pousser sur github et se connecter à back4app pour déployer sur back4app, d'abord, poussez votre projet sur github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main maintenant, suivez ces étapes pour déployer via la plateforme de déploiement web de back4app connectez vous à back4app web deployment https //www back4app com/containers cliquez sur "créer une nouvelle application" , nommez votre projet et sélectionnez dépôt github autorisez back4app à accéder à votre github et sélectionnez le dépôt todo app choisissez déploiement dockerfile et confirmez les paramètres de construction cliquez sur "déployer" pour déclencher la première construction gestion et surveillance des déploiements une fois déployé, naviguez vers votre application dans le tableau de bord back4app ici, vous pouvez voir les logs pour déboguer les problèmes surveiller les redémarrages de conteneurs et l'utilisation des ressources redéployer sur de nouveaux commits en utilisant le "déclencher la construction" bouton configurer des domaines personnalisés si vous hébergez sur un domaine personnel tableau de déploiement web back4app application déployée vous pouvez accéder à l'application déployée utilisée dans ce tutoriel à https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ avec votre front end déployé avec succès, l'étape suivante est le test et le débogage pour s'assurer que tout fonctionne correctement test et débogage après avoir déployé votre front end et votre back end, vous devez vous assurer que l'application fonctionne correctement cela implique de tester l' interaction frontend backend , d'identifier les problèmes courants et de déboguer les erreurs efficacement test d'application intégrée pour vérifier que votre frontend react interagit correctement avec le backend back4app, suivez ces étapes tester la connectivité de l'api ouvrez la console de développement de votre navigateur ( f12 → onglet réseau ) et vérifiez les appels api lors de l'ajout ou de la récupération de tâches si les requêtes api échouent, inspectez le statut de la réponse et les messages d'erreur ajouter et récupérer des tâches manuellement utilisez l' interface utilisateur de la liste de tâches pour ajouter une tâche actualisez la page pour vous assurer que la tâche persiste ouvrez le navigateur de base de données back4app et confirmez que la tâche apparaît sous la classe tâche vérifier les opérations crud complétez et supprimez des tâches depuis l'interface utilisateur, puis vérifiez les modifications dans la base de données de back4app si les mises à jour ne se reflètent pas, vérifiez les erreurs dans la console du navigateur ou les journaux de l'api tester les cas limites essayez de soumettre des tâches vides pour vous assurer que la validation fonctionne simulez des connexions internet lentes ( chrome devtools → réseau → lent 3g ) pour tester les performances problèmes courants et dépannage erreurs cors ( access control allow origin problème) allez à back4app dashboard > paramètres de l'application > sécurité et clés sous "en têtes et domaines autorisés" , ajoutez l'url de votre frontend enregistrez et redémarrez le backend échecs d'authentification (erreurs 401 non autorisé) assurez vous que l' id d'application et la clé javascript sont correctement configurés dans votre application react si vous utilisez l'authentification utilisateur, vérifiez que le jeton de session est inclus dans les requêtes api problèmes de déploiement du backend si l'api ne répond pas, allez à back4app web deployment > journaux pour vérifier les erreurs dans votre déploiement backend redémarrez le conteneur si nécessaire avec les tests et le débogage terminés, l'étape suivante consiste à mettre en œuvre meilleures pratiques pour utiliser les services back4app pour optimiser les performances et la maintenabilité meilleures pratiques pour utiliser les services back4app voici quelques meilleures pratiques que vous pouvez suivre lors de l'utilisation de back4app optimiser l'interaction entre le frontend et le backend une communication efficace entre votre frontend et le backend de back4app garantit une expérience utilisateur fluide utilisez des requêtes groupées lors de l'exécution de plusieurs opérations pour réduire la surcharge réseau const tasks = \[task1, task2, task3]; parse object saveall(tasks); pour les opérations de lecture, activez le cache et configurez des requêtes indexées dans le tableau de bord back4app pour accélérer les demandes fréquentes demandez toujours uniquement les champs nécessaires pour minimiser la taille de la réponse query select("title", "completed"); environnement & scalabilité stockez des clés sensibles, telles que l'id de l'application et la clé javascript , dans des variables d'environnement au lieu de les coder en dur si vous utilisez vite , créez un fichier env vite parse app id=your app id vite parse js key=your js key en production, activez l'auto scaling pour le déploiement web back4app afin de gérer l'augmentation du trafic surveillez l'utilisation de la base de données et optimisez les requêtes à l'aide de l'outil surveillance des performances dans back4app sécurité et performance améliorées restreignez les permissions au niveau de la classe (clps) afin que seuls les utilisateurs authentifiés puissent modifier les données définissez les permissions de lecture/écriture dynamiquement en fonction des rôles des utilisateurs task setacl(new parse acl(parse user current())); utilisez le code cloud pour décharger la logique métier complexe du frontend, réduisant ainsi l'exposition de l'api et améliorant les performances enfin, activez la limitation de taux et la validation des requêtes pour prévenir les abus et garantir l'intégrité des données conclusion vous avez maintenant construit une application de liste de tâches full stack en configurant un frontend react, en l'intégrant avec le backend de back4app et en déployant via des workflows conteneurisés ce processus a démontré un chemin clair du développement local au déploiement dans le cloud, garantissant une interaction fluide entre le frontend et le backend en regardant vers l'avenir, envisagez des améliorations telles que la gestion avancée des utilisateurs, les mises à jour en temps réel et les intégrations tierces pour un apprentissage supplémentaire, explorez la documentation de back4app https //www back4app com/docs et les ressources de soutien communautaire