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

26min
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.
MacOS
npm install parse @reduxjs/toolkit react-redux react-router-dom
npm install parse @reduxjs/toolkit react-redux react-router-dom
﻿
2.4. Настройка Parse SDK
Шаг 1: Создайте файл с именем ParseConfig.js в папке src и настройте 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. Разработка платформы для ведения блогов
3.1. Структура проекта
Организуйте проект со следующей структурой:
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 для управления глобальным состоянием
Шаг 1: Настройте хранилище Redux в 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,
  },
});
﻿
Шаг 2: Создайте срез для управления постами в 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;
﻿
Шаг 3: Создайте срез для управления комментариями в 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. Реализация маршрутизации с помощью React Router
Шаг 1: Настройте маршрутизацию в 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. Создание компонентов
Шаг 1: Создайте компонент PostList для отображения всех блогов.
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;
﻿
Шаг 2: Создайте компонент PostDetails для отображения деталей конкретного поста.
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;
﻿
Шаг 3: Создайте компонент PostForm для создания и редактирования постов.
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. Тестирование и развертывание
4.1. Тестирование приложения
Шаг 1: Протестируйте приложение локально, чтобы убедиться, что все функции работают:
Проверьте создание, редактирование и удаление постов.
Убедитесь, что комментарии правильно отображаются для каждого поста.
Проверьте навигацию между различными маршрутами.
4.2. Сборка приложения для продакшена
Шаг 1: Соберите приложение для продакшена.
MacOS
npm run build

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﻿
﻿Документация Redux﻿
﻿Документация React Router﻿
﻿Документация Back4App﻿
7. Часто задаваемые вопросы / Устранение неполадок
Распространенные проблемы:
Ошибка подключения к Back4App: Проверьте свой идентификатор приложения и ключ JavaScript.
Состояние Redux не обновляется: Убедитесь, что ваши действия и редюсеры правильно настроены.
Поддержка: Если у вас возникли проблемы, вы можете обратиться в службу поддержки Back4App или задать вопросы в соответствующих сообществах разработчиков.
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Создание приложения социальной сети с использованием Flutter и Back4App
Как использовать обработку данных в Flutter с использованием List.generate и Back4app