现今前端开发的一个重要趋势就是将 CMS 从传统的 monolithic web 应用中解耦出来，以 Headless CMS 的形式提供服务。Headless CMS 意味着它只提供数据和内容的管理和存储服务，而不负责渲染页面。通过 Headless CMS，我们可以在不影响 CMS 后台的前提下，灵活地使用任何前端技术甚至是多个前端技术来渲染页面。这也意味着可以使用 React 作为 Headless CMS 的一个客户端，来获取数据并构建前端界面。
本文将介绍使用 React 作为 Headless CMS 客户端，来获取并展示 Headless CMS 中的数据的步骤。
Headless CMS 的搭建
Headless CMS 的搭建有很多种方式，比如可以使用 WordPress REST API、Strapi、Contentful 等成熟的 Headless CMS。本文演示的是使用 Strapi 搭建 Headless CMS，并创建一个包含文章数据的内容模型。
首先需要使用 Strapi CLI 安装 Strapi：
npm install strapi@latest -g
接下来创建一个基本的 Strapi 项目：
strapi new my-project
进入 my-project 目录中，启动 Strapi 服务器：
npm run develop
访问 http://localhost:1337/admin 即可进入 Strapi 的管理后台。
在 Strapi 中创建一个内容类型为 Article 的数据模型，包含两个字段：title 和 content。
接下来，我们需要在 Strapi 中创建一些样例数据，以便在 React 应用中使用：
- 在 Strapi 后台，点击左侧菜单中的
Article，进入Article页面。 - 点击右上角的
Add new article按钮，进入文章创建页面。 - 填写文章标题和内容，保存文章。
React 应用
接下来开始构建 React 应用，用于展示 Strapi 中创建的文章数据。
首先创建一个新的 React 应用：
npx create-react-app my-app cd my-app npm start
打开 src/App.js 文件，删除原有的内容，并引入 axios 来获取 Strapi 中的文章数据：
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
------ ----- ---- --------
-------- ----- -
----- ---------- ------------ - -------------
------------ -- -
----- -------- ----------- -
----- ------ - ----- --------------------------------------------
-------------------------
-
------------
-- ----
------ -
-----
----
--------------------- -- -
--- -----------------
------------------------
------------------------
-----
---
-----
------
--
-
------ ------- ----这段代码中，我们使用了 React Hooks useState 和 useEffect 来定义文章列表状态和获取数据的逻辑。在 useEffect 中，我们使用 axios 发送 HTTP GET 请求，获取 Strapi 中所有文章的数据，并把这些数据存储在状态 articles 中。
保存并启动 React 应用：
npm start
访问 http://localhost:3000 即可看到 Strapi 中创建的文章列表。
结论
本文介绍了使用 React 作为 Headless CMS 客户端，来获取并展示 Headless CMS 中的数据的步骤。首先我们使用 Strapi 搭建了 Headless CMS，并创建了一个包含文章数据的内容模型；接着我们在 React 应用中使用 axios 发送 HTTP GET 请求，获取 Strapi 中的数据，并渲染了文章列表。这种方式使得我们能够更加灵活地构建前端应用，无需受到 CMS 后台的限制。
完整示例代码请参考：headless-cms-react-example。
随着 Headless CMS 技术的广泛应用和发展，相信 Headless CMS 和 React 的集成会越来越普及，为前端开发带来更多的乐趣和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6736bf140bc820c5825625ab