В этой статье мы будем создавать блог с помощью React.Js, Strapi и Strapi SDK.

При создании полного блога в виде одностраничного приложения на ум приходят следующие вопросы:

  • Как управлять содержимым на бэкэнде, не работая при этом разработчиком?
  • Как создать API для блога и управлять им?

Хорошая новость заключается в том, что существует автономная CMS под названием Strapi, которую мы можем использовать для управления содержимым и разработки API.

Страпи

Strapi - это самая продвинутая платформа управления контентом с открытым исходным кодом для создания мощного API без каких-либо усилий, построенных на Nodejs. Он поставляется с интерфейсом администратора, позволяющим создавать контент.

Думайте об управлении контентом в Strapi как о серверной части Wordpress с интерфейсом, в котором вы можете создавать, редактировать и удалять контент.

Reactjs

React.js - это библиотека JavaScript с открытым исходным кодом, которая используется для создания пользовательских интерфейсов специально для одностраничных приложений.

Мы будем использовать его для создания интерфейса блога.

Strapi SDK

Strapi SDK интегрирован в Strapi, чтобы заменить использование библиотеки XHR (например, Axios).

Итак, приступим!

Настройка

Настройка Strapi API

Для настройки Strapi у вас должно быть установлено следующее:

  1. Nodejs (версия 9 и выше)
  2. MongoDB, MySQL или PostgreSQL

Мы будем устанавливать Strapi с npm глобально в командной строке:

npm i strapi@alpha -g

Strapi установлен по всему миру. Теперь у нас есть доступ к команде `strapi`.

Если у вас есть ошибка прав доступа, вы можете следовать официальному руководству по npm или запустить его с правами суперпользователя, который запросит пароль суперпользователя. См. Команду ниже:

sudo npm install strapi@alpha -g

Чтобы проверить, установлен ли Strapi, скопируйте и вставьте приведенную ниже команду в командную строку:

strapi -v

Это должно вывести что-то вроде 3.0.0-alpha.x.x.x.

Если ваш вывод аналогичен приведенному выше, вы успешно установили Strapi. Поздравляю!

Создайте проект Strapi

В командной строке следуйте приведенным ниже инструкциям.

strapi new blog-api

Это создаст папку blog-api и загрузит в нее новый проект Strapi. Перейдите в каталог в созданную папку, которая называется blog-api:

cd blog-api

Затем запустите сервер:

strapi start

Приведенная выше команда запустит проект Strapi, и вы сможете увидеть его, набрав http: // localhost: 1337 в адресной строке браузера.

Если вы зайдете на http: // localhost: 1337 / admin, вы будете готовы создать первого пользователя, который будет управлять Strapi, то есть ADMIN.

Создание первого пользователя

Создайте тип контента

Чтобы создавать сообщения в блоге на бэкэнде с помощью Strapi CMS, нам нужен тип контента для создания контента для нашего блога и для генерации API.

В меню «Плагины» нажмите «Тип контента».

Создайте тип контента под названием Сообщение в блоге с тремя полями:

  1. заголовок (строка типа)
  2. контент (введите текст, отметьте «Отображать как WYSIWYG» на вкладке «Дополнительные настройки»)
  3. автор (отношение типа, много статей к одному пользователю: «Сообщение в блоге принадлежит одному пользователю и принадлежит ему»)

Затем нажмите кнопку «Сохранить».

Создание сообщения в блоге

Мы будем вставлять контент в базу данных, используя тип контента Blog Post, который мы создали выше.

  • Посетите страницу сообщения в блоге (которая находится в верхнем левом углу экрана)
  • Нажмите «Добавить новую запись в блог».
  • Введите значения в поля "Название", "Автор" и "Содержание".
  • Нажмите "Сохранить"

Создайте еще три сообщения в блоге.

Контроль доступа

По соображениям безопасности доступ к API по умолчанию ограничен. Чтобы разрешить доступ, перейдите в раздел «Роль и разрешения» в разделе «Плагины». Нажмите Общедоступно. В разделе "Общедоступные" найдите раздел "Разрешения". В разделе «Разрешение» нажмите «Приложение» и выберите найти под сообщением в блоге - и сохраните.

На этом этапе вы должны иметь возможность запросить список сообщений в блоге.

Доступ автора к API также ограничен. Разрешите анонимный доступ, выбрав действие find (в разделе «Пользователи и разрешения»), и сохраните форму.

Если вы посетите http: // localhost: 1337 / blogpost в своем браузере, вы увидите список сообщений в блоге. Итак, мы успешно создали наш API, чтобы читать его в нашем блоге.

Перейдем к фронтендной части.

Настройка React

Мы будем использовать create-react-app для начальной загрузки нашего приложения для блога React.

Установка приложения Create React

В командной строке введите следующее:

npx create-react-app

(npx поставляется с npm 5.2+ и выше)

Это загрузит настройку реакции в папку блога

Измените каталог на каталог блога

cd blog

Запустите приложение с помощью:

npm start

Это запустит приложение реакции. Если вы зайдете на http: // localhost: 3000, вы увидите, что приложение работает в вашем браузере.

Наша реакция на настройку завершена, теперь нам нужно установить strapi sdk. Для этого выполните следующую команду:

npm install strapi-sdk-javascript

После успешной установки откройте папку проекта в любом редакторе. (Я использую Atom). После загрузки проекта в IDE откройте файл App.js, удалите все содержимое. Скопируйте и вставьте следующий код в файл App.js.

import React from ‘react’;
import Strapi from ‘strapi-sdk-javascript/build/main’;
const strapi = new Strapi(‘http://localhost:1337');
class App extends React.Component {
  constructor() {
    super(props);
    state = {
     posts: []
   }
 }
async componentDidMount() {
 try {
   const posts = await strapi.getEntries(‘blogpost’)
   this.setState({ posts });
 } 
 catch(err) {
  alert(err);
 }
}
render() {
  return (
    <section>
      {this.state.posts.map(post => {
        <article>
         <div>Title: {post.title}</div>
         <div>Content: {post.content}</div></article>
      })}
    </section>
  )
 }
}
export default App;

мы импортируем Strapi из "strapi-sdk-javascript / main / build"

В строке 4 у нас есть экземпляр нашего API, и для переменной установлено значение strapi.

Вы также заметили, что в componentDidMount мы добавили async / await для получения записей блога и установки нового состояния.

Вы могли убедиться, насколько легко Strapi легко настроить и использовать с помощью Strapi SDK. Подробнее о Strapi SDK можно прочитать здесь и здесь.

Заключение

Настроить Strapi с помощью React.js намного проще, чем вы думаете. В следующей статье мы рассмотрим аутентификацию с помощью React.Js.