Construire une plateforme de blog SPA avec ReactJS et Back4App

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 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 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 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 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 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 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 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 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 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 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 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 https //reactjs org/docs/getting started html documentation de redux https //redux js org/ documentation de react router https //reactrouter com/ documentation de back4app https //www back4app com/docs 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