「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」
教程地址:zh-hans.reactjs.org/tutorial/tu… 今天依然是被react折磨的一天,也不知道为什么SharePoint要用react. 继续昨天未完成的操作,选择在本地构建环境.
环境需求
- 1.较新的node.js版本
node -v就可以看到自己装的是什么版本啦 - 2.创建react APP
npx create-react-app my-app
cd my-app
npm start
我用的Mac 在终端执行的执行完的结果如图所示
顺利打开,说明它还挺顺利的.
跟随教程的脚步 删除src文件架下的文件
cd my-app
cd src
# 如果你使用 Mac 或 Linux:
rm -f *
# 如果你使用 Windows:
del *
# 然后回到项目文件夹
cd ..
在
src/ 文件夹中创建一个名为 index.css 的文件，并拷贝这些 CSS 代码。
在 src/ 文件夹下创建一个名为 index.js 的文件，并拷贝这些 JS 代码。
拷贝以下三行代码到 src/ 文件夹下的 index.js 文件的顶部：
跟随教程的指示做 在项目文件夹下 执行
npm start会出现一个井字棋棋盘
一切顺利 要是工作也能像教程一样这么顺利就好了
分析一下初始代码 ,看到他的 public文件夹下的index.html 就是有一个div id 叫root
css 忽略不看 最重要的就是这个index.js文件了.
我们可以看到有三个class 有三个组件
- Square
- Board
- Game
看了半天 才发现组件是<组件 />这么调用的 这个样例代码定义了一个叫game 的组件,在里面调用broad组件,在board组件里面写了个方法生成反复调用生成九个块,九个块全是调用的square 全是按钮全是为了以后交互.
通过 Props 传递数据
修改了board组件的return <Square value={i} />;
修改 Square 组件中的 render 方法,{this.props.value},真的好酷啊
看下面这个地方,也就是说它把board组件里面的值给到 square组件里面. 教程上说把一个 prop 从父组件 Board “传递”给了子组件 Square。在 React 应用中，数据通过 props 的传递，从父组件流向子组件
今天依然觉得 Typescript + react = 离谱 工作使人苦恼
