React POS App – Kategorie- und Produktdaten auf der Seite „Bestellung erstellen“ laden (Teil 33)

In Teil 33 unserer React POS System-Reihe bauen wir das Kernerlebnis „Neue Bestellung hinzufügen“ auf, indem wir Produktkategorien und Produkte aus der Datenbank laden und sie auf dem POS-Bildschirm anzeigen. Zuerst erstellen wir in React eine fetchCategories()-Funktion mit Axios, um unsere gesicherte API mit einem in localStorage gespeicherten JWT-Token aufzurufen. Anschließend rendern wir Kategorien als Bootstrap-Schaltflächen, sodass Benutzer schnell zwischen Produktgruppen wechseln können. Als nächstes implementieren wir fetchProducts(categoryId = 0), um alle verfügbaren Artikel zu laden oder Artikel nach ausgewählter Kategorie zu filtern. Dadurch erhalten wir einen sauberen POS-Workflow, bei dem durch Klicken auf eine beliebige Kategorieschaltfläche die Produktliste sofort aktualisiert wird. Wir behandeln Fehlerzustände auch ordnungsgemäß, sodass die Benutzeroberfläche hilfreiche Meldungen anzeigt, wenn das Laden von Daten fehlschlägt. Im Backend (Node.js + Express) erstellen wir eine POST-API, um Produkte nach Kategorie zurückzugeben, indem wir Express Validator für eine sichere Eingabevalidierung und vorbereitete Anweisungen für sichere MySQL-Abfragen verwenden. Der Endpunkt gibt nur verfügbare Produkte zurück und unterstützt optionales Filtern mithilfe der Kategorie-ID. Am Ende dieses Tutorials verfügt Ihr POS-Bildschirm „Bestellung erstellen“ über ein dynamisches, kategoriebasiertes Produktladen, ein reaktionsfähiges Rasterlayout und eine vollständige Stapelstruktur, die für den nächsten Schritt bereit ist: das Laden von Warenkorbdaten beim Laden der Seite. 💡 Verwendete Technologie: React.js, Node.js, Express.js, MySQL, REST API, JWT Auth, Axios, Bootstrap 5 für Quellcode – https://www.webslesson.info/2026/01/react-pos-system-nodejs-mysql.html