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

Если вы создавали WordPress сайты раньше, решение может быть не таким очевидным, как можно было бы ожидать.

Что такое безголовая CMS
Прежде чем мы перейдем к коду, может быть полезно объяснить, как мы с этим справимся.

Возможно, вы слышали модное слово «безголовый cms», если искали простой способ управления контентом для вашего проекта JAS.

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

Безголовая 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 .


API TechCrunch Posts


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

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



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

Вы увидите нашу простую страницу, но заметите, что там нет контента. Давайте начнем и добавим контент.

Установите необходимые пакеты
Если открыть package.json файл, мы можем видеть , что я уже включен react, react-dom и bulmaстроить наш передний конец.

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

Мы можем добавить Axios, который является пакетом, который позволяет нам делать http-запросы из нашего приложения без каких-либо хлопот.

React-router можно использовать для создания маршрутов, что означает, что мы можем переключать страницы или компоненты без обновления браузера.

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


Установите axios и реагируйте на роутер


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

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


Импортировать реагирующий маршрутизатор в app.js


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

Наш текущий файл app.js выглядит примерно так:


Файл App.js после добавления оператора импорта


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


Добавьте два маршрута нашего приложения


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

exact-Атрибут означает , что он должен соответствовать этому маршруту точно , что означает , что если у нас есть что - нибудь после того, что он не пойдет на этот маршрут.

Второй маршрут покажет компонент, вызываемый, PostView когда пользователь посещает маршрутный символ. :slug

Означает , что любая строка после косой черты будет другой маршрут в нашем приложении.

В нашем случае эта строка или slug(поскольку именно так мы ее назвали) будет фрагментом для сообщения в блоге TechCrunch.

Наш app.js файл должен теперь выглядеть так:


Модифицированный файл app.js


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

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

Прежде чем приступить к созданию нашего PostListкомпонента, мы должны немного подумать о том, какой компонент нам следует использовать.

Мы будем делать http-запрос с помощью axios, используя componentDidMount метод жизненного цикла, а затем сможем сохранить его в состоянии .

Мы можем использовать как состояние, так и методы жизненного цикла в компоненте класса.

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


Создайте файл для нашего компонента PostList


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

Добавьте эти операторы импорта в начало PostList.js файла:


Добавить импорт в наш файл PostList.js


После этого мы можем создать компонент класса с именем PostList и настроить конструктор и состояние для индексной страницы нашего блога.

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

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


Установить конструктор и состояние для PostList


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

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


Добавьте метод жизненного цикла componentDidMount для реагирования на js-компонент


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

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

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

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


Проверьте реакцию JS Devtools, чтобы убедиться, что состояние назначается


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

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

Наш метод рендеринга может идти после нашего componentDidMountметода со следующим кодом.


Добавить метод рендеринга в PostList.js


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

Чтобы сделать это правильно, мы должны создать функцию для использования с dangerouslySetInnerHTML атрибутом.

Давайте добавим функцию, чтобы сделать это после нашего, componentDidMountно до renderметода.

Нам также нужно связать thisключевое слово внутри нашего конструктора.

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


Завершенный компонент PostList


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


Создайте файл для нашего компонента PostView


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

Чтобы упростить задачу, мы можем просто скопировать формулу для нашего PostListкомпонента.

Мы можем скопировать и вставить код из нашего PostListкомпонента и сделать несколько небольших изменений.

Во-первых, нам нужно убедиться и изменить имя компонента с PostListна PostView.

Далее нам нужно componentDidMountнемного изменить метод. Мы можем добавить строку кода, которая будет получать :slugURL-адрес в адресной строке, и использовать его для фильтрации сообщений, возвращаемых Wordpress API, до одного сообщения.

Наконец, нам нужно изменить renderметод для отображения полного сообщения, если оно существует, или не отображать ошибку, если оно не существует.

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


Код для нашего законченного компонента PostView


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

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


Наш модифицированный код для компонента Header


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

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

Это связано с тем, что содержимое отображается после монтирования компонента, поэтому существует небольшая задержка.

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

Gatsby.js, генератор статических сайтов
Gatsby 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 для фронтэнда.

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