Frontity 是 WordPress 的 React

有些开发者就是更喜欢用 React。我并不怪他们，因为我也喜欢 React。也许这就是他们首先学习的。我已经用它很长时间了，对它有一种舒适感。但主要是它强大的组件模型让我喜欢。有一个代码库，它由具有明确工作和责任的组件构成，这真的很好。

但是，用 React 构建 WordPress 网站并不常见。使用 WordPress 的标准方法是通过主题，主题本质上是样式和处理模板的 PHP 文件。但是 Frontity 正在改变这种情况。Frontity 是一个基于 React 的框架，它会解析您的 WordPress 网站的 API 并使用 React 构建整个前端，并提供您从这种环境中期待的所有强大工具。

天啊，这是多么快的设置

这是我开始的方式。在命令行中，我做了

npx frontity create my-app

然后我进入它创建的文件夹并做了

npx frontity dev

这会立即为您启动一个网站供您开始工作。

为了让它对我来说更真实，我进入 frontity.settings.js 并将源 API 更改为指向 CSS-Tricks

{
  name: "@frontity/wp-source",
  state: {
    source: {
      api: "https://css-tricks.cn/wp-json",
    },
  },
},

现在看看我得到了什么

太疯狂了。对于一些项目，这可以直接部署。

查看他们的介绍视频，它会逐步演示这个过程

开始工作

我对这类事情的第一反应是立即动手进行样式设计。默认安装的主题是 Mars 主题，他们有一个 很好的指南 来帮助您了解它的工作原理。该主题使用 Emotion 进行样式设计，因此组件具有可以直接在其中修改的样式。我在 <HeadContainer> 组件中找到了 index.js，并立即进行了 background: red 更改！

const HeadContainer = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: red;
`;

它立即热模块重新加载了那个东西

这是那些仅限客户端的技術之一嗎？

这是我自己的想法。我的意思是，使用 WordPress 原样的优势之一是您获得了免费的服务器渲染。这意味着没有 SEO 问题（我们知道客户端渲染的网站可能需要一周或更长时间才能为每次更改进行抓取）。这意味着弹性和速度。

Frontity 确实执行服务器端渲染！它使用同构渲染，这意味着您需要一个 Node 服务器来渲染页面，但这意味着浏览器将获得为页面完全生成的 HTML！

它 完美匹配 Vercel，基本上就是这样。

与在开发中搭建新网站和运行新网站一样容易，您只需执行以下操作即可为生产做好准备

npx frontity build

然后运行 Node 服务器

npx frontity serve

酷。

我也非常喜欢围绕这一切都有一个 社区。如果您需要帮助，您会得到帮助。

这是最理想的场景。

我一直很喜欢用 WordPress 构建网站，现在有了块编辑器，我更加开心了。我真的很喜欢有一个编辑体验来帮助我编写和制作我想创建的页面。

但是，我也喜欢使用基于组件的架构，它具有快速、易于使用、热刷新本地开发环境。一旦你使用这种开发环境，就很难使用其他任何东西！美丽的 DX。

而且我还要确保我部署到生产环境的网站是快速、健壮、弹性、可访问性和 SEO 友好的。

使用 Frontity 网站，我可以获得所有这些。

---

我在这里喜欢的一件事是 Automattic 本身支持所有这些。不仅仅是精神上的支持，他们还 是主要的投资者。我认为他们很明智地将此视为 WordPress 生态系统的重要组成部分。使用 WordPress 构建并不意味着不使用 React 构建，尤其是在 Frontity 承擔了很多繁重工作的情况下。