Главная » Статьи » Как включить React в тему WordPress

Как включить React в тему WordPress

Как включить React в тему WordPress

От автора: начиная с WordPress 5.0, React (или его абстракция) теперь поставляется с WordPress. WordPress берет все библиотеки React и ReactDOM и экспортирует их в объект глобального окна с именем wp.element.

Это немного отличается от того, как работает большинство приложений React. В обычном приложении React мы импортируем React, в WordPress — нет. Обычно с приложением или проектом React вы импортируете React вверху каждого файла, который использует React. На главной индексной странице вы, вероятно, также импортировали бы ReactDOM.

// A Normal React App
import React from "react";
import ReactDOM from "react-dom";
import MyComponent from "./components/MyComponent"; ReactDOM.render(<MyComponent />, document.getElementById("root"));

В WordPress мы не импортируем React или React DOM, потому что они доступны в глобальном объекте wp.element. Поэтому одним важным отличием включения React в проект WordPress является то, что вы не импортируете его в свои файлы. Другое отличие между обычным использованием React и темой или плагином WordPress связано с инструментами.

Использование WP Scripts вместо приложения React

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

Этот инструмент не подходит так же хорошо для WordPress, потому что React загружается в объект глобального окна, wp.element, не в комплекте с кодом. Create React App официально не поддерживает загрузку React из внешнего источника без извлечения, так что это не лучший вариант инструмента.

К счастью, команда WordPress создала пакет wp-scripts, основанный на пакете react-scripts, используемом с Create React App. WP Scripts по умолчанию включает команды разработки, тестирования и сборки. Вы также можете расширить его с помощью собственной конфигурации webpack, если хотите сделать что-то особенное, например, скомпилировать SASS.

Ниже мы рассмотрим, как настроить WP Scripts, но сначала давайте загрузим базовую тему с React, загруженным во фронт-энд.

Добавление React вашей теме

Чтобы обеспечить загрузку React, вы просто добавляете wp-element в качестве зависимости в собственный файл JavaScript. Следующее будет размещаться в файле functions.php.

// Enqueue Theme JS w React Dependency
add_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );
function my_enqueue_theme_js() { wp_enqueue_script( 'my-theme-frontend', get_stylesheet_directory_uri() . '/build/index.js', ['wp-element'], time(), // Change this to null for production true );
}

Для этого вам понадобится файл, расположенный по адресу /build/index.js. WP Scripts создаст его для нас, когда мы запустим команду build. Теперь wp.element загрузится во фронт-энд темы.

Как настроить WP Scripts

Настройка WP Scripts включает в себя два этапа: 1) установка wp-scripts; 2) добавление скриптов в файл package.json. Если вы еще не настроили файл package.json, запустите следующую команду из корня вашей темы WordPress:

npm init

Вы можете нажать return для каждого из предложений или добавить свою собственную информацию. Когда ваш файл package.json создан, выполните следующую команду:

npm install @wordpress/scripts --save-dev

Это загрузит WP Scripts в node_modules и сделает его доступным для использования в командной строке. Теперь мы можем сделать что-то вроде этого:

wp-scripts start

Однако, чтобы сделать это более универсальным и простым в использовании, мы сопоставим скрипты WordPress со скриптами NPM. Откройте файл package.json и замените текущие настройки «scripts» следующими:

{ "name": "myreacttheme", "version": "1.0.0", "description": "My WordPress theme with React", "main": "src/index.js", "dependencies": {}, "devDependencies": { "@wordpress/scripts": "^5.1.0" }, "scripts": { "build": "wp-scripts build", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "lint:pkg-json": "wp-scripts lint-pkg-json", "start": "wp-scripts start", "test:e2e": "wp-scripts test-e2e", "test:unit": "wp-scripts test-unit-js" }, "author": "", "license": "1 GNU V2+, MIT"
}

Если вам не нужно все это, вы можете сократить код просто до команд start и build. Тем не менее, другие директивы также могут быть полезны. Теперь мы можем запустить следующее:

npm start

И это вызовет команду WP Scripts start. Она будет искать любой файл, импортированный из src/index.js, и создаст его в build/index.js в любое время, когда файл будет изменен. Команда build делает то же самое, но только один раз и не отслеживает изменения.

Добавление React к пользовательскому шаблону страницы

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

Здесь мы собираемся сосредоточиться на добавлении React в пользовательский шаблон страницы. Хотя все, что мы делаем, может быть встроено в блок. Для этой цели я собираюсь создать дочернюю тему WordPress Theme 2020. Моя основная структура темы выглядит так:

/build
/src
-- index.js
functions.php
package.json
page-react.php
style.css

Кое-что о минимальных требованиях, которые нам понадобятся. Без лишних пояснений, вот код для файла functions.php и файла style.css.

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() { $parent_style = 'twentytwenty-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', [ $parent_style ], time() //wp_get_theme()->get('Version') ); wp_enqueue_script( 'my-theme-frontend', get_stylesheet_directory_uri() . '/build/index.js', ['wp-element'], time() //For production use wp_get_theme()->get('Version') ); }

style.css

/* Theme Name: Twenty Twenty Child Description: Twenty Twenty Child Theme Author: Zac Gordon Author URI: https://javascriptforwp.com/ Template: twentytwenty Version: 0.9.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentychild
*/

У нас также есть очень простой пользовательский шаблон страницы page-react.php, который выглядит следующим образом:

<?php
/** * Template Name: React Template */
get_header();
?> <main id="site-content" role="main"> <article class="post-2 page type-page status-publish hentry"> <?php get_template_part( 'template-parts/entry-header' ); ?> <div class="post-inner thin"> <div class="entry-content"> <div id="react-app"></div><!-- #react-app --> </div><!-- .entry-content --> </div><!-- .post-inner --> </article><!-- .post -->
</main><!-- #site-content --> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
<?php get_footer(); ?>

По сути, это упрощенный шаблон page.php из родительской темы с <div id=»react-app»></div>, добавленным для загрузки кода React. Можно создать с помощью React более крупные разделы темы, но мы просто сосредоточимся на том, чтобы загрузить ее в один шаблон. Чтобы завершить этот процесс настройки, создайте новую страницу и выберите «Шаблон React» в качестве шаблона страницы.

Код React

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

/src/index.js

const { render, useState } = wp.element; const Votes = () => { const [votes, setVotes] = useState(0); const addVote = () => { setVotes(votes + 1); }; return ( <div> <h2>{votes} Votes</h2> <p> <button onClick={addVote}>Vote!</button> </p> </div> );
};
render(<Votes />, document.getElementById(`react-app`));

Здесь следует отметить несколько важных вещей:

Мы не импортируем React или ReactDOM на странице, а получаем то, что нам нужно в wp.element, который уже загружен.

ReactDOM.render() также входит в wp.element.

В настоящее время у нас в WordPress не сохраняется состояние, но мы изменим это в следующих статьях.

Теперь вы можете начать писать любой React, какой захотите, а также разбивать код на отдельные файлы и импортировать их по мере необходимости. Надеюсь, этого достаточно, чтобы вы смогли начать работу с добавлением React к темам WordPress.

Настройка внешних компонентов Webpack для использования импорта библиотек React

Большинство пакетов React будут использоваться для связывания React с окончательным кодом и будут включать import React from «react» и тому подобное.

Это не будет работать с WP Scripts по умолчанию. Чтобы заставить это работать, нам нужно расширить WP Scripts собственным файлом webpack.config.js и определить React и ReactDOM как внешние ресурсы, которые будут доступны за пределами связанного кода.

Для этого создайте новый файл webpack.config.js в корне темы и добавьте в него следующее:

const defaults = require("@wordpress/scripts/config/webpack.config"); module.exports = { ...defaults, externals: { "react": "React", "react-dom": "ReactDOM" }
};

Это позволит получить конфигурации по умолчанию из WP Scripts и добавить их в качестве резервных конфигураций для Webpack. Затем мы можем добавить в нашу настройку определения «react» и «react-dom» как доступные в качестве внешних.

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

Следующие шаги

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

В следующих статьях мы расскажем о том, что вы можете делать с помощью React в темах WordPress! Вы можете найти основной репо для этой серии статей здесь.

Автор: Zac Gordon

Источник: https://dev.to

Редакция: Команда webformyself.