一行代码不写，我用 cursor 给原生 JS 项目支持了 react 能力

契机

最近我们整理完了 L3 学习路线，开始要练习 React 和 Vue 了，因此我们准备给 L2 的实践项目新增 React 版本和 Vue 版本的题目和参考答案。

最近没事，看了一下 AI IDE 的东西，网上那么多文章在吹嘘 curosr 有多牛，什么一行代码不写，从 0 搭建一个小游戏、xx 项目，是不是真这么牛呀。

正好有这个机会，要不就用 curosr 给我的实践项目支持 React 版本的功能和题目吧。

说做就做，让我们开始吧。

本文仅记录使用 curosr 的整个过程，会省略掉一些无关紧要的内容；另外不会专门介绍 cursor，关于 curosr 的入门文章，网上非常多，自己找来看就好了

实现 React 版本组件

我选择的项目是 P6-button-component，这是一个练习 Button 组件的实践项目，具体细节大家可以到 github 上面查看，先来看看项目最初始的状态：

简单介绍一下，P6 项目是按照设计稿和题目要求，用原生 JavaScript 实现一个 Button 组件。

• s1 是基础版 Button 组件，实现最基础的功能
• s2 是增强版 Button 组件，支持更多功能，但还是用原生 JavaScript 实现

我们的目标是：新增一个 s3 的阶段题目，实现一个 React 版本的 Button 组件，它支持的功能要和 s2 要求的功能一样。

首先，我复制了 s2 目录，改名为 s3，打开 s3/button.js 文件，然后跟 cursor 说：

我让 cursor 参考 s2/button.js，用 React 实现一个相同功能的 button 组件，它很快就给我实现了。

import React from 'react';
import classNames from 'classnames'; // 推荐使用 classnames 库来处理类名

const ICON_POS = {
  START: 'start',
  END: 'end',
};

const Button = ({
  className,
  text,
  icon,
  iconPosition = ICON_POS.START,
  disabled = false,
  onClick,
  children,
  ...rest
}) => {
  // 基础类名
  const defaultCls = 'zd-btn';
  const disabledCls = 'z-disabled';
  const iconCls = 'zd-btn-icon';
  const iconPosEndCls = 'zd-btn--icon-end';

  // 组合类名
  const buttonClasses = classNames(
    defaultCls,
    className,
    {
      [disabledCls]: disabled,
      [iconPosEndCls]: iconPosition === ICON_POS.END,
    }
  );

  // 处理点击事件
  const handleClick = (e) => {
    if (disabled) return;
    onClick?.(e);
  };

  // 渲染图标
  const renderIcon = () => {
    if (!icon) return null;
    
    return (
      <span className={iconCls}>
        {typeof icon === 'string' ? icon : icon}
      </span>
    );
  };

  return (
    <button
      className={buttonClasses}
      disabled={disabled}
      onClick={handleClick}
      {...rest}
    >
      {iconPosition === ICON_POS.START && renderIcon()}
      <span>{text || children}</span>
      {iconPosition === ICON_POS.END && renderIcon()}
    </button>
  );
};

export default Button;

我看了下生成的代码，基本没问题，代码风格很好，s2 的功能它基本都实现了：自定义文字、自定义样式、禁用、图标、图标位置、点击事件。

让我感到意外的是，在 s2 的 button 中是允许在标签元素中定义按钮文案，不一定要通过组件入参来自定义文字，这个小功能点只是一行代码。没想到 cursor 能够理解这个小功能点还实现了，原本还想着要教导它一下呢。

cursor 不仅给我实现了代码，还同时给我解释了这个组件的功能、使用示例、改动点：

在看过它提供的使用示例之后，我发现了一个问题，示例中会直接使用 ICON_POS 常量，但是组件中并没有导出这个常量，因此我尝试修复这个问题：

cursor 给了我两个方案，而且在最后，它给我推荐使用方案一，这跟平常我们工作的时候非常像：

我们跟别人沟通的时候都要带着多个方案，并且要有自己的主见。

于是，我让 cursor 使用方案一来修改代码，然后提交，整个过程非常丝滑。

让项目支持 React 构建

现在 React 版本的 Button 组件写好了，但是我的项目还不能运行使用这个 Button 组件的示例代码，因为我的项目没有 React 的构建环境。

我们的实践项目有统一的脚手架工具，可以自动创建新的实践项目，项目的构建是统一的。因为在 L3 之前还是在学习原生 JavaScript，所以我们做的项目构建只支持原生 JavaScript 项目，实现非常简单。

还有很关键的一点，这个脚手架不是我开发的，我从来没看过这个脚手架的代码。也就是说，我连这个项目底层是用什么工具构建的都不清楚。

在这个基础上，我让 cursor 浏览整个项目，然后给我搭建 React 环境：

cursor 分析完整个项目的代码之后，很快就有了答案，通过 3 步完成 React 环境的搭建。

接下来就是每一个步骤提供了代码修改建议，我 review 代码改动，没问题就应用到代码中。

通过最后一步，我才发现，之前我们的项目运行环境什么构建工具都没用，就是简单地搭建了一个本地服务器而已，而 cursor 的改动也很精准的让这个本地服务器支持 jsx 文件的 babel 构建解析，完全没问题。

最后，cursor 还告诉我下一步要安装依赖，然后执行 npm start 启动项目，真是一条龙服务呀。

解决模块依赖问题

我应用了 cursor 的代码改动，并按照提示，安装依赖启动项目，发现页面是白屏，控制台报错了。

于是就到了我跟“笨笨的” cursor 调试问题的时候了，我们拉扯了几个回合，它真得有点笨：

整个调试过程，我故意不做任何引导，单纯只提供报错信息，cursor 就有点笨了，虽然大概能知道是模块依赖的问题，但是它不能精准定位出问题。

而且，cursor 选择的解决方案往往是回避问题。也就是说，cursor 不是解决依赖的问题，而是完全不用模块系统了。我看着有点无语，这是解决不了问题就摆烂了是吗？要是主管看到底下员工这么搞，肯定是要气疯，这项目后面没法维护了呀。

最后，我知道不能再让 cursor 一条路走到黑了，于是给了它一点提示和引导：

按照我的提示，cursor 能够很好地分析出问题并做出代码调整，在应用了代码改动之后，项目 demo 也成功跑起来了。

修改 demo

现在项目跑起来了，但是现在的 demo 是 cursor 提供的，我希望 s3 的 demo 可以跟 s2 一样，那就继续吧。

它的实现非常奇怪，我意识到，应该是我的话术有问题，不能说跟 s2 完全一样。于是，我及时纠正，重新描述了我的要求：

重新生成的 demo 代码就好多了，基本符合我的预期，然后我测试了一下 demo 页面，交互功能全部满足题目要求，能够一次性理解 s2 的 demo 功能，同时完全实现出来，有点超出我的预期。

不过还有 2 个小问题，一个是同一行的按钮有间距问题。另外一个是图标位置的功能实现有问题。

接下来就是这两个小问题的调试过程：

可以看到，cursor 能够分析出来 s2 demo 的 UI，还是很厉害的。然后还主动向我索要一些关键文件的内容关联，这点非常有意思。

不过，在我关联了相关源代码之后，cursor 还是不对的，感觉 cursor 的 css 基础还是有点差呀。

提供了相关的源代码之后，cursor 的分析还是错误的，于是我索性把整个项目都丢给他分析试试看：

最后 cursor 的分析还是没找到问题，css 能力确实有点差。但是，我懒得跟 cursor 解析为什么 inline 元素会有一个间隔的原因了，就采用 cursor 的方案吧，顺便给它提了一个小优化建议。

看到 cursor 这么可爱，情绪价值满满的对话，你想生 cursor 的气都很难，只能莞尔一笑。

然后接着处理最后一个问题：

这里很有意思，感觉是 cursor 抽风了，它的代码改动建议完全没有任何代码改动，因为 s3 demo 的代码中传入的参数是正确的。

于是，我给它进一步的提示：

我特意给他关联了 button.css 文件，结果 cursor 还是没找到问题，再一次看出来，cursor 的 css 能力有点菜鸡。

我再尝试给他分析整个项目试试：

结果 cursor 的分析方向还是偏了。

因为时间太晚了，我着急回去，所以就不逗 cursor 玩了，直接告诉它答案：

通过我的提示，cursor 终于找到了问题根因，并给到了解决方案：

可是 cursor 选择用 css 控制位置的方案，我提出了异议，cursor 的回答真得很舒服，这认同感真得满满的。

最后，让 cursor 简单分析一下如何让项目更加干净，它也能很好地完成任务：

最后

这就是我花费不到 1 个小时的时间，实践 cursor 的整个过程，我觉得非常有意思，而且很丝滑顺畅。

我也是第一次使用 cursor，可能一些提示语还不是很精准，后面需要多加练习。最后分享一下我的几个感悟：

• 现在 AI 的优势是知识面非常广，但是深入度不够，很多细节和经验都有缺失，特别是排查问题的场景上，表现一般，只能解决通用问题，所以有时候会觉得 cursor 笨笨的。
• 很多文章吹嘘的 人人都是程序员 是扯淡的，现在的 AI 还做不到。AI IDE 利好专业程序员，不利好初级程序员，更加不利好非程序员。
• AI 最大的优势是任劳任怨、提供情绪价值、辅助工作。纵观 cursor 的所有回答，完全认同我们的指示，这就好像是一个永远不会顶撞你的、全心全意帮你工作的伙伴，这样的伙伴，谁不想要呢？

最后：用一下 cursor 吧，你会爱上它的。

----------------【END】----------------

如果你是真心喜欢前端，并相信成长，想要提升自己的话，欢迎加入之道前端学习圈子。

戳这里 免费获取 之道前端的学习资料和专属服务。