Application React POS - Charger les données de catégorie et de produit dans la page Créer une commande (Partie 33)

Dans la partie 33 de notre série React POS System, nous construisons l'expérience de base « Ajouter une nouvelle commande » en chargeant les catégories de produits et les produits à partir de la base de données et en les affichant sur l'écran du point de vente. Tout d'abord, nous créons une fonction fetchCategories() dans React en utilisant Axios pour appeler notre API sécurisée avec un jeton JWT stocké dans localStorage. Ensuite, nous affichons les catégories sous forme de boutons Bootstrap, afin que les utilisateurs puissent basculer rapidement entre les groupes de produits. Ensuite, nous implémentons fetchProducts(categoryId = 0) pour charger tous les éléments disponibles ou filtrer les éléments par catégorie sélectionnée. Cela nous donne un flux de travail de point de vente propre dans lequel cliquer sur n'importe quel bouton de catégorie actualise instantanément la liste des produits. Nous gérons également correctement les états d'erreur, de sorte que l'interface utilisateur affiche des messages utiles lorsque les données ne se chargent pas. Sur le backend (Node.js + Express), nous construisons une API POST pour renvoyer les produits par catégorie à l'aide d'Express Validator pour une validation sécurisée des entrées et des instructions préparées pour les requêtes MySQL sécurisées. Le point de terminaison renvoie uniquement les produits disponibles et prend en charge le filtrage facultatif à l'aide decategory_id. À la fin de ce didacticiel, l'écran « Créer une commande » de votre point de vente comportera un chargement dynamique des produits basé sur les catégories, une disposition de grille réactive et une structure complète prête pour l'étape suivante : le chargement des données du panier lors du chargement de la page. 💡 Technologie utilisée : React.js, Node.js, Express.js, MySQL, REST API, JWT Auth, Axios, Bootstrap 5 pour le code source - https://www.webslesson.info/2026/01/react-pos-system-nodejs-mysql.html