使用 Cursor 智能编辑器改进 React 官网井字棋游戏

7,761 阅读2分钟

前言

接上文,近期 React 发布了新官网并且 Cursor 编辑器也来了。
那么,使用 React 官网井字棋游戏优化点向智能编辑器下需求会是什么结果呢(已实现示例的基础上)?

1、For the current move only, show “You are at move #…” instead of a button.

1.png

从需求到代码实现可以发现,jumpTo 方法被移除了,但是已实现用当前信息替换了 move 的按钮。 接下来,将报错提交,会被如何处理呢?

Uncaught ReferenceError: jumpTo is not defined

直接将 jumpTo 替换为 setCurrentMove,解决 bug 的能力还挺厉害的。

2、Rewrite Board to use two loops to make the squares instead of hardcoding them.

2.png

关键字 two loops 生成时使用了两个 for 循环,想着使用 map 来进行生成,下新需求,换成 map 的方式,代码看下图。

2-1.png

但是忽略了 key 的问题。

Warning: Each child in a list should have a unique "key" prop.

下需求修改,新增 key 如下:

key.png

3、Add a toggle button that lets you sort the moves in either ascending or descending order.

这个需求需要说明按钮的位置,要不然做不好,给它添加在 game-info 的位置,完成度挺高的。

3.png

4、When someone wins, highlight the three squares that caused the win (and when no one wins, display a message about the result being a draw).

这个需求高亮下的时候说通过 style 来实现,代码会通过判断新增类名的方式来控制样式,没有使用行内样式的方式,感觉挺强的。

4.png

当没有人赢的时候,提示信息说是一个平局,很好地实现了。

4-1.png

5、Display the location for each move in the format (col, row) in the move history list.

5.png

展示每步棋子位置的需求实现有 bug,位置取值有误,应该是需求描述上将 movecolrow 关联在一起的原因,但是解构写代码的方式还是很不错的。

Wrapping up

需求大体上完成度都挺高的,做的不好也是需求下的不好(多想想自己的问题),它真的好强,一种和 AI 进行结对编程的感觉。 同时,如果在空白文档上让它用 React 生成井字棋,实现的是 class 的写法,可能数据模型是旧的版本,当然也可以通过下需求让其修改为 function 的写法。 成天被下需求的我们,快去体验下需求的快乐吧,have fun ~