在本文中，我們將介紹如何在構建項目時利用WordPress API和React js將WordPress用作無頭CMS。

如果您曾經想過是否可以將React與Wordpress一起使用，答案是肯定的。如果您以前建立過wordpress網站，那麼解決方案可能不會像人們期望的那樣明顯。

什麼是無頭CMS

在進入代碼之前，解釋一下我們將如何處理它可能會很有用。如果您正在尋找一種簡單的方法來管理react js項目的內容，那麼您可能會聽到一個時髦的詞「 headless cms」。由於此術語變得越來越流行，因此早定義而不是遲定義可能是有益的。

無頭CMS是不提供前端解決方案的後端內容管理系統。

默認情況下，Wordpress使用主題和模板為我們的Wordpress網站提供前端。建立這樣的網站可與資料庫互動並創建用戶可以查看的結構。使用此方法構建前端可能會帶來一些不利影響。

首先，它可以創建性能不佳的網站。雖然PHP是一種通用語言，但是有更好的解決方案可以為我們的用戶構建UI。其次，Wordpress支持大約三分之一的互聯網。因此，黑客喜歡嘗試進入Wordpress網站以訪問敏感數據。具有單獨的前端可以防止用戶或黑客完全知道它是一個Wordpress網站。

好的，那我該如何使用React js來做到這一點？

WordPress公開了一個REST API，該API允許訪問站點創建的數據。我們可以將這種技術與Axios之類的庫一起利用，以使用Wordpress網站中的數據並將其拉入React.js項目。這意味著我們可以兼得兩個詞：使用Wordpress管理內容的簡便性和使用React js進行構建的樂趣。

使用Wordpress作為我們的後端

讓我們看一下Wordpress網站，這樣您就可以準確了解我在說什麼。您可以為此使用任何Wordpress網站，甚至是託管在子域中的網站。對於本文，我將查看TechCrunch網站。

通過簡單地添加/wp-json/wp/v2/posts到url的末尾，我們將看到所有最新帖子的JSON輸出。通過簡單地更改posts為pages，我們可以在TechCrunch站點中看到頁面的數據。

我們可以嘗試不同的選擇一樣posts，pages，users，等等。繼續遊玩，看看可以找到哪些數據。這將使我們能夠決定要使用什麼以及不使用什麼。

我們的React js Starter App

我已經創建了一個反應啟動器，您可以從此處下載。解決方案也在另一個分支上。您可以下載文件，運行yarn或npm install（任意選擇），然後運行yarn start或npm run start。您將看到我們的簡單頁面，但是會發現沒有任何內容。讓我們開始並添加一些內容。

安裝必要的軟體包

如果我們打開的package.json文件中，我們可以看到，我已經包括react，react-dom和bulma建立我們的前端。在我們進一步使用react js應用程序之前，我們需要添加一些其他軟體包。

我們可以添加Axios，這是一個允許我們從應用程序發出http請求而沒有任何麻煩的軟體包。React-router可用於創建路由，這意味著我們無需瀏覽器刷新即可切換頁面或組件。要安裝這兩個軟體包，我們可以在終端中使用以下代碼：

將React Router添加到App.js文件

現在我們已經安裝了新軟體包，我們需要react-router在app.js文件中進行設置，以告知瀏覽器在地址欄中輸入不同路徑時應顯示什麼內容。首先，我們需要從react-router文件頂部導入所需的片段。在導入的底部，添加以下代碼：

現在我們已經導入了react-router，我們可以使用這些組件來設置路由。我們當前的app.js文件如下所示：

要將路由器添加到app.js組件，我們需要將最外面<div>的<Router>組件包裝在組件中，以便我們可以設置應用程序的路由。然後，我們可以<h1>用以下兩條路線替換標籤：

讓我們分解一下：

我們的第一個路由告訴reactjsPostList在用戶訪問本地路由（http：// localhost：1234）時顯示一個名為的組件。該exact屬性意味著它需要與該路線完全匹配，這意味著如果我們在此之後有任何東西，它將不會進入該路線。

第二條路線將顯示PostView當用戶訪問通配符路線時調用的組件。該:slug表示斜線後的任何字元串將是我們的應用程序不同的路線。在我們的例子中，此字元串或slug（因為這就是我們的名字）將是TechCrunch博客文章的一個子標籤。我們的app.js文件現在應如下所示：

接下來，我們需要創建PostList和PostView組件，並將其導入到app.js組件中。

創建我們的PostList組件

在開始創建PostList組件之前，我們應該花一些時間考慮應該使用哪種組件。我們將使用componentDidMount生命周期方法向axios發出http請求，然後將其存儲在state中。我們可以在類組件中同時使用狀態和生命周期方法。既然我們已經知道如何構建此組件，那麼就可以開始了。首先，我們應該為組件創建文件：

接下來，我們應該導入構建此組件所需的內容。將這些導入語句添加到PostList.js文件頂部：

之後，我們可以創建一個名為的類組件PostList，並為博客的索引頁面設置構造函數和狀態。我們的州應持有將要顯示的帖子列表。我們在此組件中編寫的任何自定義函數都將綁定this到此構造函數中的關鍵字。

現在我們有了放置帖子數據的位置，我們應該創建一個生命周期方法來提取該數據並將其分配給我們的狀態。我們可以通過在構造函數之後添加以下代碼來輕鬆實現此目的：

如果您經常開發React應用程序，我建議您在選擇的瀏覽器中安裝React DevTools。這使得使用react js進行開發非常簡單，並且可以跟蹤通過狀態和道具傳遞的數據。

現在，我們可以檢查狀態，以確保從componentDidMount生命周期方法中正確填充了狀態。為此，請在瀏覽器中打開開發人員工具，然後轉到react選項卡。然後，我們可以向下鑽取結構，直到找到我們的PostList組件，並且右邊的窗格顯示了我們的狀態和道具。

由於我們所有的帖子都處於狀態，因此我們可以為頁面創建具有結構的render方法。為此，我們可以使用一個map()函數來迭代數組中的每個項目。我們的render方法可以componentDidMount使用以下代碼跟隨我們的方法。

如果我們使用npm run start或來運行我們的網站yarn start，則可以看到我們的博客帖子顯示正確，但是可以看到正在呈現的HTML標籤。那不酷。為了正確呈現此效果，我們應該創建一個與該dangerouslySetInnerHTML屬性配合使用的函數。

讓我們componentDidMount在render方法之後但在方法之前添加一個函數來執行此操作。我們還需要this在構造函數中綁定關鍵字。然後，我們可以使用dangerouslySetInnerHtml屬性在中呈現帖子摘錄<div>。我們完成的PostList組件應如下所示：

創建一個PostView組件

如果回頭看一下app.js文件，可以看到該博客文章將使用一個PostView組件呈現，因此讓我們繼續創建它！

上面的代碼將創建一個文件來容納我們的PostView組件，並在您的默認代碼編輯器中將其打開。為簡單起見，我們只需複製PostList組件的公式即可。我們可以從PostList組件中複製並粘貼代碼，然後進行一些小的修改。

首先，我們需要確保並將組件名稱從更改PostList為PostView。接下來，我們需要對componentDidMount方法進行一些修改。我們可以添加一行代碼，這些代碼將從:slug地址欄中的url獲取，並使用該代碼將Wordpress API返回的帖子過濾為單個帖子。最後，我們需要更改render方法以顯示完整的帖子（如果存在）或不顯示錯誤（如果不存在）。

下面的代碼將用於完成的PostView組件。看看它，看看是否可以找出差異，並弄清楚我們為什麼這樣處理它們。

ReactJS博客的最後步驟

現在，我們的博客已設置好。為了使我們的應用程序按需運行，我們還需要做一些其他的小事情。首先，期望徽標或網站標題鏈接回首頁。由於我們react-router在項目中使用，因此甚至無需刷新頁面就可以執行此操作。為此，我們可以打開components/header.js文件並將其修改為如下所示：

我們的WordPress的最後一步和應對JS博客是import語句添加到該app.js文件為我們的兩個組成部分，PostList和PostView等反應過來知道從哪裡得到他們。完成此操作後，您應該能夠運行該應用程序，並查看TechCrunch的最新博客文章。

React js的性能問題

您可能會注意到載入速度方面的一些問題，或者在顯示內容之前屏幕空白一秒鐘，感覺有些毛病。這是因為內容是在安裝組件後呈現的，因此延遲很小。此外，搜索引擎抓取工具很難讀取此類網站上的內容，因為在呈現頁面後，這些內容是通過JavaScript載入的。有幾種處理這些問題的流行方法：

Gatsby.js，靜態站點生成器

Gatsby js是我最喜歡在react js生態系統中構建的工具之一。它使我們可以立即使用React，React-router和Graphql構建站點或應用程序！然後，當我們實際構建應用程序時，Gatsby js會創建靜態文件，從而使我們的應用程序變得愚蠢。

因為我們應用程序的文件是靜態提供的，所以它們的速度非常快，因為所有內容都是預先創建的，而不是頁面正在呈現時。這可能有點棘手，因為我們必須找出一種在更新內容時觸發構建的方法。Netlify是我的首選服務，因為它非常易於使用，當您推送到某個git分支時，它將重建Gatsby js項目。

Next.js，伺服器端渲染React js

解決這些問題的另一個流行解決方案是Next js，它為react js應用程序提供伺服器端渲染。componentDidMountNext js公開了一個名為的新方法getIntialProps，該方法允許我們在呈現組件之前獲取數據，而不是使用在組件安裝後獲取數據的方法。

Next js提供伺服器端渲染的事實也解決了爬蟲無法讀取內容的問題。另外，他們網站上的教程非常棒。如果您要使用MERN堆棧構建應用程序，這將是一個很好的解決方案，因為它可以處理頻繁更改的數據。

包裝我們的Wordpress和React js項目

如您所見，在享受前端的React js的同時，利用Wordpress提供的出色UI確實非常容易。您可以在個人項目，企業解決方案或兼職工作中利用這些工具。這是您獲得兩全其美的罕見情況之一！