React JS для пользователей WordPress: базовое введение

Уже более 15 с лишним лет WordPress является самым популярным и полным решением CMS, которое позволяет создавать что угодно - от одностраничного портфолио до полноценной платформы электронной коммерции. WordPress использует PHP для всей своей внутренней инфраструктуры, такой как обновления, API, аутентификация, уровень БД и большая часть внешнего интерфейса. Однако, как и другие популярные фреймворки, WordPress в последнее время был вынужден развиваться.

Учитывая растущий потенциал и мощность приложений JavaScript для Интернета, а также настольных и собственных мобильных приложений, WP REST API пытается преодолеть разрыв между наследием ядра PHP WordPress и развитием JavaScript. Я считаю, что это огромный шаг для WordPress по двум причинам:

1. Существующие веб-сайты WP могут использовать React / Vue или другую интерфейсную библиотеку для улучшения пользовательского интерфейса.
2. И наоборот, веб-разработчики получают стандартную автономную CMS, которую можно легко интегрировать со стеком по своему выбору.

Это беспроигрышная ситуация для всех. В этой статье мы собираемся сосредоточить наши усилия на создании интерфейса React для серверной части WordPress. Но сначала давайте взглянем на WordPress REST API.

Основы WordPress REST API

Разработка WP REST API началась несколько лет назад и изначально проектировалась как автономный функциональный плагин. WordPress v4.4 под кодовым названием Clifford представил фактическую инфраструктуру REST API в ядре WordPress. Фактические конечные точки появились в WordPress v4.7 под кодовым названием Vaughan. WP API позволяет использовать WordPress в качестве автономной CMS, простой в использовании, стабильной и дружественной к JSON.

JSON

JSON - предпочтительный формат, если вы собираетесь интегрировать WordPress со стеком JavaScript. JSON похож на XML в том, что он дает нам возможность эффективно передавать данные с использованием очень удобочитаемого синтаксиса.

JSON - это фактически строка, которая содержит текстовое представление объекта JavaScript. Он хранит данные в виде набора пар ключ-значение. Простой пример сообщения WP в формате JSON может выглядеть так:

{
id: 1,
"title": {
"rendered": "Hello World"
  },
  "content": {
"rendered": "Welcome to WordPress. This is your first
post. Edit or delete it, then start blogging!"
  }
}

Полный ответ JSON с использованием WP REST API обычно включает дополнительную информацию о публикации, например метаданные. У вас есть все необходимое для создания интерфейсной темы или плагина к вашему приложению.

Конечные точки

Конечные точки WordPress очень доступны для общественности. Если вы используете последнюю версию WordPress, вам нужно просто добавить / wp-json / wp / v2 в конец URL-адреса. Например, вы можете получить доступ к основным конечным точкам по адресу 127.0.0.1/wp-json/wp/v2, если вы настроили экземпляр WordPress на своем локальном хосте. Если вы хотите улучшить вывод, вы можете использовать расширение для просмотра JSON, благодаря которому JSON будет выглядеть красиво в вашем браузере.

Данные, которые отображаются на вашем экране, - это, по сути, контент, а также метаинформация в формате JSON. Здесь вы задали маршрут и попросили браузер получить данные за вас.

Что мы подразумеваем под маршрутом? Маршрут - это URL-адрес, сопоставленный определенному методу. Ядро WordPress читает маршрут и понимает, что каждый символ '/' представляет собой определенный путь или параметр, которому необходимо следовать.

Например, конечной точкой может быть '/ wp-json / wp / v2 / posts / 1' , где вы запрашиваете публикацию с идентификатором, эквивалентным 1. API-интерфейсы WordPress полезны, потому что они довольно обширны. Это означает возможность брать любые данные с вашего веб-сайта и превращать их в конечную точку. Поддерживаются почти все основные функции WordPress, а также будут поддерживаться все предстоящие функции. Вот список API WordPress, поддерживаемых на момент написания этого руководства:

Разработчики тем, а также разработчики плагинов могут создавать собственные конечные точки для своего приложения. Если вы хотите проверить все доступные конечные точки, вы можете загрузить такое приложение, как Postman. Это предоставит вам графический интерфейс, специально созданный для изучения API. Более того, вы можете напрямую вызывать API-интерфейсы сторонних приложений, не полагаясь на плагины.

Возьмем пример. Загрузка файлов и поддержка нескольких их версий - неотъемлемое требование любого современного веб-приложения. Это особенно верно в случае медиафайлов. В WordPress есть множество доступных плагинов, которые могут сделать это за вас; однако вам может потребоваться позвонить на сервер WordPress, чтобы использовать их.

С помощью WP API логику обработки мультимедиа можно абстрагироваться от WordPress. Вы можете выполнять все вызовы сторонних API прямо из внешнего интерфейса, что прекрасно с точки зрения разделения задач. Вы можете использовать такую ​​библиотеку, как Cloudinary, для управления изображениями и другими медиафайлами на лету, а затем загружать их в облако. После загрузки URL-адрес изображения можно сохранить в серверной части WP. Вариантов безграничны, и вы можете комбинировать части вместе, как считаете нужным.

Давайте теперь посмотрим, как связать серверную часть WordPress с React.

Начало работы с React

React - это декларативная интерфейсная библиотека для создания пользовательских интерфейсов и интерактивных приложений в Интернете. С помощью React вы можете составлять более мелкие независимые части повторно используемого кода, известные как компоненты. Давайте создадим наш первый компонент, создав проект React.

Самый популярный способ создать проект React - запустить приложение create-react-app. CRA предлагает удобную среду для изучения React и является лучшим способом начать создание нового одностраничного приложения, если вы новичок. Он настраивает вашу среду разработки так, чтобы вы могли использовать новейшие функции JavaScript, такие как ES6 и webpack. Более того, create-response-app обеспечивает удобство разработки и оптимизирует ваше приложение для производства.

На вашем компьютере должны быть Node> = 8.x и npm> = 5.2. Чтобы создать проект, выполните следующие команды:


npx create-react-app wp-react-demo


Приведенная выше команда создает шаблонный шаблон для нашего приложения для реагирования, которое мы назвали wp-react-demo .


cd wp-react-demo
npm start


Если все пойдет хорошо, оно сможет обслуживать вновь созданное приложение на сервере разработки по адресу http: // localhost: 3000 /.

Если вам интересно увидеть структуру каталогов, сгенерированную приложением create-response-app, то она выглядит так:

.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock


Публичный каталог содержит все ресурсы, необходимые для запуска приложения. Каталог src содержит все файлы JavaScript, над которыми мы будем работать, и вы будете проводить там много времени.

Когда вы посещаете localhost: 3000, загружается файл index.html. Если вы откроете файл public / index.html, там ничего особенного. Но вы найдете эту строку где-то посередине:

<div id="root"></div>

Это отправная точка, с которой React отображает дерево компонентов в корне приложения.

Что это обозначает? Перейдите в каталог src и откройте index.js .

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

React пытается найти в документе элемент с идентификатором root, а затем внедряет компонент в корень. На самом деле визуализируется компонент приложения, и именно отсюда появляется вращающийся логотип React. В этом можно убедиться, открыв файл src / App.js.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
 render() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
       </header>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

export default App;

Это в основном то, как выглядит компонент. Каждый компонент отображает часть вашего пользовательского интерфейса. Вы можете скомпоновать один компонент внутри другого, и вот как вы получите древовидную структуру компонентов, подобную этой:

Если вам интересно, почему мы можем использовать HTML внутри render (), это магия JSX. JSX - это расширение синтаксиса JavaScript, позволяющее использовать простой HTML в файле JavaScript. Подробнее об этом можно прочитать в официальных документах.

Я собираюсь удалить весь HTML-контент, а затем заменить его на

<div>
<h2> WordPress Blog </h2>
</div>

constructor (props){
   super(props);

   this.state = {
     title: {},
     date: "",
     content: {}
   };
 }

componentDidMount() {
       return fetch(`http://wordpress.com/wp-json/wp/v2/posts/`)
       .then((response) => response.json())
       .then((responseJson) => {
        // Update state here         
       })
       .catch((error) => {
         console.error(error);
       });         
 }

const { title, date, content } =  responseJson;

        this.setState({ title, date, content });

render() {
   return (
     <div>
     {this.state.title.rendered}
     </div>
   );
 }
}

<div
    className= "content"
    dangerouslySetInnerHTML={{ __html: this.state.content.rendered }}>
</div>

render() {
   return (
     <div>
       <div>
             <div className="row">
               <div className="leftcolumn">
                 <div className="card">
                   <div className= "title">
                     <h1>{this.state.title.rendered}</h1>
                     <p> {this.state.date} </p>
                   </div>
                
                   <div
                     className= "content"
                     dangerouslySetInnerHTML={{ __html: this.state.content.rendered }} />
                 </div>
               </div>
             </div>
           </div>
     </div>
   );
 }
}

import './App.css';