跳转到内容
搜索文档

React

最后更新 查看 MarkdownAgent 设置

React ↗ 是由 Facebook 开源团队构建的流行框架,用于构建响应式且功能强大的前端应用。

在本指南中,你将创建新的 React 应用并使用 Cloudflare Pages 部署。

设置新项目

使用 create-cloudflare ↗ CLI (C3) 设置新项目。C3 将创建新项目目录,启动 React 官方设置工具,并提供即时部署选项。

要使用 create-cloudflare 创建新的 React 项目,请运行以下命令:

npm create cloudflare@latest -- my-react-app --framework=react --platform=pages

create-cloudflare 将安装依赖,包括 Wrangler CLI 和 Cloudflare Pages 适配器,并询问设置问题。

进入应用目录:

cd my-react-app

在此可以运行应用:

npm run dev

继续之前

所有框架指南都假定你已具备 Git ↗ 的基础知识。如果你是 Git 新手,请参阅这份精简 Git 手册 ↗,了解如何在本地设置 Git。

如果你使用 SSH 克隆,则必须在每台用于向 GitHub 推送或拉取的计算机上生成 SSH 密钥 ↗。

更多信息请参阅 GitHub 文档 ↗和 Git 文档 ↗。

创建 GitHub 仓库

访问 repo.new ↗ 创建新的 GitHub 仓库。创建新仓库后,进入新创建的项目目录,在终端中运行以下命令,准备并将本地应用推送到 GitHub:

git remote add origin https://github.com/<your-gh-username>/<repository-name>
git branch -M main
git push -u origin main

使用 Cloudflare Pages 部署

通过 create-cloudflare CLI (C3) 部署

如果你使用 create-cloudflare(C3) ↗ 创建新的 React 项目,C3 将安装项目所需的所有依赖,并提示你通过 CLI 部署项目。如果部署,你的站点将上线,并会提供部署 URL。

通过 Cloudflare 仪表板部署

  1. 在 Cloudflare 仪表板中,前往 Workers & Pages 页面。

    Go to Workers & Pages ↗
  2. 选择 Create application(创建应用程序) > Pages > Import an existing Git repository(导入现有 Git 仓库)。

  3. 选择你创建的 GitHub 仓库,在 Set up builds and deployments(设置构建和部署) 部分提供以下信息:

Configuration optionValue
Production branchmain
Build commandnpm run build
Build directorydist

配置站点后,即可开始首次部署。你将看到 Cloudflare Pages 安装 react、项目依赖并构建站点,然后完成部署。

部署站点后,你将在 *.pages.dev 上获得项目的唯一子域名。 每次向 React 应用提交新代码时,Cloudflare Pages 都会自动重新构建并部署项目。你还可以在新 pull request 上获得预览部署,在部署到生产环境之前预览更改效果。

了解更多

完成本指南后,你已成功将 React 站点部署到 Cloudflare Pages。要开始使用其他框架,请参阅框架指南列表。

这篇文档对您有帮助吗?