工具的介绍

实现这一切的第一步是 node.js的实现这个是的下载的，可以在node.js官网去下载，最好的就是下载18 以后的版本，这个和后面的vite有关，vite可以去看vite的文档，是vue的作者写的。

这里需要命令的实现我把命令列在下面。

1
2
3
$ npm config set registry https://registry.npmmirror.com

$ npm install -g cnpm --registry=https://registry.npmmirror.com

这个是npm的换国内的mirror。

接下来是我们的Vite的工具，这个工具是为了高效的创建react框架，这完全不需要自己来弄，因为这些机械的动作现在越来越复杂了，其实完全不需要人来做这些事情。

1
$ npm create vite@latest my-vue-app -- --template vue
查看 [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) 以获取每个模板的更多细节：`vanilla`，`vanilla-ts`，`vue`，`vue-ts`，`react`，`react-ts`，`react-swc`，`react-swc-ts`，`preact`，`preact-ts`，`lit`，`lit-ts`，`svelte`，`svelte-ts`，`solid`，`solid-ts`，`qwik`，`qwik-ts`。

接下来的就按照命令行提示的做就OK了。

这里有个YouTuber讲这个框架。虽然我不觉的视频学习很高效但是，对于复杂的环境的配置，尤其是Windows这一方面的配置，是很复杂的，也是很不高效的。所以在这里按照视频里来做也没什么不好的。

当然最重要的还是react的学习这里附加啦react的网址。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function Square({ value }) {
  return <button className="square">{value}</button>;
}

export default function Board() {
  return (
    <>
      <div className="board-row">
        <Square value="1" />
        <Square value="2" />
        <Square value="3" />
      </div>
      <div className="board-row">
        <Square value="4" />
        <Square value="5" />
        <Square value="6" />
      </div>
      <div className="board-row">
        <Square value="7" />
        <Square value="8" />
        <Square value="9" />
      </div>
    </>
  );
}

props 中大概有的思想，一定是泛型编程了。是函数对函数的调用。

当你单击它的时候，Square 组件需要显示“X”。在 Square 内部声明一个名为 handleClick 的函数。然后，将 onClick 添加到由 Square 返回的 JSX 元素的 button 的 props 中：

1
function Square({ value }) {  function handleClick() {    console.log('clicked!');  }  return (    <button      className="square"      onClick={handleClick}    >      {value}    </button>  );}

function handleClick() { console.log(‘clicked!’); and onClick={handleClick}

下一步，我们希望 Square 组件能够“记住”它被单击过，并用“X”填充它。为了“记住”一些东西，组件使用 state。

state – 使用狀態

让我们将 Square 的当前值存储在 state 中，并在单击 Square 时更改它。

1
2
3
4
import { useState } from 'react';
function Square() {  
  const [value, setValue] = useState(null);  
  function handleClick() {    //...

value 存储值，而 setValue 是可用于更改值的函数。

传递给 useState 的 null 用作这个 state 变量的初始值，因此此处 value 的值开始时等于 null。

1
function Square() {  const [value, setValue] = useState(null);  function handleClick() {    setValue('X');  }  return (    <button      className="square"      onClick={handleClick}    >      {value}    </button>  );}

每个 Square 都有自己的 state：存储在每个 Square 中的 value 完全独立于其他的 Square。当你在组件中调用 set 函数时，React 也会自动更新内部的子组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { useState } from 'react';

function Square() {
  const [value, setValue] = useState(null);

  function handleClick() {
    setValue('X');
  }

  return (
    <button
      className="square"
      onClick={handleClick}
    >
      {value}
    </button>
  );
}

export default function Board() {
  return (
    <>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
    </>
  );
}