React + Vite

从 CLI 开始 — 使用 React SPA、Cloudflare Workers API 和 Cloudflare Vite 插件搭建全栈应用，获得极速开发体验。

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

yarn create cloudflare my-react-app --framework=react

pnpm create cloudflare@latest my-react-app --framework=react

或直接部署 — 使用 React、Hono API 和 Vite 创建全栈应用，CI/CD 与预览均已为你配置好。

什么是 React？

React ↗ 是用于构建用户界面的框架。它允许你创建可复用的 UI 组件并高效管理应用状态。你可以使用 React 构建单页应用（SPA），并将其与运行在 Cloudflare Workers 上的后端 API 结合，创建全栈应用。

使用 React 创建全栈应用

使用 create-cloudflare CLI (C3) 创建新项目
npm create cloudflare@latest -- my-react-app --framework=react
yarn create cloudflare my-react-app --framework=react
pnpm create cloudflare@latest my-react-app --framework=react
此项目是如何设置的？

以下是项目的简化文件树。
- my-react-app
  - src/
    
    App.tsx
  - worker/
    
    index.ts
  - index.html
  - vite.config.ts
  - wrangler.jsonc
wrangler.jsonc 是你的 Wrangler 配置文件。在此文件中：
- main 指向 worker/index.ts。这是你的 Worker，将作为后端 API。
- assets.not_found_handling 设置为 single-page-application，意味着由 React SPA 处理的路由不会进入 Worker，因此免费。
- 若要为 Cloudflare 开发者平台资源添加绑定（binding），在此配置。阅读更多关于绑定（binding）的信息。
vite.config.ts 配置为使用 Cloudflare Vite 插件。这会在 Cloudflare Workers 运行时中运行 Worker，确保本地开发环境尽可能接近生产环境。
worker/index.ts 是后端 API，包含单个端点 /api/，返回文本响应。在 src/App.tsx 中，React 应用调用此端点获取消息并显示。
使用 Cloudflare Vite 插件在本地开发

创建项目后，在项目目录中运行以下命令以启动本地开发服务器。
npm run dev
yarn run dev
pnpm run dev
本地开发中发生了什么？

此项目使用 Vite 进行本地开发和构建，因此具备 Vite 的所有功能，包括热模块替换（HMR）。
此外，vite.config.ts 配置为使用 Cloudflare Vite 插件。这会在 Cloudflare Workers 运行时中运行应用，与生产环境一致，并支持访问绑定的本地模拟。
部署项目

你可以从本地机器或任何 CI/CD 系统（包括 Cloudflare 自有的 Workers Builds）将项目部署到 *.workers.dev 子域或自定义域名。

以下命令将构建并部署项目。若使用 CI，请确保相应更新你的「deploy command」配置。
npm run deploy
yarn run deploy
pnpm run deploy

静态资源路由

若将 React 用作 SPA，应在 Wrangler 配置文件中将 not_found_handling = "single-page-application"。

默认情况下，Cloudflare 首先尝试将请求路径与静态资源路径匹配，该路径基于上传资源目录的文件结构。这要么是 Wrangler 配置中 assets.directory 指定的目录，要么在使用 Cloudflare Vite 插件时是客户端构建的输出目录。如果失败，且存在 Worker，则调用 Worker。如果没有 Worker，或者 Worker 随后使用 asset 绑定，Cloudflare 将回退到 not_found_handling 设置的行为。

请参阅路由文档，了解静态资源路由的工作原理以及如何自定义此行为。

在 React 中使用绑定（binding）

新项目还包含位于 ./worker/index.ts 的 Worker，可用作 React 应用的后端 API。React 应用无法直接访问 Workers 绑定（binding），但可以通过此 Worker 与它们交互。你可以从 React 应用向 Worker 发起 fetch() 请求，Worker 随后处理请求并使用绑定（binding）。了解如何配置 Workers 绑定（binding）。

通过绑定（binding），你的应用程序可以与 Cloudflare Developer Platform 完全集成，让你访问计算、存储、AI 等功能。

Bindings

访问计算、存储、AI 等功能。