初识React（一）从井字棋游戏开始

最新推荐文章于 2024-08-01 18:02:23 发布

DogEgg_001

最新推荐文章于 2024-08-01 18:02:23 发布

阅读量817

点赞数 15

分类专栏： React 文章标签：前端 react.js

本文链接：https://blog.youkuaiyun.com/DogEgg_001/article/details/136988898

版权

本文讲述了作者学习React过程中，通过创建井字棋游戏实例，介绍了jsx语法、函数式编程、props传递、useStateHook、列表渲染、事件处理等内容，展示了React与Vue的不同之处。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面：

磨磨唧唧了好久终于下定决心开始学react，刚刚接触感觉有点无从下脚...新的语法新的格式跟vue就像两种物种...倒是很好奇路由和store是怎么实现的了~v~，一点一点来吧！！！

(一)创建项目

使用vite创建

npm create vite

选择react项目，欧啦现在开始：

main.tsx文件：

还是熟悉的味道，鉴于我还搞不清楚组件和路由，就直接在app.tsx里面开干

(二)制作井字棋游戏

1. 搭建九宫格形状

(1)用Square组件实现小格子

function Square() {
    return (
      <>
        <button className='square'>x</button>
      </>
    )
  }

(2)使用数组map方法渲染出九个Square组件

不同于vue的v-for，react使用数组方法实现列表的渲染

function Board() {
    // 存储每个格子的值 初始化为空
    const squares = new Array(9).fill('')
    const listSquare = squares.map((value, index) => (
      <Square key={index} />
    ))

    return (
      <>
        {listSquare}
      </>
    )
  }

(3)通过props传递数据

将square组件的值存储在Board里面，通过props传值

function Square({ content }) {
    return (
      <>
        <button className='square'>{content}</button>
      </>
    )
  }
function Board() {
    ...
    const listSquare = squares.map((value, index) => (
      <Square key={index} content={value} />
    ))
    ...
  }

最低0.47元/天解锁文章