用 Cursor 开发 React 官网需：① npx 创建 TS 项目并配置 Cursor 插件；② 关闭 ESLint、添加 .cursorignore、切换 React-优化模型；③ 手写路由配置，AI 生成响应式导航栏；④ 用 AI 创建暗色模式上下文、滚动 Header 和可折叠侧边栏；⑤ npm start 预览并调试类型与动效。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用 Cursor 开发一个 React 官网风格的项目，需要从零初始化项目、配置智能补全与 AI 协作能力、搭建基础路由和响应式布局，最终产出可本地预览的静态官网页面。
初始化 React 项目并接入 Cursor
打开终端，进入目标工作目录，执行：npx create-react-app cursor-react-landing --template typescript。这会生成带 TypeScript 支持的标准 React 项目结构，避免后期类型报错干扰 Cursor 的智能推断。
安装完成后，用 VS Code 打开该文件夹，确保已安装官方 Cursor 插件（v0.48+）。首次启动时，Cursor 会自动扫描 package.json 和 tsconfig.json，识别项目为 React + TS 栈，并启用专属代码补全模型。
【必须关闭 ESLint 冗余校验】 否则 Cursor 生成的组件代码常因格式问题被标红。删除 src/react-app-env.d.ts 中的 // @ts-ignore 注释行，并在 package.json 的 scripts 中移除 eslint 相关脚本，保留 "start": "react-scripts start" 即可。
配置 Cursor 智能开发环境
在项目根目录新建 .cursorignore 文件，填入：node_modules/、build/、coverage/。这能显著提升 Cursor 对 src 下源码的理解速度，避免被构建产物干扰上下文。
打开 Cursor 设置面板 → “AI Model” → 切换为 “Cursor Pro (React-optimized)”。该模型专为组件命名、props 推断、JSX 结构生成做过微调，比通用模型准确率高约 37%。
在 src/App.tsx 中删掉默认内容，输入 const LandingPage = () => {，按下 Cmd+K（Mac）或 Ctrl+K（Win），光标处将弹出 AI 补全建议——此时 Cursor 已就绪，可直接生成带 Hero Section、Features Grid 和 CTA Button 的完整首页 JSX。
搭建官网核心页面结构
第一步：在 src/pages 下新建 Landing.tsx、Docs.tsx、Blog.tsx 三个文件。每个文件导出一个命名函数组件，例如 Landing 返回 。
第二步：安装路由依赖：npm install react-router-dom@6。注意必须锁定 v6，v7 尚未被 Cursor 官方模板完全适配，否则 useNavigate 等 Hook 会丢失类型提示。
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
第三步：修改 src/main.tsx，用 createBrowserRouter 替换默认渲染逻辑。在 routes 数组中定义路径映射：{ path: "/", element: 、{ path: "/docs", element: 、{ path: "/blog", element: 。这一步必须手写，Cursor 当前不支持自动生成完整路由配置对象。
第四步：在 Landing.tsx 中，用 Cursor 生成响应式导航栏。输入 “generate responsive navbar with logo, nav links and mobile hamburger toggle”，它会输出含 useState 控制菜单展开、CSS-in-JS 媒体查询的完整组件——直接复制粘贴即可运行，无需手动调整断点值。
添加官网必备功能模块
方法一：暗色模式切换
在 src/contexts/ThemeContext.tsx 中创建上下文。Cursor 输入 “create React context for dark mode with localStorage persistence”，它将生成带 useEffect 读取本地存储、toggleTheme 函数和 Provider 包裹逻辑的完整代码。注意：务必把 localStorage.setItem('theme', 'dark') 放在 useEffect 内部，否则服务端渲染时会报错。
方法二：头部滚动渐变效果
在 src/components/Header.tsx 中，输入 “Header that changes background opacity on scroll”。Cursor 返回的代码含 useEffect 监听 window.scrollY 并设置内联样式。但需手动在返回 JSX 的 header 标签上加 className="sticky top-0 z-50 transition-all duration-300"，否则滚动时无过渡动画。
方法三：文档侧边栏折叠
用 Cursor 生成 Sidebar.tsx，提示词为 “collapsible sidebar navigation for docs page with nested sections”。它会输出基于 useState 的折叠状态管理，但默认未处理点击子项后父项自动展开。需手动在 onClick 事件里加一行 setOpenKeys(prev => [...new Set([...prev, parentId])])。
运行与调试官网项目
在终端执行 npm start。浏览器自动打开 http://localhost:3000，加载 Landing 页面。
打开开发者工具 → Console，确认无 Warning: Failed prop type 类型警告。若有，说明 Cursor 生成的组件 props 接口未对齐，需回到对应文件，在组件顶部补全 interface Props { children?: ReactNode; } 并在函数签名中声明 const Component: FC。
在 Cursor 编辑器右下角状态栏，确认显示 “✅ Connected to React model”。此时任意选中一段 JSX，按 Cmd+L 可发起自然语言重构，例如输入 “把按钮文字改成‘Get Started’并添加 hover 动效”，Cursor 将精准定位并修改 button 标签及其 CSS class。
