Wie man eine CRUD-App mit ReactJS erstellt?

einführung in diesem tutorial werden sie eine umfassende crud anwendung (erstellen, lesen, aktualisieren und löschen) mit reactjs erstellen dieser leitfaden ist darauf ausgelegt, die grundlegenden operationen einer softwareanwendung durch die demonstration des aufbaus von crud apps durchzuführen, die daten effektiv verwalten und aktualisieren sie beginnen mit der erstellung und konfiguration eines back4app projekts mit dem namen basic crud app reactjs , das als robustes backend system für ihre webanwendung fungiert als nächstes entwerfen sie ein skalierbares datenbankschema, indem sie detaillierte sammlungen und felder definieren – entweder manuell oder mit hilfe des back4app ai agenten dann nutzen sie die back4app admin app – ein benutzerfreundliches verwaltungstool mit einer drag and drop oberfläche – um ihre sammlungen einfach zu verwalten diese admin oberfläche verbessert die benutzererfahrung und vereinfacht die benutzeroberfläche, sodass benutzer schnell crud operationen durchführen können schließlich werden sie ihr reactjs frontend bereitstellen und es mit back4app unter verwendung von rest/graphql (oder dem parse sdk, wo verfügbar) integrieren, während sie ihr backend mit fortschrittlichen zugriffskontrollen sichern am ende dieses leitfadens haben sie eine produktionsbereite webanwendung erstellt, die nicht nur grundlegende crud operationen unterstützt, sondern auch die benutzerauthentifizierung und robuste datenaktualisierungsfunktionen umfasst wichtige erkenntnisse erfahren sie, wie sie crud anwendungen erstellen, die daten effizient mit einem zuverlässigen datenbankverwaltungssystem verwalten gewinnen sie praktische einblicke in das design eines skalierbaren backends und dessen integration mit einem reactjs frontend, um die benutzererfahrung zu verbessern entdecken sie, wie sie ein drag and drop management tool (die back4app admin app) verwenden, um die erstellung, das lesen, das aktualisieren und das löschen von operationen zu vereinfachen verstehen sie bereitstellungstechniken, einschließlich docker containerisierung, um ihre webanwendung schnell zu starten voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie folgendes haben ein back4app konto und ein neues projekt eingerichtet wenn sie hilfe benötigen, beziehen sie sich auf erste schritte mit back4app https //www back4app com/docs/get started/new parse app eine reactjs entwicklungsumgebung verwenden sie create react app https //create react app dev/docs/getting started/ oder ein ähnliches tool stellen sie sicher, dass node js (version 14 oder höher) installiert ist grundlegendes verständnis von javascript, reactjs und rest apis überprüfen sie die reactjs dokumentation https //reactjs org/docs/getting started html falls erforderlich schritt 1 – projektsetup erstellen eines neuen back4app projekts melden sie sich bei ihrem back4app konto an klicken sie auf die schaltfläche „neue app“ in ihrem dashboard geben sie den projektnamen ein basic crud app reactjs und folgen sie den anweisungen, um ihr projekt zu erstellen neues projekt erstellen sobald ihr neues projekt erstellt ist, wird es auf ihrem back4app dashboard angezeigt und bietet eine solide grundlage für ihre backend konfiguration und projektverwaltung schritt 2 – datenbankschema design entwurf ihres datenmodells für die grundlegende crud app werden sie mehrere sammlungen erstellen im folgenden finden sie einige beispiele für die sammlungen, die sie benötigen, sowie die erforderlichen felder und datentypen, um ihnen bei der effektiven einrichtung ihres datenbankschemas zu helfen diese sammlungen sind so konzipiert, dass sie die grundlegenden crud operationen ausführen, die es benutzern ermöglichen, daten zu erstellen, zu lesen, zu aktualisieren und zu löschen 1\ artikel sammlung diese sammlung speichert informationen über jeden artikel feld datentyp beschreibung id objekt id automatisch generierter primärschlüssel titel zeichenfolge der titel des elements beschreibung zeichenfolge eine kurze beschreibung des artikels erstellt am datum zeitstempel, wann der artikel erstellt wurde aktualisiert am datum zeitstempel, wann der artikel zuletzt aktualisiert wurde 2\ benutzersammlung diese sammlung speichert benutzerinformationen und authentifizierungsdetails feld datentyp beschreibung id objekt id automatisch generierter primärschlüssel benutzername zeichenfolge einzigartiger benutzername für den benutzer e mail zeichenfolge eindeutige e mail adresse passwort hash zeichenfolge gehashtes passwort zur authentifizierung erstellt am datum zeitstempel, wann das benutzerkonto erstellt wurde aktualisiert am datum zeitstempel, wann das benutzerkonto aktualisiert wurde sie können diese sammlungen manuell im back4app dashboard einrichten, indem sie eine neue klasse für jede sammlung erstellen und spalten hinzufügen, um die felder zu definieren neue klasse erstellen sie können ganz einfach felder für ihre datenbank erstellen, indem sie einen datentyp auswählen, das feld benennen, einen standardwert festlegen und definieren, ob es erforderlich ist spalte erstellen verwendung des back4app ki agenten zur schema generierung der back4app ki agent ist ein leistungsstarkes tool, das direkt von ihrem back4app dashboard aus verfügbar ist es ermöglicht ihnen, ihr datenbankschema automatisch basierend auf einem prompt zu generieren, der ihre gewünschten sammlungen und felder beschreibt diese funktionalität spart erheblich zeit im projektmanagement und hilft sicherzustellen, dass ihr datenbankverwaltungssystem so eingerichtet ist, dass es die grundlegenden operationen ausführen kann, die von ihrer webanwendung benötigt werden so verwenden sie den ki agenten öffnen sie den ki agenten melden sie sich bei ihrem back4app dashboard an und suchen sie den ki agenten im menü oder in den projekteinstellungen beschreiben sie ihr datenmodell fügen sie in der benutzeroberfläche des ki agenten einen detaillierten prompt ein, der die sammlungen und felder beschreibt, die sie benötigen überprüfen und anwenden sobald sie es eingereicht haben, wird der ki agent die sammlungen und felddefinitionen generieren überprüfen sie diese vorschläge und wenden sie sie auf ihr projekt an beispiel 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) die verwendung des ki agenten auf diese weise spart zeit und stellt sicher, dass ihr schema konsistent und optimiert für die bedürfnisse ihrer anwendung ist schritt 3 – aktivierung der admin app & crud operationen übersicht über die admin app die back4app admin app ist eine leistungsstarke, codefreie schnittstelle, die es ihnen ermöglicht, ihre backend daten zu verwalten dieses verwaltungstool bietet eine drag and drop benutzeroberfläche, die es benutzern ermöglicht, crud operationen wie erstellen, lesen, aktualisieren und löschen von datensätzen einfach durchzuführen aktivierung der admin app navigieren sie zum menü „mehr“ in ihrem back4app dashboard klicken sie auf „admin app“ und dann auf „admin app aktivieren “ konfigurieren sie ihre admin anmeldeinformationen indem sie ihren ersten admin benutzer erstellen dieser prozess richtet auch rollen ein (z b b4aadminuser ) und systemkollektionen admin app aktivieren nach der aktivierung melden sie sich bei der admin app an, um ihre daten zu verwalten admin app dashboard verwendung der admin app für crud operationen innerhalb der admin app können sie datensätze erstellen klicken sie auf die schaltfläche „datensatz hinzufügen“ innerhalb einer sammlung (z b artikel), um neue einträge zu erstellen datensätze lesen/aktualisieren wählen sie einen beliebigen datensatz aus, um dessen details anzuzeigen oder felder zu bearbeiten, um eine reibungslose datenaktualisierung sicherzustellen datensätze löschen verwenden sie die löschoption, um datensätze zu entfernen, die nicht mehr benötigt werden dieses benutzerfreundliche verwaltungstool verbessert das gesamterlebnis der benutzer, indem es eine einfache drag and drop oberfläche für crud funktionen bietet schritt 4 – integration von reactjs mit back4app jetzt, da ihr backend eingerichtet und über die admin app verwaltet wird, ist es an der zeit, ihr reactjs frontend mit back4app zu verbinden option a verwendung des parse sdk installieren sie das parse sdk npm install parse initialisieren sie parse in ihrer react app erstellen sie eine datei (z b src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // ersetzen sie dies durch ihre tatsächlichen back4app anmeldeinformationen parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; verwenden sie parse in einer react komponente erstellen sie beispielsweise eine komponente, um elemente abzurufen und anzuzeigen // 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("fehler beim abrufen der elemente ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>elemente\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; option b verwendung von rest oder graphql wenn ihre umgebung das parse sdk nicht unterstützt, können sie crud operationen mit rest oder graphql durchführen zum beispiel, um elemente mit rest abzurufen // 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(); integrieren sie diese api aufrufe nach bedarf in ihre react komponenten schritt 5 – sicherung ihres backends zugriffskontrolllisten (acls) sichern sie ihre daten, indem sie acls auf objekte anwenden zum beispiel, um ein privates element zu erstellen 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); } } klassenebene berechtigungen (clps) konfigurieren sie im back4app dashboard clps für jede sammlung, um standardzugriffsregeln festzulegen dies stellt sicher, dass nur authentifizierte oder autorisierte benutzer auf sensible daten zugreifen können schritt 6 – benutzerauthentifizierung einrichten von benutzerkonten back4app nutzt die benutzerklasse von parse für die authentifizierung in ihrer react app behandeln sie die benutzerregistrierung und den login wie folgt // 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> ); }; ein ähnlicher ansatz kann für den login und das sitzungsmanagement verwendet werden zusätzliche funktionen wie soziale logins, e mail verifizierung und passwortzurücksetzungen können im back4app dashboard konfiguriert werden schritt 7 – bereitstellung ihres reactjs frontends mit web bereitstellung die web bereitstellungsfunktion von back4app ermöglicht es ihnen, ihr reactjs frontend nahtlos zu hosten, indem sie ihren code aus einem github repository bereitstellen in diesem abschnitt lernen sie, wie sie ihren produktionsbuild vorbereiten, ihren quellcode in github einpflegen, ihr repository mit der web bereitstellung integrieren und ihre website bereitstellen 7 1 bereiten sie ihren produktionsbuild vor öffnen sie ihren projektordner in einem terminal führen sie den build befehl aus npm run build dieser befehl erstellt einen build ordner, der alle optimierten statischen dateien enthält (einschließlich index html , javascript, css und bilder) überprüfen sie den build stellen sie sicher, dass der build ordner eine index html datei sowie die erforderlichen asset unterverzeichnisse enthält 7 2 organisieren und hochladen ihres quellcodes ihr repository sollte den vollständigen quellcode für ihr reactjs frontend enthalten eine typische dateistruktur könnte so aussehen basic crud app reactjs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md beispiel quellcodedateien 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 fügen sie ihre quelldateien hinzu git add übernehmen sie ihre änderungen git commit m "erster commit des reactjs frontend quellcodes" erstellen sie ein github repository zum beispiel, erstellen sie ein repository mit dem namen basic crud app reactjs frontend auf github übertragen sie ihren code nach github git remote add origin https //github com/your username/basic crud app reactjs frontend git git push u origin main 7 3 integrieren sie ihr github repository mit der webbereitstellung zugriff auf die webbereitstellung melden sie sich bei ihrem back4app dashboard an, navigieren sie zu ihrem projekt (basic crud app reactjs) und klicken sie auf die webbereitstellung funktion mit github verbinden wenn sie dies noch nicht getan haben, integrieren sie ihr github konto, indem sie den anweisungen auf dem bildschirm folgen diese verbindung ermöglicht es back4app, auf ihr repository zuzugreifen wählen sie ihr repository und branch aus wählen sie das repository aus, das sie erstellt haben (z b basic crud app reactjs frontend ) und wählen sie den branch (z b main ), der ihren reactjs code enthält 7 4 konfigurieren sie ihre bereitstellung geben sie zusätzliche konfigurationsdetails an build befehl wenn ihr repository keinen vorab erstellten build ordner enthält, geben sie den build befehl an (z b npm run build ) back4app wird diesen befehl während der bereitstellung ausführen ausgabeverzeichnis setzen sie das ausgabeverzeichnis auf build damit back4app weiß, welcher ordner ihre statischen site dateien enthält umgebungsvariablen wenn ihre anwendung von umgebungsvariablen (z b api schlüsseln) abhängt, fügen sie diese in den konfigurationseinstellungen hinzu 7 5 dockerisieren sie ihr reactjs anwendungsprojekt wenn sie docker für die bereitstellung bevorzugen, können sie ihre reactjs anwendung containerisieren fügen sie eine dockerfile in ihr repository mit inhalten ähnlich den folgenden ein \# 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;"] fügen sie dieses dockerfile in ihr repository ein wählen sie dann in ihrer webbereitstellungskonfiguration die docker bereitstellungsoption aus, um ihre containerisierte anwendung zu erstellen und bereitzustellen 7 6 bereitstellung ihrer anwendung klicken sie auf die schaltfläche bereitstellen nachdem sie die bereitstellungseinstellungen konfiguriert haben, klicken sie auf die bereitstellen schaltfläche überwachen sie den build prozess back4app wird ihren code von github abrufen, den build befehl ausführen (falls konfiguriert) und ihre app in einem container bereitstellen erhalten sie ihre url nachdem die bereitstellung abgeschlossen ist, stellt back4app eine url zur verfügung, unter der ihre reactjs anwendung gehostet wird 7 7 überprüfen sie ihre bereitstellung besuchen sie die bereitgestellte url öffnen sie die url in ihrem webbrowser, um ihre bereitgestellte seite anzuzeigen testen sie die anwendung überprüfen sie, ob ihre anwendung korrekt geladen wird, alle routen wie erwartet funktionieren und alle assets (css, javascript, bilder) ordnungsgemäß bereitgestellt werden fehlerbehebung bei bedarf verwenden sie die entwicklertools ihres browsers, um nach fehlern zu suchen wenn probleme auftreten, überprüfen sie die bereitstellungsprotokolle in back4app und verifizieren sie ihre github integration und die build einstellungen schritt 8 – fazit und nächste schritte herzlichen glückwunsch! sie haben eine vollständige grundlegende crud app mit reactjs und back4app erstellt sie haben ein projekt mit dem namen basic crud app reactjs , detaillierte datenbankkollektionen für artikel und benutzer entworfen und ihre daten über die leistungsstarke admin app verwaltet sie haben auch ihr reactjs frontend mit ihrem backend integriert und ihre daten mit robusten zugriffskontrollen gesichert nächste schritte verbessern sie ihr frontend erweitern sie ihre reactjs app um funktionen wie detaillierte artikelansichten, suchfunktionen und echtzeitbenachrichtigungen integrieren sie zusätzliche funktionen erwägen sie, fortgeschrittenere backend logik (z b cloud funktionen), integrationen von drittanbieter apis oder rollenbasierte zugriffskontrollen hinzuzufügen weitere ressourcen erkunden überprüfen sie die back4app dokumentation https //www back4app com/docs und zusätzliche tutorials für tiefere einblicke in die leistungsoptimierung und benutzerdefinierte integrationen indem sie dieses tutorial befolgt haben, verfügen sie nun über die fähigkeiten, um ein robustes, skalierbares crud backend für ihre reactjs anwendung mit back4app zu erstellen viel spaß beim programmieren!