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

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

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

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

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

Бесплатный курс «Основы создания тем 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.

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

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

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

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

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

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

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

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

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

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

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

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

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

functions.php

style.css

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

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

Код React

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

/src/index.js

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

Мы не импортируем 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 в корне темы и добавьте в него следующее:

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

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

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

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

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

Автор: Zac Gordon

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

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

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

Основы создания тем WordPress

Научитесь создавать мультиязычные темы с нестандартной структурой страниц

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: