必须先安装Node.js和npm，再用npx create-react-app创建项目，接着在VSCode中配置launch.json实现Chrome调试，其中webRoot需指向src目录，sourceMapPathOverrides确保源码映射正确。
确认本地已安装 Node 和 npm
VSCode 本身不自带 Node 运行时，它只是编辑器。你必须先在系统中装好 node 和 npm，否则所有后续配置都会失败。打开终端执行：
node -v && npm -v如果报错
command not found 或版本为空，说明 Node 没装或没加入 PATH。Windows 用户尤其注意：安装时勾选 “Add to PATH”；macOS 用 brew install node；Linux 请避免用系统包管理器（如 apt install nodejs）装旧版，推荐用 nvm 管理。
用 create-react-app 快速初始化项目
不要手动配 webpack、Babel、dev server —— React 官方早已不推荐这么做。直接运行：
npx create-react-app my-app这会自动拉取最新版脚手架、装依赖、生成标准结构。注意：
npx 是 npm 自带命令，不用全局安装 create-react-app；如果卡住，可能是国内网络问题，可加镜像：npx create-react-app my-app --template typescript -–registry https://registry.npmmirror.com
Auth0 React
下载
已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。
在 VSCode 中正确启动开发服务器
进到项目根目录（即含 package.json 的文件夹），在 VSCode 内置终端里运行：
npm start而不是双击
index.html 或右键“Open in Browser”。常见错误包括：
- 在错误目录下执行命令（比如进了
src/子目录） - 终端未激活当前项目路径（VSCode 左下角状态栏应显示正确路径）
- 端口被占用：默认
http://localhost:3000，若报 EADDRINUSE，改端口：PORT=3001 npm start
调试 React 代码时别漏掉 launch.json
想断点调试 JSX 或 Hooks？仅靠浏览器 devtools 不够。需在项目根目录创建 .vscode/launch.json，内容如下：
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}关键点：webRoot 必须指向 src/，否则断点无效；sourceMapPathOverrides 是为 Webpack 生成的 sourcemap 做路径映射，缺了就找不到源码位置。装好 Debugger for Chrome 或 Edge 插件后，按 F5 启动调试即可。
真正容易被忽略的是：VSCode 的终端是否用了正确的 Shell（比如 PowerShell vs Git Bash）、Node 版本是否与项目兼容（某些老 React 项目要求 Node 14.x）、以及 node_modules 是否因权限问题损坏（尤其 macOS/Linux 上用 sudo npm install 后）。这些不会报明显错误，但会导致热更新失效或 npm start 静默退出。
