跳转到内容
搜索文档

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。要开始使用其他框架,请参阅框架指南列表

这篇文档对您有帮助吗?