В этой статье я покажу вам, ребята, как создать приложение 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-файлу нашего плагина и добавим шорткод для отображения приложения.

<?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
*/
function displayReactApp() {
$current_user = (array) wp_get_current_user()->roles;
ob_start();
?>
<div id="my-react-app"></div>
<?php return ob_get_clean();
}
// register shortcode
add_shortcode('displayReactApp', 'displayReactApp');
add_action('wp_enqueue_scripts', 'enq_react');
function enq_react(){
wp_register_script('display-react',
plugin_dir_url( __FILE__ ) . '/build/index.js',
['wp-element'],
rand(), // Change this to null for production
true);
$current_user = wp_get_current_user();
$data = array(
'email' => $current_user->user_email,
);
wp_localize_script( 'display-react', 'object', $data ); //localize script to pass PHP data to JS
wp_enqueue_script( 'display-react' );
}
?>
view raw ReactWithWP.php hosted with ❤ by GitHub

Мы также используем функции wp_get_current_user() и wp_localize_sript() для получения и передачи электронной почты вошедшего в систему пользователя в наше приложение.

Теперь добавим дополнительный код для получения и сохранения информации о пользователе в нашем файле App.js.

import React, { useState} from "react";
const App = () => {
const [data, setData] = useState({
email: object.email,
})
return (
<div class="container">
<h2>Hello World From React App {data.email}</h2>
</div>
);
};
export default App;
view raw App.js hosted with ❤ by GitHub

Затем в вашем терминале запустите

npm run build

Если это сработало — тогда папка сборки должна была быть создана в каталоге вашего плагина. Это скомпилированный код, необходимый для запуска вашего приложения.

Теперь активируйте свой плагин и добавьте свой шорткод на страницу или запись и посмотрите, работает ли он!

Это сработало для меня! Вы также можете увидеть, как возвращается моя электронная почта пользователя.

Спасибо за чтение — дайте мне знать ваши мысли. Это было вдохновлено тем, что я недавно сделал большой проект, в котором использовалось приложение React в качестве плагина. Это также в основном основано на другой статье здесь: https://javascript.plainenglish.io/how-to-add-a-react-app-to-wordpress-pages-61aee723d607, которая мне очень помогла!