关于 html:如何将 ReactJS 用作静态网站?

 2022-02-13 

How can I use ReactJS as a static website?

我想用 React 开发我的静态 Web 应用程序。我刚刚完成了井字游戏入门教程。无论如何,我可以将 ReactJS 直接"编译"(或任何术语)到我的 HTML 文件中吗?因此,要运行该 ReactJS 应用程序,我需要使用 Yarn 的服务器运行它。

我不喜欢使用 CDN,因为我想更新和管理依赖项。

假设,对于我的起点,我想让官方 React 入门教程中的井字游戏只使用一个 HTML 文件(该 HTML 文件中的 CSS 和 JS)。我想看看这是否可能,所以我不关心这个问题的最佳实践。


你应该看看 Gatsby JS

它是一个用于 React 的静态站点生成器。可能这就是您正在寻找的。


我已经测试过了。 yarn build 仅适用于服务器。甚至 python3 -m http.server 也可以。所以不行!如果没有开箱即用的服务器,从非 Bower 包管理器下载的 ReactJS 将无法工作。


听起来你正在使用带有 create-react-app 的 Yarn。如果是这样,您正在运行:

yarn start

现在运行:

yarn build

在此处查看更多信息:https://github.com/facebookincubator/create-react-app

静态 Web 应用程序将构建到 build 文件夹中。你会在那里找到所有的静态资源,比如 JS、CSS 和 HTML。


运行 npm run buildyarn build 并查看 build 文件夹中的输出。它生成静态 HTML、CSS 和 Javascript。