ReactJS Templates
Erstellung einer Blogging-Plattform SPA mit ReactJS und Back4App

26min
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.
MacOS
npm install parse @reduxjs/toolkit react-redux react-router-dom
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.
JS
import Parse from 'parse';

Parse.initialize("YOUR_APP_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com/';

export default Parse;

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:
Text
src/
|-- components/
|   |-- PostList.js
|   |-- PostDetails.js
|   |-- PostForm.js
|   |-- CommentList.js
|-- redux/
|   |-- store.js
|   |-- postSlice.js
|   |-- commentSlice.js
|-- ParseConfig.js
|-- App.js
|-- index.js
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.
JS
import { configureStore } from '@reduxjs/toolkit';
import postReducer from './postSlice';
import commentReducer from './commentSlice';

export const store = configureStore({
  reducer: {
    posts: postReducer,
    comments: commentReducer,
  },
});

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.
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;

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.
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;

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.
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;

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.
JS
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;
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.
JS
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;
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.
JS
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;

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.
MacOS
npm run build

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﻿
﻿Redux-Dokumentation﻿
﻿React Router-Dokumentation﻿
﻿Back4App-Dokumentation﻿
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.
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Erstellen einer sozialen Netzwerk-App mit Flutter und Back4App
ALS NÄCHSTES
Wie man Datenverarbeitung in Flutter mit List.generate und Back4app verwendet