От автора: начиная с WordPress 5.0, React (или его абстракция) теперь поставляется с WordPress. WordPress берет все библиотеки React и ReactDOM и экспортирует их в объект глобального окна с именем wp.element.
Это немного отличается от того, как работает большинство приложений React. В обычном приложении React мы импортируем React, в WordPress — нет. Обычно с приложением или проектом React вы импортируете React вверху каждого файла, который использует React. На главной индексной странице вы, вероятно, также импортировали бы ReactDOM.
JavaScript // A Normal React App import React from «react»; import ReactDOM from «react-dom»;
import MyComponent from «./components/MyComponent»;
ReactDOM.render(, document.getElementById(«root»));
| 123456 | // A Normal React Appimport React from «react»;import ReactDOM from «react-dom»;import MyComponent from «./components/MyComponent»; ReactDOM.render(, 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.
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 );
}
Продвинутая фильтрация в фреймворке Laravel
| 1234567891011 | // Enqueue Theme JS w React Dependencyadd_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:
JavaScript npm init
Вы можете нажать return для каждого из предложений или добавить свою собственную информацию. Когда ваш файл package.json создан, выполните следующую команду:
JavaScript npm install @wordpress/scripts —save-dev
| 1 | npm install @wordpress/scripts —save-dev |
Это загрузит WP Scripts в node_modules и сделает его доступным для использования в командной строке. Теперь мы можем сделать что-то вроде этого:
JavaScript wp-scripts start
Однако, чтобы сделать это более универсальным и простым в использовании, мы сопоставим скрипты WordPress со скриптами NPM. Откройте файл package.json и замените текущие настройки «scripts» следующими:
JavaScript { «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»
}
| 1234567891011121314151617181920212223 | { «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. Тем не менее, другие директивы также могут быть полезны. Теперь мы можем запустить следующее:
JavaScript npm start
И это вызовет команду WP Scripts start. Она будет искать любой файл, импортированный из src/index.js, и создаст его в build/index.js в любое время, когда файл будет изменен. Команда build делает то же самое, но только один раз и не отслеживает изменения.
Добавление React к пользовательскому шаблону страницы
Все чаще и чаще отображения контента контролируется в WordPress через блоки. Блоки в WordPress также основаны на React, но они представляют собой сами по себе небольшую экосистему, которая выходят за рамки данной статьи.
Поиск первопричины ошибки в CSS
Здесь мы собираемся сосредоточиться на добавлении React в пользовательский шаблон страницы. Хотя все, что мы делаем, может быть встроено в блок. Для этой цели я собираюсь создать дочернюю тему WordPress Theme 2020. Моя основная структура темы выглядит так:
JavaScript /build /src — index.js functions.php package.json page-react.php
style.css
| 1234567 | /build/src— index.jsfunctions.phppackage.jsonpage-react.phpstyle.css |
Кое-что о минимальных требованиях, которые нам понадобятся. Без лишних пояснений, вот код для файла functions.php и файла style.css.
functions.php
PHP
| 12345678910111213141516171819202122 |
По сути, это упрощенный шаблон page.php из родительской темы с , добавленным для загрузки кода React. Можно создать с помощью React более крупные разделы темы, но мы просто сосредоточимся на том, чтобы загрузить ее в один шаблон. Чтобы завершить этот процесс настройки, создайте новую страницу и выберите «Шаблон React» в качестве шаблона страницы.
Код React
В файле src/index.js мы можем начать писать код React и добавить его на страницу. Мы будем использовать его в ходе этой серии статей, но сейчас мы добавим простой компонент, который позволяет нажимать кнопку, чтобы увеличить число голосов за что-то.
/src/index.js
JavaScript const { render, useState } = wp.element;
const Votes = () => { const [votes, setVotes] = useState(0); const addVote = () => { setVotes(votes + 1); }; return (
{votes} Votes
Vote!
); };
render(, document.getElementById(`react-app`));
| 1234567891011121314151617 | const { render, useState } = wp.element; const Votes = () => { const [votes, setVotes] = useState(0); const addVote = () => { setVotes(votes + 1); }; return (
{votes} Votes
Vote! );};render(, 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 в корне темы и добавьте в него следующее:
JavaScript const defaults = require(«@wordpress/scripts/config/webpack.config»);
module.exports = { …defaults, externals: { «react»: «React», «react-dom»: «ReactDOM» }
};
| 123456789 | 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
Редакция: Команда webformyself.
Источник
Вам также может понравиться