跟着ut教程一步步做的，但因为是两年前的教程了，到现在（23.7.22）有些更新，所以重新梳理一下。

初始化

新建文件夹called react-pwr，打开terminal。因为国内npm有点慢所以先： npm config set registry https://registry.npm.taobao.org
npm init会生成一个package.json文件。
新建文件夹src，src里新建components和index.js
终端运行npm install --save-dev react react-dom。json文件里就增加了devDependencies的信息。当然还会出现node_modules文件夹之类的东西。
手动增加peerDependencies，复制上述devDependencies的信息。

Storybook

终端npx sb init要花一些时间，还让我选择了vite还是Webpack5，我也不记得我选了哪个TaT
然后就可以npm run storybook了。但视频中删除了其中自带的组件。
在components里新建Requirements。里面新建Requirements.jsx。内容：export const Requirements = () =>{ return (<>Hello World</>); }
同级目录新建index.js：export * from './Requirements';
在src目录下的index.js：export * from './components/Requirements';

导入组件源代码

教程附带了组件源代码，将components和style.css复制进来。（他还解释了一下，但我懒得听）
So我们现在文件目录Actually长这样：（我觉得我可能少说了什么所以直接看源代码吧嗯~ o(￣▽￣)o
其中这个Requirements.stories.js最麻烦了，因为……里面的storiesof你会发现Storybook的V7已经不用了……所以必报错。我看了好久，意思是官网的migrate命令都不管用，，不知道为啥一直跟我说unmodified。
其实最后手动改两个小地方就可以了。前面几行。

import React, { useState } from 'react';
import './styles.css';
import { Requirements } from '../components/Requirements';

//const stories = storiesOf('App Test', module);

export default {
    title: 'App Test',
    /// component: Requirements,
};

export const App = () => {
    const [valid, setValid] = useState(false);
    const [password, setPassword] = useState('');
    const [username, setUsername] = useState('');

    const passwordRequirements = [{
            text: 'Must be at least 8 characters',
            validator: (val) => val.length >= 8,
        },
        {
            text: 'Must contain at least one number',
            validator: (val) => /\d/g.test(val),
        },
        {
            text: 'Must contain at least one lower-case letter',
            validator: (val) => /[a-z]/g.test(val),
        },
        {
            text: 'Must contain at least one upper-case letter',
            validator: (val) => /[A-Z]/g.test(val),
        },
    ];

    return (
        <div className='form'>
          <h1>Signup</h1>

          <Requirements
            value={password}
            requirements={passwordRequirements}
            onValidChange={isValid => setValid(isValid)}
          />

          <input placeholder='Username' value={username} onChange={e => setUsername(e.target.value)} />
          <input placeholder='Password' type='password' value={password} onChange={e => setPassword(e.target.value)} />

          <button disabled={!valid || !username}>Sign Up</button>
        </div>
    );
};

这是它告诉我的，不是前面的migrate命令（…）而是后面的storiesof-to-csf噢！
这些命令就是没用啊为森莫555
总之官网还有很多Guide有时间再摸索一下好了~
然后官网的example也很好哇，要阅读一下！

END

应该就是这样啦！视频后面还教了Rollup发布什么的，还没看（不关心这些）

写个文章记录一下自己都看了些什么嗯嗯、

用Storybook建立一个React组件库

初始化

Storybook

导入组件源代码

END