WordPress 用戶的 React JS：基本介紹

超過 15 年以來，WordPress 一直是最受歡迎和最完整的 CMS 解決方案，可讓您構建從單頁投資組合到成熟電子商務平台的任何內容。 WordPress 將 PHP 用於其所有後端基礎設施，如更新、API、身份驗證、數據庫層和大部分前端。 然而，像其他流行的框架一樣，WordPress 最近也被迫發展。

鑑於用於 Web 的 JavaScript 應用程序以及桌面和本機移動應用程序的潛力和力量不斷增強，WP REST API 試圖彌合 WordPress 的 PHP 核心的遺產與 JavaScript 的興起之間的差距。 我相信這對 WordPress 來說是一個巨大的進步，原因有兩個：

1. 現有的 WP 網站可以使用 React/Vue 或其他前端庫來創建更好的 UI 體驗。
2. 相反，Web 開發人員可以獲得行業標準的無頭 CMS，可以輕鬆地與他們選擇的堆棧集成。

這對每個人來說都是雙贏的局面。 在本文中，我們將集中精力為 WordPress 後端構建 React 前端。 但首先，讓我們來看看 WordPress REST API。

WordPress REST API 基礎

WP REST API 的開發始於幾年前，最初被設計為一個獨立的功能插件。 代號為“Clifford”的 WordPress v4.4 將 REST API 的實際基礎設施引入了 WordPress 的核心。 實際端點出現在 WordPress v4.7 中，代號為“Vaughan”。 WP API 允許您將 WordPress 用作易於使用且穩定且對 JSON 友好的無頭 CMS。

JSON

如果您要將 WordPress 與 JavaScript 堆棧集成，則 JSON 是首選格式。 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!"
  }
}

使用 WP REST API 的完整 JSON 響應通常包含有關帖子的其他信息，例如元數據。 您擁有為應用程序創建前端主題或插件所需的一切。

終點

公眾可以輕鬆訪問 WordPress 端點。 如果您運行的是最新版本的 WordPress，則只需將/wp-json/wp/v2附加到 URL 的末尾。 例如，如果您在本地主機中設置了 WordPress 實例，則可以訪問127.0.0.1/wp-json/wp/v2處的基本端點。 如果您想美化輸出，您可以使用 JSON 查看器擴展，使 JSON 在您的瀏覽器上看起來很漂亮。

屏幕上顯示的數據本質上是 JSON 格式的內容和元信息。 您在這裡所做的是定義一個路由並要求您的瀏覽器為您獲取數據。

我們所說的路線是什麼意思？ 路由是映射到特定方法的 URL。 WordPress 核心讀取路由並理解每個“/”代表需要遵循的特定路徑或參數。

例如，端點可以是'/wp-json/wp/v2/posts/1' ，您在其中請求 id 等於 1 的帖子。WordPress API 很有用，因為它們非常廣泛。 這意味著能夠從您的網站獲取任何數據並將其轉換為端點。 支持 WordPress 中的幾乎所有核心​​功能，並且還將支持所有即將推出的功能。 以下是編寫本教程時支持的 WordPress API 列表：

主題開發人員以及插件開發人員可以為他們的應用程序創建自定義端點。 如果您想查看所有可用的不同端點，您可以下載類似 Postman 的應用程序。 這將為您提供一個專門用於探索 API 的 GUI。 此外，您可以直接對第三方應用程序進行 API 調用，而無需依賴插件。

讓我們舉個例子。 上傳文件並維護它的多個版本是任何現代 Web 應用程序不可或缺的要求。 在媒體文件的情況下尤其如此。 在 WordPress 中，有大量可用的插件可以為您做到這一點； 但是，您可能需要調用 WordPress 服務器才能使用它們。

使用 WP API，媒體處理邏輯可以從 WordPress 中抽像出來。 您可以直接從前端進行所有第三方 API 調用，這在關注點分離方面非常有用。 您可以使用 Cloudinary 之類的庫來動態處理圖像和其他媒體文件，然後將它們上傳到雲端。 上傳後，圖像的 URL 可以存儲在 WP 後端。 選項是無窮無盡的，您可以以任何您認為合適的方式將各個部分組合在一起。

現在讓我們看看如何將 WordPress 後端與 React 連接起來。

React 入門

React 是一個聲明式前端庫，用於在 Web 上構建用戶界面和交互式應用程序。 使用 React，您可以組合更小的獨立可重用代碼段，稱為組件。 讓我們通過創建一個 React 項目來創建我們的第一個組件。

創建 React 項目最流行的方法是運行 create-react-app。 CRA 為學習 React 提供了一個舒適的環境，如果您是初學者，它是開始構建新的單頁應用程序的最佳方式。 它設置您的開發環境，以便您可以使用最新的 JavaScript 功能，例如 ES6 和 webpack。 此外，create-react-app 提供了良好的開發人員體驗並優化了您的應用程序以進行生產。

您需要在您的機器上安裝 Node >= 8.x 和 npm >= 5.2。 要創建項目，請運行以下命令：


npx create-react-app wp-react-demo


上面的命令為我們的 React 應用程序創建了一個樣板模板，我們將其命名為wp-react-demo 。


cd wp-react-demo
npm start


如果一切順利，它應該能夠在 http://localhost:3000/ 的開發服務器上為新創建的應用程序提供服務。

如果你想看看 create-react-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


public 目錄包含啟動應用程序所需的所有資產。 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 嘗試在文檔中查找 id 為“root”的元素，然後注入組件進入根。 實際上，App 組件會被渲染，這就是旋轉 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;

這基本上就是一個組件的樣子。 每個組件都呈現您 UI 的一部分。 您可以在另一個組件中組合一個組件，這就是您獲得這樣的組件樹結構的方式：

如果您想知道為什麼我們能夠在 render() 中使用 HTML，這就是 JSX 的神奇之處。 JSX 是 JavaScript 的語法擴展，允許您在 JavaScript 文件中使用純 HTML。 您可以在官方文檔中閱讀更多相關信息。

我將刪除所有 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';