前语

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

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

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

从需求到代码完成能够发现,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.

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

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

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

可是忽略了 key 的问题。

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

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

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

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

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

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

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 来完成,代码会经过判断新增类名的方法来操控款式,没有运用行内款式的方法,感觉挺强的。

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

当没有人赢的时分,提示信息说是一个平局,很好地完成了。

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

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

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

展现每步棋子位置的需求完成有 bug,位置取值有误,应该是需求描绘大将 movecolrow 相关在一起的原因,可是解构写代码的方法还是很不错的。

Wrapping up

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