В этой статье я покажу вам, ребята, как создать приложение React в качестве плагина Wordpress и, кроме того, как передать данные из PHP/Wordpress в ваше приложение React.
Вы можете просмотреть этот проект в Github здесь: https://github.com/wbaxterh/ReactWithWP
Начать довольно просто — создайте каталог /yourplugin с файлом PHP имени вашего плагина (yourplugin.php) следующим образом:
<?php /** * Plugin. * @package reactplug * @wordpress-plugin * Plugin Name: React With WP Plugin * Description: ReactJS plugin for Wordpress * Author: Wes Huber * Author URL: https://weshuber.com * Version: 1.0 */ ?>
Это основной синтаксис плагина Wordpress. Теперь давайте создадим наше приложение ReactApp внутри этого плагина. Если вы работаете локально, как я — просто откройте каталог плагина с помощью VSCode.
Откройте терминал и введите команду:
npm init
Выполните шаги в терминале, и он создаст для вас файл package.json.
Теперь установите скрипты WP из пакета wp-element от Wordpress.org
npm install @wordpress/scripts --save-dev
Затем я также добавляю скрипт сборки в файл package.json.
"scripts": {
"build": "wp-scripts build"
}
Нам также нужно создать совместимый с Wordpress файл webpack.config, например:
const defaults = require('@wordpress/scripts/config/webpack.config');
module.exports = {
...defaults,
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
};
Затем я также создаю файл style.css — вы можете пока оставить его пустым. Если вы пропустите это, обязательно удалите импорт в следующем блоке кода.
Теперь мы можем попасть в само приложение React. Создайте новую папку в каталоге вашего плагина с именем /src
В папке src создайте файл index.js следующим образом:
const { render } = wp.element;
import App from './App';
import './style.css';
if (document.getElementById('my-react-app')) {
render(<App />, document.getElementById('my-react-app'));
}
Затем создайте еще один файл с именем App.js (основной компонент вашего приложения), и для этого примера мы напечатаем простой «Hello World».
const App = () => {
return (
<div class="container">
<h2>Hello World From React App {data.email}</h2>
</div>
);
};
export default App;
Хорошо — теперь, когда наше приложение React настроено, давайте вернемся к PHP-файлу нашего плагина и добавим шорткод для отображения приложения.
Мы также используем функции wp_get_current_user() и wp_localize_sript() для получения и передачи электронной почты вошедшего в систему пользователя в наше приложение.
Теперь добавим дополнительный код для получения и сохранения информации о пользователе в нашем файле App.js.
Затем в вашем терминале запустите
npm run build
Если это сработало — тогда папка сборки должна была быть создана в каталоге вашего плагина. Это скомпилированный код, необходимый для запуска вашего приложения.
Теперь активируйте свой плагин и добавьте свой шорткод на страницу или запись и посмотрите, работает ли он!
Это сработало для меня! Вы также можете увидеть, как возвращается моя электронная почта пользователя.
Спасибо за чтение — дайте мне знать ваши мысли. Это было вдохновлено тем, что я недавно сделал большой проект, в котором использовалось приложение React в качестве плагина. Это также в основном основано на другой статье здесь: https://javascript.plainenglish.io/how-to-add-a-react-app-to-wordpress-pages-61aee723d607, которая мне очень помогла!
