Modèles ReactJS
Construire une plateforme de blog SPA avec ReactJS et Back4App

26min
1. Introduction
Ce tutoriel vous guidera à travers le processus de création d'une application web monopage (SPA) complète pour une plateforme de blogging en utilisant ReactJS comme frontend et Back4App comme backend. Nous couvrirons tout, de la configuration de votre environnement de développement, à la gestion de l'état global avec Redux, en passant par l'implémentation du routage et de la navigation, jusqu'à l'exécution des opérations CRUD avec Back4App.
Objectif :
Créer une plateforme de blogging entièrement fonctionnelle où les utilisateurs peuvent créer, modifier et supprimer des articles de blog, et où les lecteurs peuvent consulter et commenter les articles. Cette application utilisera ReactJS pour le frontend et Back4App pour les opérations backend.
Fonctionnalités clés :
Authentification des utilisateurs
Création, modification et suppression d'articles
Consultation des articles et des commentaires
Gestion de l'état global avec Redux
Routage et navigation avec React Router
Prérequis :
Connaissances de base en JavaScript, ReactJS et Redux
Un compte Back4App actif
Node.js et npm installés sur votre environnement local
2. Configuration initiale
2.1. Configuration du projet ReactJS
Étape 1 : Créez un nouveau projet React en utilisant create-react-app.
Étape 2 : Démarrez le serveur de développement.
2.2. Configuration de Back4App
Étape 1 : Connectez-vous à votre compte Back4App et créez une nouvelle application.
Étape 2 : Dans le tableau de bord Back4App, accédez à "Core > Browser" et créez les classes suivantes :
Post (pour stocker les articles de blog)
Commentaire (pour stocker les commentaires sur les articles)
Étape 3 : Obtenez votre ID d'application et votre clé JavaScript dans la section "Paramètres de l'application > Sécurité & Clés".
2.3. Installation des packages nécessaires
Installez les dépendances nécessaires pour l'intégration de React, Redux et Back4App.
MacOS
npm install parse @reduxjs/toolkit react-redux react-router-dom
npm install parse @reduxjs/toolkit react-redux react-router-dom
﻿
2.4. Configuration du SDK Parse
Étape 1: Créez un fichier nommé ParseConfig.js dans le dossier src et configurez le SDK Parse.
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. Développement de la plateforme de blogging
3.1. Structure du projet
Organisez le projet avec la structure suivante:
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. Mise en œuvre de Redux pour la gestion de l'état global
Étape 1 : Configurer le magasin Redux dans redux/store.js.
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,
  },
});
﻿
Étape 2 : Créer une tranche pour gérer les publications dans 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;
﻿
Étape 3 : Créer une tranche pour gérer les commentaires dans 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. Mise en œuvre du routage avec React Router
Étape 1: Configurer le routage dans 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. Création de Composants
Étape 1: Créer le PostList composant pour afficher tous les articles de blog.
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;
﻿
Étape 2: Créez le PostDetails composant pour afficher les détails d'un article spécifique.
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;
﻿
Étape 3: Créez le PostForm composant pour créer et éditer des articles.
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. Tests et Déploiement
4.1. Tester l'application
Étape 1 : Tester l'application localement pour s'assurer que toutes les fonctionnalités fonctionnent :
Tester la création, l'édition et la suppression de posts.
Vérifier que les commentaires sont correctement affichés pour chaque post.
Tester la navigation entre différentes routes.
4.2. Construire l'application pour la production
Étape 1 : Construire l'application pour la production.
MacOS
npm run build

npm run build
﻿
Étape 2 : Déployer l'application construite sur un service d'hébergement comme Back4app Containers
4.3. Configuration de Back4App pour la production
Back4app est déjà un environnement prêt pour la production, mais vous pouvez jeter un œil à votre code et mettre à jour les variables d'environnement et les clés nécessaires.
5. Conclusion
Résumé :Ce tutoriel vous a guidé à travers la création d'une plateforme de blogging complète SPA utilisant ReactJS et Back4App. Vous avez appris à configurer un backend sur Back4App, à gérer l'état global avec Redux, à implémenter le routage avec React Router et à effectuer des opérations CRUD. Cette plateforme peut maintenant être étendue avec des fonctionnalités supplémentaires telles que l'authentification des utilisateurs, des systèmes de commentaires avancés, et plus encore.
Prochaines étapes :
Explorez l'ajout de l'authentification des utilisateurs avec Back4App.
Améliorez le système de commentaires avec des mises à jour en temps réel.
Implémentez des fonctionnalités SEO pour améliorer la visibilité sur les moteurs de recherche.
6. Code source et ressources supplémentaires
Dépôt GitHub :Fournissez un lien vers le code source complet de l'application sur GitHub.
Ressources supplémentaires :
﻿Documentation de ReactJS﻿
﻿Documentation de Redux﻿
﻿Documentation de React Router﻿
﻿Documentation de Back4App﻿
7. FAQ / Dépannage
Problèmes courants :
Erreur de connexion à Back4App : Vérifiez votre ID d'application et votre clé JavaScript.
État de Redux non mis à jour : Assurez-vous que vos actions et réducteurs sont correctement configurés.
Support : Si vous rencontrez des problèmes, vous pouvez contacter le support de Back4App ou poser des questions dans des communautés de développeurs pertinentes.
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Créer une application de réseau social avec Flutter et Back4App
Comment utiliser la gestion des données dans Flutter en utilisant List.generate avec Back4app