Как использовать React.js в WordPress: полное руководство

node -v
npm -v
# или если используете yarn
# yarn -v

npx create-react-app my-wp-react-app
cd my-wp-react-app
npm start # или yarn start

my-wp-react-app/
├── node_modules/
├── public/       # Публичные статические файлы (index.html)
├── src/          # Исходный код приложения
│   ├── App.css
│   ├── App.js    # Основной компонент приложения
│   ├── App.test.js
│   ├── index.css
│   ├── index.js  # Точка входа приложения
│   ├── logo.svg
│   └── reportWebVitals.js
├── .gitignore
├── package.json
└── README.md

// src/components/Greeting.tsx

import React from 'react';

// Определение типов для пропсов
interface GreetingProps {
  name: string; // Имя человека для приветствия
}

/**
 * Простой функциональный компонент, отображающий приветствие.
 *
 * @param {GreetingProps} props - Пропсы компонента.
 * @returns {JSX.Element} Элемент React.
 */
const Greeting: React.FC = ({ name }) => {
  // Возвращаем JSX, который будет отрендерен
  return (
    

      Привет, **{name}**!
    
  );
};

export default Greeting;

// src/App.js

import React from 'react';
import Greeting from './components/Greeting';
import './App.css';

function App() {
  return (
    

      

        {/* Использование компонента Greeting */}
        
        

          Это React-приложение, интегрированное в WordPress.
        
      
    
  );
}

export default App;

npm run build # или yarn build

<?php
/*
Plugin Name: My React Component Plugin
Description: Embeds a React component into a WordPress post/page.
Version: 1.0
Author: Your Name
*/

defined( 'ABSPATH' ) || exit;

// Функция для постановки в очередь скриптов и стилей React-приложения
function my_react_plugin_enqueue_scripts() {
    // Получаем URL директории плагина
    $plugin_url = plugin_dir_url( __FILE__ );

    // Регистрируем главный JS-бандл
    // pathinfo($plugin_url . 'build/static/js/', PATHINFO_BASENAME) - Получаем только имя файла, если оно известно и постоянно
    // В реальных проектах имена файлов могут содержать хэши (e.g., main.12345.js).
    // Необходимо динамически находить актуальные имена файлов после сборки.
    // Простой пример для демонстрации (предполагая статичное имя файла):
    // Поиск файлов в директории 'build/static/js/'
    $js_files = glob( plugin_dir_path( __FILE__ ) . 'build/static/js/*.js' );
    $main_js = '';
    foreach ($js_files as $file) {
        if (strpos(basename($file), 'main') === 0 && strpos(basename($file), '.chunk') === false) {
             $main_js = $plugin_url . 'build/static/js/' . basename($file);
             break;
        }
    }

    // Поиск файлов в директории 'build/static/css/'
     $css_files = glob( plugin_dir_path( __FILE__ ) . 'build/static/css/*.css' );
     $main_css = '';
     if (!empty($css_files)) {
          $main_css = $plugin_url . 'build/static/css/' . basename($css_files[0]);
     }

    if ($main_js) {
         wp_enqueue_script(
             'my-react-app-main',
             $main_js, // URL главного JS файла
             array(), // Зависимости (например, React и ReactDOM, если не встроены в бандл)
             null, // Версия (можно использовать filemtime() для кэширования)
             true // Загружать в футере
         );
    }

     if ($main_css) {
         wp_enqueue_style(
             'my-react-app-style',
             $main_css,
             array(),
             null
         );
     }

     // Также нужно найти и зарегистрировать chunk-файлы, если они есть.
     // Это требует более сложной логики парсинга manifest.json или asset-manifest.json,
     // генерируемых CRA/Webpack.

}

// Функция для создания шорткода, который будет рендерить React-компонент
function my_react_plugin_shortcode() {
    // ID контейнера, куда React будет монтировать компонент
    $container_id = 'react-app-container';

    // HTML-элемент, который будет служить точкой монтирования для React
    $output = '
';

    // Передача данных в React (опционально) через глобальную JS-переменную
    // wp_localize_script(
    //     'my-react-app-main', // handle скрипта, к которому привязываем данные
    //     'myReactAppData', // имя JS-объекта в window
    //     array(
    //         'apiUrl' => esc_url_raw( rest_url( 'my-namespace/v1/my-data' ) ),
    //         'nonce' => wp_create_nonce( 'wp_rest' ),
    //         // Добавьте другие данные, необходимые вашему React-приложению
    //     )
    // );

    // Постановка в очередь скриптов только при наличии шорткода на странице
    my_react_plugin_enqueue_scripts();

    return $output;
}

// Регистрируем шорткод [my_react_component]
add_shortcode( 'my_react_component', 'my_react_plugin_shortcode' );

// Альтернативно, если нужно вставить компонент в specific action hook
// add_action('wp_footer', 'my_react_plugin_render_component');
// function my_react_plugin_render_component() {
//    if ( is_page('страница-с-компонентом') ) {
//        echo my_react_plugin_shortcode(); // Рендерим контейнер
//        my_react_plugin_enqueue_scripts(); // Загружаем скрипты
//    }
// }

// src/index.js - modified for embedding

import React from 'react';
import ReactDOM from 'react-dom/client'; // Используйте createRoot для React 18+
import App from './App';
import './index.css';

// Найдите элемент контейнера по ID
const container = document.getElementById('react-app-container');

// Если контейнер найден, монтируем туда React-приложение
if (container) {
  const root = ReactDOM.createRoot(container);
  root.render(
    
      
    
  );
}

// Обычный рендеринг для разработки (если нужен)
// else {
//   const root = ReactDOM.createRoot(document.getElementById('root'));
//   root.render(
//     
//       
//     
//   );
// }

 esc_url_raw( rest_url() ),
                 // Добавьте другие общие данные, например nonce для авторизованных запросов
                 'nonce' => wp_create_nonce( 'wp_rest' ),
             )
         );


    } else {
        // В режиме разработки CRA работает на своем порту (e.g., 3000).
        // Для удобства разработки можно настроить проксирование или загружать скрипты
        // напрямую с dev-сервера (не рекомендуется для продакшена).
        // Более продвинутый подход: использовать Webpack Dev Server с проксированием
        // в setupProxy.js в CRA или настроить локальный сервер/Docker.

         // --- Пример для **разработки** с CRA dev server (требует запущенного dev сервера) ---
         // const dev_server_url = 'http://localhost:3000'; // Укажите порт вашего CRA dev сервера
         // wp_enqueue_script('react-refresh', dev_server_url . '/static/js/bundle.js', array(), null, true);
         // wp_enqueue_script('react-main', dev_server_url . '/static/js/main.chunk.js', array('react-refresh'), null, true);
         // wp_enqueue_script('react-vendor', dev_server_url . '/static/js/vendors~main.chunk.js', array(), null, true);
         // wp_enqueue_style('react-style', dev_server_url . '/static/css/main.chunk.css', array(), null);
         // echo 'var wpData = { apiUrl: "' . esc_url_raw( rest_url() ) . '" };'; // Передача данных
         // --- Конец примера для разработки ---

         // В простейшем случае для разработки можно просто убедиться,
         // что CRA запущен, а в index.php есть div#root.
         // Фронтенд будет работать напрямую с CRA dev server.
         // Сборка (`npm run build`) потребуется только для деплоя.
    }

}

// Подключаем функцию загрузки скриптов и стилей
add_action( 'wp_enqueue_scripts', 'my_react_theme_scripts' );

// Отключаем загрузку стандартных скриптов и стилей WordPress (если не нужны)
// remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
// remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
// и т.д. в зависимости от потребностей

// src/api/wpApi.ts

import axios from 'axios';

// Определение интерфейсов для типизации данных записей из API
interface WpPost {
  id: number;
  date: string;
  date_gmt: string;
  guid: { rendered: string };
  modified: string;
  modified_gmt: string;
  slug: string;
  status: string;
  type: string;
  link: string;
  title: { rendered: string };
  content: { rendered: string, protected: boolean };
  excerpt: { rendered: string, protected: boolean };
  author: number;
  featured_media: number;
  comment_status: string;
  ping_status: string;
  sticky: boolean;
  template: string;
  format: string;
  meta: any[]; // Уточните тип при необходимости
  categories: number[];
  tags: number[];
  // Другие поля могут присутствовать в зависимости от конфигурации WP API
}

interface GetPostsParams {
  _embed?: boolean; // Включает встраивание связанных ресурсов (автор, медиа)
  categories?: number[]; // Фильтрация по категориям
  tags?: number[]; // Фильтрация по тегам
  search?: string; // Поиск по тексту
  per_page?: number; // Количество записей на страницу
  page?: number; // Номер страницы
  // Добавьте другие параметры, поддерживаемые API
}

// Получаем базовый URL API из глобальной переменной, установленной WordPress
// Предполагается, что wpData.apiUrl доступна в глобальной области видимости
const apiBaseUrl = (window as any).wpData?.apiUrl + 'wp/v2';

/**
 * Асинхронная функция для получения записей из WordPress REST API.
 *
 * @param {GetPostsParams} [params={}] - Параметры запроса.
 * @returns {Promise} Промис, который разрешается массивом записей.
 */
export const getPosts = async (params: GetPostsParams = {}): Promise => {
  try {
    // Выполняем GET-запрос к конечной точке /posts
    const response = await axios.get(`${apiBaseUrl}/posts`, {
      params: params,
    });
    // Возвращаем данные из ответа
    return response.data;
  } catch (error) {
    // Логируем ошибку и выбрасываем ее для обработки на уровне компонента
    console.error('Error fetching posts:', error);
    throw error; // Перебрасываем ошибку для дальнейшей обработки
  }
};

// Пример функции для получения одной записи по slug
/**
 * Асинхронная функция для получения одной записи по slug.
 *
 * @param {string} slug - Слаг записи.
 * @returns {Promise} Промис, который разрешается записью или null.
 */
export const getPostBySlug = async (slug: string): Promise => {
  try {
    // Выполняем GET-запрос к конечной точке /posts с фильтром по slug
    const response = await axios.get(`${apiBaseUrl}/posts`, {
      params: { slug: slug },
    });
    // API возвращает массив, даже если найден один элемент по slug
    return response.data.length > 0 ? response.data[0] : null;
  } catch (error) {
    console.error(`Error fetching post with slug ${slug}:`, error);
    throw error;
  }
};

// Пример запроса с использованием nonce (для залогиненного пользователя)
import axios from 'axios';

const apiBaseUrl = (window as any).wpData?.apiUrl + 'wp/v2';
const nonce = (window as any).wpData?.nonce; // Получаем nonce из глобальной переменной

interface NewPostData {
  title: string;
  content: string;
  status: 'publish' | 'draft';
  // Добавьте другие поля
}

/**
 * Асинхронная функция для создания новой записи.
 *
 * @param {NewPostData} postData - Данные для создания записи.
 * @returns {Promise} Промис, который разрешается созданной записью.
 */
export const createPost = async (postData: NewPostData): Promise => {
  if (!nonce) {
    throw new Error('WordPress nonce not available.');
  }

  try {
    const response = await axios.post(
      `${apiBaseUrl}/posts`,
      postData,
      { // Конфигурация запроса
        headers: {
          'X-WP-Nonce': nonce, // Передаем nonce в заголовке
          'Content-Type': 'application/json',
        },
         // Разрешаем передачу кукисов (важно для аутентификации по кукам)
        withCredentials: true,
      }
    );
    return response.data;
  } catch (error) {
    console.error('Error creating post:', error);
    throw error;
  }
};

// Пример получения категорий
import axios from 'axios';

interface WpCategory {
  id: number;
  count: number;
  description: string;
  link: string;
  name: string;
  slug: string;
  taxonomy: 'category';
  parent: number;
  meta: any[];
}

const apiBaseUrl = (window as any).wpData?.apiUrl + 'wp/v2';

/**
 * Асинхронная функция для получения категорий из WordPress REST API.
 *
 * @returns {Promise} Промис, который разрешается массивом категорий.
 */
export const getCategories = async (): Promise => {
  try {
    const response = await axios.get(`${apiBaseUrl}/categories`);
    return response.data;
  } catch (error) {
    console.error('Error fetching categories:', error);
    throw error;
  }
};

// src/components/PostList.tsx

import React, { useEffect, useState } from 'react';
import { getPosts } from '../api/wpApi';

// Определение интерфейса для поста (упрощенный)
interface PostItem {
  id: number;
  title: { rendered: string };
  excerpt: { rendered: string };
  link: string;
}

/**
 * Компонент для отображения списка записей WordPress.
 *
 * @returns {JSX.Element} Элемент React.
 */
const PostList: React.FC = () => {
  const [posts, setPosts] = useState([]); // Состояние для хранения записей
  const [loading, setLoading] = useState(true); // Состояние загрузки
  const [error, setError] = useState(null); // Состояние ошибки

  // useEffect выполняется после рендеринга и при изменении зависимостей
  useEffect(() => {
    /**
     * Асинхронная функция для загрузки записей и обновления состояния.
     */
    const loadPosts = async () => {
      try {
        setLoading(true); // Устанавливаем состояние загрузки
        // Загружаем записи, например, 10 последних
        const fetchedPosts = await getPosts({ per_page: 10 });
        setPosts(fetchedPosts); // Обновляем состояние записей
      } catch (err) {
        // Обрабатываем ошибку
        console.error("Failed to load posts:", err);
        setError('Не удалось загрузить записи.');
      } finally {
        setLoading(false); // Завершаем состояние загрузки
      }
    };

    loadPosts(); // Вызываем функцию загрузки при монтировании компонента

    // Возвращаем функцию очистки (не нужна в данном случае)
    // return () => { /* cleanup */ };
  }, []); // Пустой массив зависимостей означает, что эффект выполняется один раз после монтирования

  if (loading) {
    return 
Загрузка записей...
;
  }

  if (error) {
    return 
Ошибка: {error}
;
  }

  if (posts.length === 0) {
    return 
Нет доступных записей.
;
  }

  return (
    

      
Последние записи
      

        {/* Отображаем каждую запись */}
        {posts.map((post) => (
          

            

              {/* Осторожно с рендерингом raw HTML заголовков */}
              {/* Лучше использовать dangerouslySetInnerHTML только при необходимости и с очисткой */}
              {post.title.rendered}
            
            {/* Отображение отрывка, может содержать HTML */}
            

          
        ))}
      
    
  );
};

export default PostList;

// src/App.js - Example usage

import React from 'react';
import Greeting from './components/Greeting';
import PostList from './components/PostList'; // Импортируем новый компонент
import './App.css';

function App() {
  return (
    

      

        
        

          Это React-приложение, интегрированное в WordPress.
        
      

      {/* Добавляем список записей */}
      

        
      

    
  );
}

export default App;