Learn React在本地运行 Chef Claude
用这个页面在你的电脑上运行从 Learn React 中提取的 Chef Claude 食谱项目，并用你自己的 Anthropic 密钥获取一个食谱。有三个地方与 Scrimba 的编辑器不同：安装需要一个额外的标志，ai.js 中的密钥读取需要 Vite 的语法，而项目使用的 Anthropic 模型已经停用了。如果 React 部分对你来说是全新的，React 手册从零开始讲起。
你首先需要什么
安装一个受支持的 Node.js LTS 版本。推荐使用 Node 24，它包含 npm。
检查这两个命令是否都能用。你的版本号可能不同：
$ node --version
v24.18.0
$ npm --version
11.18.0你还需要一个 Anthropic API 密钥，因为应用会向 Anthropic 请求食谱。创建一个你完成后会删除的密钥，并在 Anthropic 控制台中设置一个较低的月度支出限制：这个项目直接从浏览器调用 Anthropic，所以密钥会暴露在页面中。
node --version 和 npm --version 是否都输出了版本号。 然后创建一个 Anthropic API 密钥，并在你的账户上设置一个较低的支出限制。这个项目只需要这一个密钥。
安装依赖包
在提取的 Chef Claude 文件夹中打开一个终端。它应该是包含 package.json 和 ai.js 的文件夹：
$ cd path-to-your-extracted-project直接运行 npm install 会因为 ERESOLVE 错误而停止，因为项目使用了 React 19 的预发布版本，而其中一个依赖包不接受这个版本。改用这个标志：
$ npm install --legacy-peer-depsnpm 最后会报告它添加了多少个依赖包。
package.json 的文件夹中打开终端，然后运行 npm install --legacy-peer-deps。npm 最后会说明它添加了多少个依赖包。 这个标志听起来像个警告，但它是这个项目的正确安装方式。如果 npm 说找不到 package.json，说明你在错误的文件夹中。
修改 ai.js 中的三行
Scrimba 的编辑器为你填充了 process.env.ANTHROPIC_API_KEY 和 process.env.HF_ACCESS_TOKEN。浏览器没有 process，Vite 也不会创建一个，所以两个读取都必须改变，即使是 Hugging Face 那个应用永远不会调用的：ai.js 在加载时就会运行这两个。
打开 ai.js 并将 Anthropic 的值从：
apiKey: process.env.ANTHROPIC_API_KEY,改为：
apiKey: import.meta.env.VITE_ANTHROPIC_API_KEY,将 Hugging Face 的值从：
const hf = new HfInference(process.env.HF_ACCESS_TOKEN)改为：
const hf = new HfInference(import.meta.env.VITE_HF_ACCESS_TOKEN)Vite 只会向浏览器代码提供名称以 VITE_ 开头的变量，这就是为什么两个名称都要加上这个前缀。
第三行是模型。在 getRecipeFromChefClaude 函数中，项目请求的是 claude-3-haiku-20240307，这个模型 Anthropic 已经停用了。将：
model: "claude-3-haiku-20240307",改为 Anthropic 的指定替代品：
model: "claude-haiku-4-5-20251001",请求的其余部分保持课程中的写法。
ai.js 中，将两个密钥读取改为 import.meta.env 的形式，然后改变模型名称。 即使应用只使用 Anthropic，也要改变两个读取；即使只留下一个旧读取也足以让页面显示为空白。
将你的密钥添加到 .env
在 package.json 旁边创建 .env 并将你的密钥放入其中：
VITE_ANTHROPIC_API_KEY=your-anthropic-key-here在 package.json 旁边创建 .gitignore 并添加：
.env
node_modules/到达 Git 仓库的密钥即使在你删除文件后也会留在历史记录中。Git 手册在忽略文件和良好习惯中介绍了这个习惯。
这个密钥在浏览器中是可见的
Vite 会将每个 VITE_ 值写入它发送给浏览器的代码中，所以任何打开这个页面的人都可以读到你的密钥。将这个版本保留在你自己的电脑上：永远不要部署或分享它，也不要提交 .env。你发布的版本需要一个后端或无服务器函数来把密钥保存在服务器上。
package.json 旁边创建一个叫做 .env 的文件，在其中一行上放入你的密钥，然后在 .gitignore 中列出 .env 使 Git 永远不会保存它。 启动应用并获取食谱
启动开发服务器：
$ npm startVite 可能首先打印一个以 (!) Your Vite config uses features 开头的警告。它不会停止应用。在它下面，Vite 会打印要打开的地址：
VITE v8.3.4 ready in 92 ms
➜ Local: http://localhost:5173/打开确切的 Local 地址。页面以五个已列出的食材开始，所以获取食谱会立即显示。点击它并等待几秒钟：Anthropic 写入时页面不显示进度。Chef Claude 推荐下出现的食谱意味着你的密钥和模型都能正常工作。
如果大约 20 秒后仍然没有任何反应，打开你浏览器的开发者工具（F12，或在 Mac 上的 Chrome 中按 Cmd+Option+J）并阅读控制台标签页。原因会打印在那里，而不是在页面上；下面的故障排除对应了每条消息。
用 Ctrl+C 停止项目。编辑 .env 后你不需要重启它：Vite 会注意到改动并自动重启。
npm start，如果出现配置警告就忽略它，然后打开 Local 地址。点击获取食谱并给它几秒钟的时间。 如果没有食谱出现，打开浏览器开发者工具中的控制台，寻找第一条红色的行。
故障排除
ERESOLVE unable to resolve dependency tree： 改用 npm install --legacy-peer-deps。不要删除或替换 React 依赖包来绕过安装。
页面是空白的，控制台说 process is not defined： 一个 process.env 读取仍在 ai.js 中。将两个都替换为上面显示的 import.meta.env.VITE_... 形式并保存文件。
点击获取食谱后什么都没有发生，控制台说 Could not resolve authentication method： 浏览器没有密钥。检查 .env 是否在 package.json 旁边，名称是否完全是 VITE_ANTHROPIC_API_KEY，保存文件，并在 Vite 说重启后再点击获取食谱。
控制台显示 401 和 invalid x-api-key： 密钥已到达，但 Anthropic 没有接受它。从你的 Anthropic 账户重新复制一遍，并检查它是否未被删除。
控制台说你的余额太低： 密钥有效，但账户没有可用信用。在 Anthropic 控制台的账单中添加信用，然后再点击获取食谱。
控制台说模型未找到： 检查 ai.js 是否请求的是 claude-haiku-4-5-20251001，而不是 claude-3-haiku-20240307。如果 Anthropic 稍后也停用了那个模型，使用其模型弃用页面所指定的替代品。
process.env 读取仍在 ai.js 中。