Создание платформы для блогов SPA с использованием ReactJS и Back4App

1\ введение этот учебник проведет вас через процесс создания полноценного одностраничного приложения (spa) для платформы блогов с использованием reactjs в качестве фронтенда и back4app в качестве бэкенда мы охватим все, начиная от настройки вашей среды разработки, управления глобальным состоянием с помощью redux, реализации маршрутизации и навигации, до выполнения операций crud с back4app цель создать полностью функциональную платформу для блогов, где пользователи могут создавать, редактировать и удалять записи, а читатели могут просматривать и комментировать записи это приложение будет использовать reactjs для фронтенда и back4app для операций на бэкенде ключевые функции аутентификация пользователей создание, редактирование и удаление записей просмотр записей и комментариев управление глобальным состоянием с помощью redux маршрутизация и навигация с использованием react router предварительные требования базовые знания javascript, reactjs и redux активная учетная запись back4app node js и npm установлены в вашей локальной среде 2\ начальная настройка 2 1 настройка проекта reactjs шаг 1 создайте новый проект react с помощью create react app шаг 2 запустите сервер разработки 2 2 настройка back4app шаг 1 войдите в свою учетную запись back4app и создайте новое приложение шаг 2 в панели управления back4app перейдите в "core > browser" и создайте следующие классы пост (для хранения блогов) комментарий (для хранения комментариев к постам) шаг 3 получите свой идентификатор приложения и ключ javascript в разделе "настройки приложения > безопасность и ключи" 2 3 установка необходимых пакетов установите необходимые зависимости для интеграции react, redux и back4app npm install parse @reduxjs/toolkit react redux react router dom 2 4 настройка parse sdk шаг 1 создайте файл с именем parseconfig js в папке src и настройте parse sdk import parse from 'parse'; parse initialize("your app id", "your javascript key"); parse serverurl = 'https //parseapi back4app com/'; export default parse; 3\ разработка платформы для ведения блогов 3 1 структура проекта организуйте проект со следующей структурой 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 для управления глобальным состоянием шаг 1 настройте хранилище redux в 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, }, }); шаг 2 создайте срез для управления постами в 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; шаг 3 создайте срез для управления комментариями в 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 реализация маршрутизации с помощью react router шаг 1 настройте маршрутизацию в 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 создание компонентов шаг 1 создайте компонент 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; шаг 2 создайте компонент 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; шаг 3 создайте компонент 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\ тестирование и развертывание 4 1 тестирование приложения шаг 1 протестируйте приложение локально, чтобы убедиться, что все функции работают проверьте создание, редактирование и удаление постов убедитесь, что комментарии правильно отображаются для каждого поста проверьте навигацию между различными маршрутами 4 2 сборка приложения для продакшена шаг 1 соберите приложение для продакшена npm run build шаг 2 разверните собранное приложение на хостинговом сервисе, таком как back4app containers 4 3 настройка back4app для производства back4app уже является готовой к производству средой, но вы можете просмотреть свой код и обновить любые необходимые переменные окружения и ключи 5\ заключение резюме этот учебник провел вас через создание полноценной платформы для ведения блогов spa с использованием reactjs и back4app вы узнали, как настроить и сконфигурировать бэкенд на back4app, управлять глобальным состоянием с помощью redux, реализовать маршрутизацию с помощью react router и выполнять операции crud теперь эту платформу можно расширить дополнительными функциями, такими как аутентификация пользователей, продвинутые системы комментариев и многое другое следующие шаги изучите добавление аутентификации пользователей с помощью back4app улучшите систему комментариев с помощью обновлений в реальном времени реализуйте функции seo для улучшения видимости в поисковых системах 6\ исходный код и дополнительные ресурсы репозиторий github предоставьте ссылку на полный исходный код приложения на github дополнительные ресурсы документация reactjs https //reactjs org/docs/getting started html документация redux https //redux js org/ документация react router https //reactrouter com/ документация back4app https //www back4app com/docs 7\ часто задаваемые вопросы / устранение неполадок распространенные проблемы ошибка подключения к back4app проверьте свой идентификатор приложения и ключ javascript состояние redux не обновляется убедитесь, что ваши действия и редюсеры правильно настроены поддержка если у вас возникли проблемы, вы можете обратиться в службу поддержки back4app или задать вопросы в соответствующих сообществах разработчиков