Erstellung einer Blogging-Plattform SPA mit ReactJS und Back4App

1\ einführung dieses tutorial wird sie durch den prozess des aufbaus einer vollständigen single page application (spa) für eine blogging plattform führen, wobei reactjs als frontend und back4app als backend verwendet wird wir werden alles abdecken, von der einrichtung ihrer entwicklungsumgebung, der verwaltung des globalen zustands mit redux, der implementierung von routing und navigation bis hin zur durchführung von crud operationen mit back4app ziel erstellen sie eine voll funktionsfähige blogging plattform, auf der benutzer blogbeiträge erstellen, bearbeiten und löschen können, und leser beiträge ansehen und kommentieren können diese anwendung wird reactjs für das frontend und back4app für backend operationen nutzen hauptmerkmale benutzerauthentifizierung erstellung, bearbeitung und löschung von beiträgen anzeigen von beiträgen und kommentaren verwaltung des globalen zustands mit redux routing und navigation mit react router voraussetzungen grundkenntnisse in javascript, reactjs und redux ein aktives back4app konto node js und npm auf ihrer lokalen umgebung installiert 2\ erste einrichtung 2 1 einrichten des reactjs projekts schritt 1 erstellen sie ein neues react projekt mit create react app schritt 2 starten sie den entwicklungsserver 2 2 einrichten von back4app schritt 1 melden sie sich bei ihrem back4app konto an und erstellen sie eine neue anwendung schritt 2 navigieren sie im back4app dashboard zu "core > browser" und erstellen sie die folgenden klassen post (zum speichern von blogbeiträgen) kommentar (zum speichern von kommentaren zu beiträgen) schritt 3 holen sie sich ihre anwendungs id und den javascript schlüssel aus dem abschnitt "app einstellungen > sicherheit & schlüssel" 2 3 notwendige pakete installieren installieren sie die notwendigen abhängigkeiten für die integration von react, redux und back4app npm install parse @reduxjs/toolkit react redux react router dom 2 4 konfiguration des parse sdk schritt 1 erstellen sie eine datei mit dem namen parseconfig js im src ordner und konfigurieren sie das parse sdk import parse from 'parse'; parse initialize("your app id", "your javascript key"); parse serverurl = 'https //parseapi back4app com/'; export default parse; 3\ entwicklung der blogging plattform 3 1 projektstruktur organisieren sie das projekt mit der folgenden struktur src/ \| components/ \| | postlist js \| | postdetails js \| | postform js \| | commentlist js \| redux/ \| | store js \| | postslice js \| | commentslice js \| parseconfig js \| app js \| index js 3 2 redux für das globale state management implementieren schritt 1 richten sie den redux store in redux/store js ein import { configurestore } from '@reduxjs/toolkit'; import postreducer from ' /postslice'; import commentreducer from ' /commentslice'; export const store = configurestore({ reducer { posts postreducer, comments commentreducer, }, }); schritt 2 erstellen sie einen slice zur verwaltung von posts in redux/postslice js import { createslice, createasyncthunk } from '@reduxjs/toolkit'; import parse from ' /parseconfig'; export const fetchposts = createasyncthunk('posts/fetchposts', async () => { const query = new parse query('post'); const results = await query find(); return results map(post => ({ id post id, title post get('title'), content post get('content'), })); }); const postslice = createslice({ name 'posts', initialstate { list \[], status null, }, reducers {}, extrareducers { \[fetchposts fulfilled] (state, action) => { state list = action payload; state status = 'success'; }, }, }); export default postslice reducer; schritt 3 erstellen sie einen slice zur verwaltung von kommentaren in redux/commentslice js import { createslice, createasyncthunk } from '@reduxjs/toolkit'; import parse from ' /parseconfig'; export const fetchcomments = createasyncthunk('comments/fetchcomments', async (postid) => { const query = new parse query('comment'); query equalto('post', { type 'pointer', classname 'post', objectid postid }); const results = await query find(); return results map(comment => ({ id comment id, content comment get('content'), postid postid, })); }); const commentslice = createslice({ name 'comments', initialstate { list \[], status null, }, reducers {}, extrareducers { \[fetchcomments fulfilled] (state, action) => { state list = action payload; state status = 'success'; }, }, }); export default commentslice reducer; 3 3 routing mit react router implementieren schritt 1 routing in app js import { browserrouter as router, route, switch } from 'react router dom'; import postlist from ' /components/postlist'; import postdetails from ' /components/postdetails'; import postform from ' /components/postform'; function app() { return ( \<router> \<switch> \<route path="/" exact component={postlist} /> \<route path="/post/\ id" component={postdetails} /> \<route path="/new post" component={postform} /> \</switch> \</router> ); } export default app; 3 4 komponenten erstellen schritt 1 erstellen sie die postlist komponente, um alle blogbeiträge anzuzeigen import react, { useeffect } from 'react'; import { usedispatch, useselector } from 'react redux'; import { fetchposts } from ' /redux/postslice'; import { link } from 'react router dom'; const postlist = () => { const dispatch = usedispatch(); const posts = useselector(state => state posts list); useeffect(() => { dispatch(fetchposts()); }, \[dispatch]); return ( \<div> \<h1>blog posts\</h1> \<link to="/new post">create new post\</link> \<ul> {posts map(post => ( \<li key={post id}> \<link to={`/post/${post id}`}>{post title}\</link> \</li> ))} \</ul> \</div> ); }; export default postlist; schritt 2 erstellen sie die postdetails komponente, um die details eines bestimmten beitrags anzuzeigen import react, { useeffect } from 'react'; import { useparams } from 'react router dom'; import { usedispatch, useselector } from 'react redux'; import { fetchcomments } from ' /redux/commentslice'; const postdetails = () => { const { id } = useparams(); const dispatch = usedispatch(); const comments = useselector(state => state comments list); useeffect(() => { dispatch(fetchcomments(id)); }, \[dispatch, id]); return ( \<div> \<h1>post details\</h1> \<p>comments \</p> \<ul> {comments map(comment => ( \<li key={comment id}>{comment content}\</li> ))} \</ul> \</div> ); }; export default postdetails; schritt 3 erstellen sie die postform komponente zum erstellen und bearbeiten von beiträgen import react, { usestate } from 'react'; import parse from ' /parseconfig'; import { usehistory } from 'react router dom'; const postform = () => { const \[title, settitle] = usestate(''); const \[content, setcontent] = usestate(''); const history = usehistory(); const handlesubmit = async (e) => { e preventdefault(); const post = parse object extend('post'); const post = new post(); post set('title', title); post set('content', content); try { await post save(); history push('/'); } catch (error) { console error('error creating post ', error); } }; return ( \<div> \<h1>create new post\</h1> \<form onsubmit={handlesubmit}> \<div> \<label>title\</label> \<input type="text" value={title} onchange={(e) => settitle(e target value)} /> \</div> \<div> \<label>content\</label> \<textarea value={content} onchange={(e) => setcontent(e target value)} /> \</div> \<button type="submit">submit\</button> \</form> \</div> ); }; export default postform; 4\ testen und bereitstellung 4 1 testen der anwendung schritt 1 testen sie die anwendung lokal, um sicherzustellen, dass alle funktionen funktionieren testen sie das erstellen, bearbeiten und löschen von beiträgen überprüfen sie, ob kommentare für jeden beitrag korrekt angezeigt werden testen sie die navigation zwischen verschiedenen routen 4 2 erstellen der anwendung für die produktion schritt 1 erstellen sie die anwendung für die produktion npm run build schritt 2 bereitstellen der erstellten anwendung auf einem hosting dienst wie back4app containers 4 3 back4app für die produktion konfigurieren back4app ist bereits eine produktionsbereite umgebung, aber sie können ihren code überprüfen und alle notwendigen umgebungsvariablen und schlüssel aktualisieren 5\ fazit zusammenfassung dieses tutorial hat sie durch die erstellung einer vollständigen blogging plattform spa mit reactjs und back4app geführt sie haben gelernt, wie man ein backend auf back4app einrichtet und konfiguriert, den globalen zustand mit redux verwaltet, routing mit react router implementiert und crud operationen durchführt diese plattform kann nun mit zusätzlichen funktionen wie benutzerauthentifizierung, erweiterten kommentarsystemen und mehr erweitert werden nächste schritte erforschen sie die hinzufügung der benutzerauthentifizierung mit back4app verbessern sie das kommentarsystem mit echtzeit updates implementieren sie seo funktionen, um die sichtbarkeit in suchmaschinen zu verbessern 6\ quellcode und zusätzliche ressourcen github repository stellen sie einen link zum vollständigen quellcode der anwendung auf github bereit zusätzliche ressourcen reactjs dokumentation https //reactjs org/docs/getting started html redux dokumentation https //redux js org/ react router dokumentation https //reactrouter com/ back4app dokumentation https //www back4app com/docs 7\ faq / fehlersuche häufige probleme fehler beim verbinden mit back4app überprüfen sie ihre anwendungs id und ihren javascript schlüssel redux zustand wird nicht aktualisiert stellen sie sicher, dass ihre aktionen und reducer korrekt konfiguriert sind support wenn sie auf probleme stoßen, können sie den back4app support kontaktieren oder fragen in relevanten entwicklergemeinschaften stellen