Cursor 本质上是一款具备 AI 协作能力的现代化 IDE，但真正决定组件逻辑、状态流和业务实现的，依然应该由开发者主导。它的主要价值更多体现在代码补全、重构、解释、调试以及 scaffold 搭建等环节。项目初始化完成后，建议先把 Claude 3.5 Sonnet 模型配置好，同时关闭自动应用建议，这样整体使用会更稳妥。随后，可以直接通过自然语言生成组件骨架，不过关键逻辑节点一定要手动检查一遍，千万不要省略校验这一步。调试过程中，Chat 非常适合用于实时排查问题，尤其是在处理空值判断和组件提取时效率更高。涉及跨文件联动时，还需要额外关注 SSR 兼容性；完成重构之后，import 路径通常也需要手动修正；至于代码层面的常见规范问题，则可以交给 ESLint 自动修复。

用 Cursor 编写 React 前端页面，核心思路是把 Cursor 当作一款支持 AI 协同开发的现代化 IDE 来使用，而不是单纯依赖它一次性生成整页代码——它更擅长代码补全、重构优化、错误解释、调试排查以及快速 scaffold，但组件逻辑、状态管理和副作用处理仍然需要你自己做出判断。

初始化项目并配置 Cursor 环境

在终端执行 npx create-react-app my-app --template typescript 创建标准的 React + TS 项目，进入项目目录后使用 Cursor 打开整个文件夹。首次打开时，Cursor 会自动识别 React 项目结构，并加载对应的语言模型上下文，方便后续生成和理解代码。

点击左下角「Settings」→「AI」→「Model」，将默认模型切换为「Cursor Pro（Claude 3.5 Sonnet）」，这个模型在 JSX 语法、React Hooks 使用模式以及 TypeScript 类型推导方面，通常会给出更精准的响应。

【必须关闭「Auto-apply suggestions」】 否则 Cursor 可能会在你输入 useE 时直接插入完整的 useEffect 模板，打断当前正在编写的自定义 Hook 或业务逻辑。

用自然语言驱动组件开发

在任意 .tsx 文件中，将光标放在空行位置，输入 // 创建一个带搜索框和结果列表的用户选择器，支持防抖和键盘导航，然后按下 Cmd+K（Mac）或 Ctrl+K（Win），Cursor 通常会生成完整的组件骨架，其中包括 useState、useRef、useEffect 以及 onKeyDown 等处理逻辑。

生成后不要立刻接受，建议先重点检查三点：① 是否使用了 useCallback 包裹防抖函数；② key 是否绑定为唯一 ID 而不是索引；③ 输入框是否正确设置了 autoFocus 属性。这几个地方一旦出错，很容易导致组件重复渲染异常或焦点丢失。

如果生成结果里把搜索逻辑写进了 useEffect，但依赖项不完整，可以选中那段代码，右键 →「Fix with AI」，Cursor 会自动补全依赖数组，并提示“已添加 [query, debounceMs]”。

实时调试与错误修复

执行 npm start 之后，如果浏览器抛出 “Cannot read properties of null (reading 'map')” 这类 React 前端开发中常见的错误，不要急着直接修改代码。可以先在 Cursor 中打开控制台堆栈指向的 .tsx 文件，定位到报错行，再把它上方最近的变量名复制出来，例如 users。然后到侧边栏的「Chat」里输入：“这个 users 是从 props 传入的，可能为空，怎么安全地 map 并显示 loading？”

Cursor 通常会返回 {users?.length ? users.map(...) :

Loading...

接着选中整段 map 渲染代码，按 Cmd+Shift+P → 输入「Extract to Component」，Cursor 会帮你创建 UserList.tsx 并自动导入，同时尽量保留原有的 props 类型定义。

跨文件逻辑联动

当你在 DashboardPage.tsx 中写到 const [activeTab, setActiveTab] = useState('overview')，如果想让 Tab 切换时同步更新 URL，可以直接在该行下方输入注释：// 同步 activeTab 到 URL searchParams，使用 useSearchParams，然后再按 Cmd+K。

Cursor 会插入 const [searchParams, setSearchParams] = useSearchParams();，并在 useEffect 中监听 activeTab 的变化，但【它不会自动处理 SSR 场景下 useSearchParams 报错】，因此你仍然需要手动增加一层判断：if (typeof window !== 'undefined') { ... }。

随后在 router.tsx 中，通过 Chat 提问：“如何让 /dashboard?tab=analytics 自动设置 activeTab 为 'analytics'”，Cursor 会给出解析 searchParams 的代码，你只需要把返回结果中的 searchParams.get('tab') || 'overview' 替换原来 useState 的初始值即可。

重构已有组件

选中一个超过 200 行的 ReportTable.tsx 文件，右键 →「Refactor with AI」→ 选择「Split into smaller components」。Cursor 会分析 props 流向与 DOM 结构，并给出三个适合拆分的部分：表头过滤区域、数据行渲染器以及总计汇总栏。

接受建议后，它会生成三个新文件，但【不会自动更新父组件中的 import 路径】，你需要手动把 import { ReportTable } from './ReportTable'; 改成 import ReportTable from './ReportTable';（移除花括号），否则 Webpack 很可能会报 Module not found。

最后在终端运行 npx eslint --fix src/，Cursor 会自动高亮所有未使用变量和缺失的 key 属性，并在你保存时弹出「Apply ESLint fixes?」确认框——直接点击「Yes」即可批量完成修复。