Crea una piattaforma di blogging SPA con ReactJS e Back4App

1\ introduzione questo tutorial ti guiderà attraverso il processo di costruzione di un'applicazione single page application (spa) completa per una piattaforma di blogging utilizzando reactjs come frontend e back4app come backend copriremo tutto, dalla configurazione del tuo ambiente di sviluppo, alla gestione dello stato globale con redux, all'implementazione del routing e della navigazione, fino all'esecuzione delle operazioni crud con back4app obiettivo creare una piattaforma di blogging completamente funzionale in cui gli utenti possano creare, modificare ed eliminare post del blog, e i lettori possano visualizzare e commentare i post questa applicazione utilizzerà reactjs per il frontend e back4app per le operazioni di backend caratteristiche principali autenticazione utente creazione, modifica ed eliminazione dei post visualizzazione di post e commenti gestione dello stato globale con redux routing e navigazione utilizzando react router prerequisiti conoscenza di base di javascript, reactjs e redux un account back4app attivo node js e npm installati nel tuo ambiente locale 2\ configurazione iniziale 2 1 configurazione del progetto reactjs passo 1 crea un nuovo progetto react utilizzando create react app passo 2 avvia il server di sviluppo 2 2 configurazione di back4app passo 1 accedi al tuo account back4app e crea una nuova applicazione passo 2 nel dashboard di back4app, vai su "core > browser" e crea le seguenti classi post (per memorizzare i post del blog) commento (per memorizzare i commenti sui post) passo 3 ottieni il tuo id applicazione e la chiave javascript dalla sezione "impostazioni app > sicurezza e chiavi" 2 3 installazione dei pacchetti necessari installa le dipendenze necessarie per l'integrazione di react, redux e back4app npm install parse @reduxjs/toolkit react redux react router dom 2 4 configurazione del parse sdk passo 1 crea un file chiamato parseconfig js nella cartella src e configura il parse sdk import parse from 'parse'; parse initialize("your app id", "your javascript key"); parse serverurl = 'https //parseapi back4app com/'; export default parse; 3\ sviluppo della piattaforma di blogging 3 1 struttura del progetto organizza il progetto con la seguente struttura 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 implementazione di redux per la gestione dello stato globale passo 1 configura il negozio redux in 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, }, }); passo 2 crea una slice per gestire i post 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; passo 3 crea una slice per gestire i commenti 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 implementazione del routing con react router passo 1 configura il 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 creazione di componenti passo 1 crea il postlist componente per visualizzare tutti i post del 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; passo 2 crea il postdetails componente per mostrare i dettagli di un post specifico 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; passo 3 crea il postform componente per creare e modificare i post 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\ test e distribuzione 4 1 testare l'applicazione passo 1 testare l'applicazione localmente per assicurarsi che tutte le funzionalità funzionino testare la creazione, modifica e cancellazione dei post verificare che i commenti siano visualizzati correttamente per ogni post testare la navigazione tra le diverse rotte 4 2 costruire l'applicazione per la produzione passo 1 costruire l'applicazione per la produzione npm run build passo 2 distribuire l'applicazione costruita su un servizio di hosting come back4app containers 4 3 configurazione di back4app per la produzione back4app è già un ambiente pronto per la produzione, ma puoi dare un'occhiata al tuo codice e aggiornare eventuali variabili d'ambiente e chiavi necessarie 5\ conclusione riepilogo questo tutorial ti ha guidato attraverso la creazione di una piattaforma di blogging completa spa utilizzando reactjs e back4app hai imparato come impostare e configurare un backend su back4app, gestire lo stato globale con redux, implementare il routing con react router e eseguire operazioni crud questa piattaforma può ora essere ampliata con funzionalità aggiuntive come l'autenticazione degli utenti, sistemi di commento avanzati e altro prossimi passi esplora l'aggiunta dell'autenticazione degli utenti con back4app migliora il sistema di commento con aggiornamenti in tempo reale implementa funzionalità seo per migliorare la visibilità sui motori di ricerca 6\ codice sorgente e risorse aggiuntive repository github fornisci un link al codice sorgente completo per l'applicazione su github risorse aggiuntive documentazione di reactjs https //reactjs org/docs/getting started html documentazione di redux https //redux js org/ documentazione di react router https //reactrouter com/ documentazione di back4app https //www back4app com/docs 7\ faq / risoluzione dei problemi problemi comuni errore di connessione a back4app controlla di nuovo il tuo id applicazione e la chiave javascript stato di redux non aggiornato assicurati che le tue azioni e riduttori siano configurati correttamente supporto se riscontri problemi, puoi contattare il supporto di back4app o porre domande nelle comunità di sviluppatori pertinenti