用Cursor从零启动React项目需先建立AI可理解的上下文：创建.project.md明确技术栈、约定与禁令，再Add to context；随后按需生成登录表单、接入API、状态管理、测试及规则审查，确保代码合规可运行。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Cursor从零启动一个React项目，不是打开编辑器就狂敲/generate命令，而是先建立AI能理解的上下文、再让Agent按需读取、最后生成可运行代码。项目结构混乱、命名随意、缺少文档时，直接让AI全扫src目录会卡死或给出错误依赖链。
初始化项目并配置AI认知边界
在终端执行 npm create vite@latest my-react-app -- --template react，进入项目目录后，立即创建 .cursor/rules/project.md 文件。
在里面写明三件事：技术栈（React 18 + TypeScript + Vite）、核心约定（所有组件用函数式+Hooks，样式优先用CSS Modules）、禁止项（不用any类型，不引入第三方UI库）。这比口头告诉AI“用React写”有效十倍。
打开Cursor，右键项目根目录 → “Add to context”，确保 .cursor/rules/project.md 被AI读入。此时AI才真正知道你想要什么风格的代码，而不是凭空猜测。
生成第一个功能模块：用户登录表单
方法一：自然语言指令驱动
在Chat输入框中输入：“用React和TypeScript实现一个登录表单组件，包含邮箱输入框、密码输入框、‘记住我’复选框、提交按钮。提交时校验邮箱格式和密码长度≥6，失败时显示红色提示文字。”
方法二：基于已有文件微调
如果你已有一个粗糙的 LoginForm.tsx，选中它 → 右键 → “Refactor with AI”，然后说：“加上邮箱正则校验、密码强度提示、提交禁用状态，保持CSS Modules样式隔离。”AI会只改你指定的文件，不会碰其他组件。
【必须做】生成后立刻运行 npm run dev，检查控制台是否有TS类型报错或React Hook警告。AI可能漏掉 useState 初始化类型，比如写成 const [email, setEmail] = useState('') 而没加 string 类型断言，运行时报错才暴露。
接入API并连接状态管理
第一步：确认后端接口路径
在Chat中输入：“查看 src/api/auth.ts，如果不存在，新建一个，导出 login(email: string, password: string): Promise<{ token: string }> 函数，用 fetch 调用 /api/login，带 Content-Type: application/json 头。”
第二步：绑定表单与API
回到 LoginForm.tsx，光标放在 onSubmit 函数内 → 按 Cmd/Ctrl+L → 输入：“调用 login 函数，成功后跳转到 /dashboard，失败时 setErrorMessage”。AI会自动导入 login 并处理 pending 状态。
第三步：提升状态到父组件或使用Context
如果多个页面需要登录态，不要在每个组件里重复写 useEffect(() => { checkAuth() }, [])。告诉AI：“新建 src/contexts/AuthContext.tsx，用 createContext 实现登录态全局共享，包含 login、logout、user 字段。”AI会生成完整Provider包装逻辑，包括localStorage持久化。
添加测试并锁定行为
在 src/__tests__/LoginForm.test.tsx 中手写第一条测试：
test('提交空邮箱时显示错误提示', async () => { render(<LoginForm />); fireEvent.click(screen.getByRole('button', { name: /submit/i })); expect(screen.getByText(/email is required/i)).toBeInTheDocument(); });
选中这段测试 → 右键 → “Generate code to pass this test”。AI会反向推导出需要补全的表单验证逻辑、错误状态useState、以及对应JSX渲染分支。
这一步做完，npm run test 就能跑通。AI生成的代码从此被测试用例锚定，后续修改不会破坏已有行为。
交付前最后一轮AI审查
在Chat中输入：“检查 src/components/LoginForm.tsx 是否符合 .cursor/rules/project.md 的所有约束：1. 无 any 类型；2. 所有 props 都有 interface 定义；3. CSS Modules 类名全部以 module.css 结尾；4. 没有 console.log。”
AI会逐条核对并高亮违规行。如果发现某处用了 console.log，它会直接给出删除建议——这不是通用检查，而是严格对照你写的规则文件执行的审计。
确认无误后，在终端运行 git add . && git commit -m "feat: login form with auth context and tests"。
