Использование Wordpress с React js

В этой статье мы расскажем, как использовать WordPress в качестве безголовой CMS, используя WordPress API и React js при создании проекта.

Если вы когда-нибудь задавались вопросом, можете ли вы использовать React с Wordpress, ответ — да. Если вы уже создавали сайты на WordPress, решение может быть не таким очевидным, как можно было бы ожидать.

Что такое безголовая CMS

Прежде чем мы перейдем к коду, может быть полезно объяснить, как мы будем с этим справляться. Возможно, вы слышали модное слово "headless cms", если искали простой способ управления контентом для своего проекта React js. Поскольку этот термин становится все более популярным, может оказаться полезным определить его раньше, чем позже.

Безголовая CMS – это внутренняя система управления контентом, которая не предоставляет внешнего решения.

По умолчанию Wordpress использует темы и шаблоны для обеспечения внешнего интерфейса для наших сайтов Wordpress. Создание такого сайта используется для взаимодействия с базой данных и создания структуры, которую могут просматривать наши пользователи. Использование этого метода для создания внешнего интерфейса может иметь несколько недостатков.

Во-первых, он может создавать сайты, которые не особенно эффективны. Хотя PHP является универсальным языком, существуют лучшие решения для создания пользовательского интерфейса для наших пользователей. Во-вторых, Wordpress поддерживает около трети Интернета. Из-за этого хакеры любят пытаться проникнуть на сайты Wordpress для доступа к конфиденциальным данным. Наличие отдельного внешнего интерфейса не позволяет пользователям или хакерам узнать, что это сайт Wordpress.

Итак, как мне использовать React js для этого?

Wordpress предоставляет REST API, который позволяет получить доступ к данным, созданным сайтом. Мы можем использовать эту технологию с такой библиотекой, как Axios, чтобы получать данные с нашего сайта Wordpress и вставлять их в наш проект React.js. Это означает, что мы можем получить лучшее от обоих слов: простота использования Wordpress для управления контентом и радость создания с помощью React js.

Использование Wordpress в качестве серверной части

Давайте взглянем на сайт Wordpress, чтобы вы могли точно понять, о чем я говорю. Вы можете использовать для этого любой сайт Wordpress, даже сайт, размещенный на поддомене. Для этой статьи я буду смотреть на веб-сайт TechCrunch.

Просто добавив /wp-json/wp/v2/posts в конец URL-адреса, мы увидим вывод JSON всех самых последних сообщений. Просто изменив posts на pages, мы можем увидеть данные для страниц на сайте TechCrunch.

Мы можем попробовать разные варианты, такие как posts, pages, users и другие. Идите вперед и поиграйте, чтобы увидеть, какие данные вы можете найти. Это позволит нам решить, что мы хотим использовать, а что нет.

Наше стартовое приложение React js

Я создал реакцию стартер, который вы можете скачать отсюда. Решение также есть в другой ветке. Вы можете загрузить файлы, запустить yarn или npm install (в зависимости от того, что вам больше нравится), а затем yarn start или npm run start. Вы увидите нашу простую страницу, но заметите, что на ней нет никакого контента. Давайте начнем и добавим немного контента.

Установите необходимые пакеты

Если мы откроем файл package.json, мы увидим, что я уже включил react, react-dom и bulma для создания нашего внешнего интерфейса. Прежде чем мы сможем продолжить работу с нашим приложением React js, нам нужно добавить еще несколько пакетов.

Мы можем добавить Axios, который представляет собой пакет, который позволяет нам делать http-запросы из нашего приложения без каких-либо хлопот. React-router можно использовать для создания маршрутов, что означает, что мы можем переключать страницы или компоненты без обновления браузера. Чтобы установить эти два пакета, мы можем использовать следующий код в нашем терминале:

Добавьте React Router в файл App.js

Теперь, когда у нас установлены новые пакеты, нам нужно настроить react-router в нашем файле app.js, чтобы сообщить нашему браузеру, что должно отображаться при вводе разных путей в адресную строку. Для начала нам нужно импортировать нужные нам фрагменты из react-router вверху файла. В нижней части импорта добавьте следующий код:

Теперь, когда мы импортировали react-router, мы можем использовать эти компоненты для настройки маршрутов. Наш текущий файл app.js выглядит примерно так:

Чтобы добавить маршрутизатор в наш компонент app.js, нам нужно обернуть самый внешний <div> в компонент <Router>, чтобы мы могли настроить маршруты нашего приложения. Затем мы можем заменить наш тег <h1> этими двумя маршрутами:

Давайте разберем это:

Наш первый маршрут указывает reactjs показывать компонент с именем PostList, когда пользователь посещает домашний маршрут (http://localhost:1234). Атрибут exact означает, что он должен соответствовать этому маршруту точно, а это означает, что если у нас есть что-то после этого, оно не пойдет по этому маршруту.

Второй маршрут будет отображать компонент с именем PostView, когда пользователь посещает маршрут с подстановочными знаками. :slug означает, что любая строка после косой черты будет другим маршрутом в нашем приложении. В нашем случае эта строка или slug (поскольку мы ее так назвали) будет слагом для сообщения в блоге TechCrunch. Наш файл app.js теперь должен выглядеть так:

Далее нам нужно создать компоненты PostList и PostView и импортировать их в компонент app.js.

Создание нашего компонента PostList

Прежде чем приступить к созданию нашего компонента PostList, мы должны немного подумать о том, какой компонент нам следует использовать. Мы будем делать http-запрос с помощью axios, используя метод жизненного цикла componentDidMount, а затем мы можем сохранить его в состоянии. Мы можем использовать как методы состояния, так и методы жизненного цикла в компоненте класса. Теперь, когда у нас есть представление о том, как будет построен этот компонент, мы можем приступить к работе. Сначала мы должны создать файл для компонента:

Затем мы должны импортировать материал, который нам понадобится для создания этого компонента. Добавьте эти операторы импорта в начало файла PostList.js:

После этого мы можем создать компонент класса с именем PostList и настроить конструктор и состояние для индексной страницы нашего блога. Наше состояние должно содержать список постов, которые мы будем отображать. Любые пользовательские функции, которые мы напишем в этом компоненте, будут привязаны к ключевому слову this в этом конструкторе.

Теперь, когда у нас есть место для размещения данных для наших сообщений, мы должны создать метод жизненного цикла, чтобы получать эти данные и назначать их нашему состоянию. Мы можем сделать это довольно легко, добавив следующий код после нашего конструктора:

Если вы часто разрабатываете приложения React, я бы рекомендовал установить React DevTools в выбранный вами браузер. Это делает разработку с помощью react js очень простой и позволяет отслеживать данные, передаваемые через состояние и реквизиты.

Теперь мы можем проверить наше состояние, чтобы убедиться, что оно правильно заполняется из нашего метода жизненного цикла componentDidMount. Для этого откройте инструменты разработчика в своем браузере и перейдите на вкладку реакции. Затем мы можем детализировать структуру, пока не найдем наш компонент PostList, а панель справа покажет наше состояние и свойства.

Поскольку у нас есть все сообщения в нашем состоянии, мы можем создать метод рендеринга со структурой для нашей страницы. Чтобы сделать это простым способом, мы можем использовать функцию map(), которая будет перебирать каждый элемент массива. Наш метод рендеринга может идти после нашего метода componentDidMount со следующим кодом.

Если мы запустим наш сайт с npm run start или yarn start, мы увидим, что наши сообщения в блоге отображаются правильно, но мы можем увидеть отображаемые HTML-теги. Это не круто. Чтобы отобразить это правильно, мы должны создать функцию для использования с атрибутом dangerouslySetInnerHTML.

Давайте добавим функцию для этого после нашего componentDidMount, но перед методом render. Нам также нужно привязать ключевое слово this внутри нашего конструктора. Затем мы можем использовать атрибут dangerouslySetInnerHtml для отображения выдержки из поста в файле <div>. Наш завершенный компонент PostList должен выглядеть так:

Создание компонента PostView

Если мы вернемся к нашему файлу app.js, то увидим, что сообщение в блоге будет отображаться с компонентом PostView, так что давайте продолжим и создадим его!

Приведенный выше код создаст файл для размещения нашего компонента PostView и откроет его в редакторе кода по умолчанию. Для простоты мы можем просто скопировать формулу для нашего компонента PostList. Мы можем скопировать и вставить код из нашего компонента PostList и внести несколько небольших изменений.

Во-первых, нам нужно убедиться и изменить имя компонента с PostList на PostView. Далее нам нужно немного изменить метод componentDidMount. Мы можем добавить строку кода, которая будет получать :slug из URL-адреса в адресной строке, и использовать ее для фильтрации сообщений, возвращаемых API Wordpress, до одного сообщения. Наконец, нам нужно изменить метод render, чтобы он отображал полную запись, если она существует, или не отображал ошибку, если ее нет.

Приведенный ниже код будет использоваться для нашего завершенного компонента PostView. Взгляните на него и посмотрите, сможете ли вы найти различия и понять, почему мы решили их таким образом.

Последние шаги для нашего блога ReactJS

Мы в значительной степени настроены сейчас с нашим блогом. Есть еще несколько мелких вещей, которые нам нужно сделать, чтобы наше приложение работало так, как мы хотим. Во-первых, ожидается, что логотип или название сайта будут ссылаться на главную страницу. Поскольку в нашем проекте мы используем react-router, мы можем сделать это даже без обновления страницы. Для этого мы можем открыть файл components/header.js и изменить его, чтобы он выглядел следующим образом:

Последним шагом в нашем блоге Wordpress и React js является добавление операторов импорта в файл app.js для наших двух компонентов, PostList и PostView, чтобы реакция знала, откуда их взять. После того, как вы это сделаете, вы сможете запустить приложение и увидеть самые последние сообщения в блоге от TechCrunch.

Проблемы производительности с React js

Вы можете заметить некоторые проблемы со скоростью загрузки или ощущение глюков, когда экран пуст на секунду перед отображением содержимого. Это связано с тем, что содержимое отображается после монтирования компонента, поэтому возникает небольшая задержка. Кроме того, сканерам поисковых систем трудно читать контент на таких сайтах, потому что он загружается через javascript после отображения страницы. Есть несколько популярных способов решения этих проблем:

Gatsby.js, генератор статических сайтов

Gatsby js — один из моих любимых инструментов для создания в экосистеме react js. Это позволяет нам создавать сайт или приложение, используя React, React-router и Graphql прямо из коробки! Затем, когда мы фактически создаем приложение, Gatsby js создает статические файлы, которые делают наши приложения очень быстрыми.

Поскольку файлы для нашего приложения обслуживаются статически, они могут быть очень быстрыми, поскольку весь контент создается заранее, а не во время рендеринга страницы. Это может быть немного сложно, так как нам нужно выяснить, как запускать сборку при обновлении содержимого. Netlify — мой лучший сервис для этого, так как он очень прост в использовании, и когда вы нажимаете на определенную ветку git, он перестраивает проект Gatsby js.

Next.js, рендеринг React js на стороне сервера

Другое популярное решение для решения этих проблем называется Next js, которое обеспечивает рендеринг на стороне сервера для реагирующих js-приложений. Вместо того, чтобы использовать componentDidMount для извлечения наших данных после монтирования нашего компонента, Next js предоставляет новый метод под названием getIntialProps, который позволяет нам извлекать данные до того, как компонент будет отрисован.

Тот факт, что Next js предлагает рендеринг на стороне сервера, также устраняет проблему, из-за которой поисковые роботы не могут читать контент. Кроме того, учебные пособия, доступные на их сайте, довольно крутые. Это было бы отличным решением, если вы создаете приложение используя стек MERN, потому что оно может обрабатывать часто меняющиеся данные.

Завершение нашего проекта Wordpress и React js

Как видите, действительно довольно легко использовать потрясающий пользовательский интерфейс, предоставляемый Wordpress, одновременно получая удовольствие от React js для внешнего интерфейса. Вы можете воспользоваться этими инструментами в своих личных проектах, корпоративных решениях или внештатной работе. Это один из тех редких случаев, когда вы получаете лучшее из обоих миров!

Первоначально опубликовано на www.iamtimsmith.com.