ReactJS в WordPress. Вариант применения WP REST API

Ранее в статья(здесь и здесь) я говорил о дефолтном WP REST API и о методах его кастомизации. Пришло время поговорить об одном из способов его применения; т.е. в прошлых статьях было «о теории», в этой — «о практике»… о ReactJS в WordPress.

Содержание

ReactJS — что это?

ReactJS — JavaScript-библиотека для создания пользовательских интерфейсов — как определяет официальный сайт ReactJS.

Несмотря на всю сложность и запутанность официальной документации и объяснений «для чего он и с чем его едят» — все просто; может быть, меня обозвут нубом либо дураком, «не въехавшим в тему» — но эта библиотека нужна для одной цели: отрисовать HTML страницы. В отличии от многих js-фреймворков, здесь нету:

Системы событий (отличную от нативных DOM событий);
Работы с AJAX;
Какой либо слой данных;
Promises.

Всё, что делает React, это рисует страницу из полученными данными — по сути, то же, что PHP-файл с HTML-тегами. Возможно ты спросиш — зачем React в вордпрессе? Зачем — я не нашел, мое мнение — это способ снять часть нагрузки с сервера и перенести на комп пользователя; ведь проще отдать браузеру кучку статических файлов и JSON-строку, нежели построенный HTML. Хотя, может это(мое, ранее изложенное, предположение) полная чухня. Еще один способ применения, который я вижу, — это вставка кастомного HTML в места, в которые его нельзя вписать(сгенерированным плагином, к примеру).

ReactJS в WordPress — теория

ReactJS вмонтирован в WP лишь в версии 5 как основа для работы редактора Гутенберг, однако, мы можем его использовать. Работает это(ReactJS в WordPress) следующим образом: движок отдает JSON-строк, JS и CSS файлы, а также HTML страницу. JS скрипт формирует HTML шаблон, который будет вставлен в страницу.

Для включения ReactJS в тему необходимо к JS-файлу, в котором вы будете писать шаблоны, в качестве зависимости(при подключении его функцией wp_enqueue_script()) указать wp-element

<?php
add_action( 'wp_enqueue_scripts', 'react_script' );
function react_script(){
	wp_enqueue_script( 'react-template', get_template_directory_uri() . '/js/react-template.js', array( 'wp-element' ) );
}

При этом будут загружены все компоненты библиотеки и абстрактный слой Element. Данный слой нужен(цитирую настольную книгу вордпресс -разработчика):

Во многих приложениях, особенно в тех, которые расширяются великим множеством плагинов, как в случае с WordPress, целесообразно создавать интерфейсы для стороннего кода. Идея заключается в том, что если когда-либо возникнет необходимость изменить или даже заменить базовую реализацию, это можно сделать без катастрофических последствий для зависимого кода, если интерфейс остается неизменным.
Он предоставляет механизм для защиты исполнителей, опуская функции с неопределенным будущим ( createClass, PropTypes).
Это помогает избежать несовместимости между версиями, гарантируя, что каждый плагин работает с единой централизованной версией кода.

Element представлен в виде wp.element и имеет 2 метода: render() и createElement().

ReactJS в WordPress — практика

Поскольку, в основе ReactJS — можно писать код используя его методы, однако, если использовать wp.element, следующий код

function Title( props ) {
    return React.createElement( 'h1', null,
        props.title
    );
}

ReactDOM.render(
    React.createElement( Title, { title:'Hello World!' } ),
    document.getElementById( 'root' )
);

будет выглядеть следующим образом

function Title( props ) {
    return wp.element.createElement( 'h1', null,
        props.title
    );
}

wp.element.render(
    wp.element.createElement( Title, { title:'Hello World!' } ),
    document.getElementById( 'root' )
);

или, с использованием класса

class Title extends wp.element.Component {
    render() {
        return wp.element.createElement( 'h1', null,
            this.props.title
        );
    }
}

wp.element.render(
    wp.element.createElement( Title, { title:'Hello World!' } ),
    document.getElementById( 'root' )
);

Теперь, поговорим о получении данных, чтоб наш шаблон был многоразового использования. Нужно получить данные в JSON формате — здесь то и понадобятся нам знания с предыдущих статей о WP REST API.

Допустим, нужно вывести данные поста с идентификатором 50. В схеме(как ее найти и прочесть было здесь) находим путь к этим данным и по нему получим эти данные

<?php
$request = new WP_REST_Request('GET', '/wp/v2/posts/50');
$result = rest_do_request($request);

В общем, вот полный PHP скрипт, необходимый для получения данных о посте с идентификатором 50 в шаблон страницы

<?php
add_action('wp_enqueue_scripts', 'child_scripts');
function child_scripts()
{
    $request = new WP_REST_Request('GET', '/wp/v2/posts/50');
    $result = rest_do_request($request);
    wp_enqueue_script('my-react-template', get_stylesheet_directory_uri() . '/react.js', ['wp-element'], '', 1);// подключение файла с js шаблоном
    wp_localize_script('my-react-template', 'data', $result->get_data());// вывод данных в js обьекте data
}

а вот JS скрипт, использующий эти данные(в данном случаи — вывод заголовка поста)

class Title extends wp.element.Component {
    render() {
        return wp.element.createElement( 'h1', null,
            this.props.title
        );
    }
}

wp.element.render(
    wp.element.createElement( Title, { title: data.title.rendered} ),
    document.getElementById( 'root' )
);

Заключение

Мы с вами рассмотрели использование ReactJS в вордпресс, а также, способы получения данных. Конечно, это не все, я не рассмотрел настройку Babel для использования JSX шаблонов; не рассмотрел использование переменной $wp_query для «вытягивания» информации о текущем массиве доступных данных на странице…