react项目

Vue Playground具有新增、删除文件，修改文件名的功能，接下来我们也实现一下 修改文件名称 在FileNameList组件添加一个编辑的状态，来判断展示输入框还是展示名称 在blur事件中同

当点击FileNameList组件中文件名称时，Editor组件会显示对应文件内容，Preview组件会渲染对应内容 添加zustand 如何可以让多个组件共享一份数据？ 可以使用context、re

创建一个react+typescript项目 布局 首先从布局开始，可以看到Vue Playground可以拖动滚动条左右拖动控制大小 可以使用allotment 这个组件 安装 Vue Playgr

实现原理 怎么能实现一个类似Vue Playground呢 从布局来看，左边为代码输入区域，右边为预览区域，我们一个个来看 代码编写区域 借用了@monaco-editor/react，它把monac

项目地址 jsx在babel编译后的结果是React.createElement，由createElement生成虚拟DOM React.createElement有三个参数 type props c

组件效果 在input组件基础上扩展下拉框数据展示，支持自定义筛选数据fetchSuggestions方法，自定义渲染样式renderOption方法、选中某一项数据回调onSelect 组件结构 s

组件效果 支持设置lg、sm 尺寸大小 支持设置前后缀的文字、图标 支持设置在右侧悬浮添加一个icon 组件结构 src/components/Input/input.tsx input-size-$

组件效果 支持配置line、card的tabs样式，默认为 line 可设置当前激活tabs面板的index，默认为0 点击组件触发的回调函数，返回当前tabs的索引 组件结构 Tabs src/co

组件效果 支持横向、纵向菜单类型，禁用配置 横向houver出下拉框，竖向点击出下拉框 组件结构 menu src/components/Menu/menu.tsx w-design-menu、外部传

组件效果 支持可配置title、是否显示关闭icon 传入关闭回调，关闭alert时触发的事件 类型四种可选针对四种不同的场景 组件结构 src/components/Alert/alert.tsx

Icon组件 Icon组件是基于 react-fontawesome 安装插件 @fortawesome/fontawesome-svg-core是Font Awesome 的 SVG 核心库 @fo

组件效果 size控制不同尺寸（lg，sm）的按钮，type控制不同类型（primary，default，danger，link）的按钮，继承原生button、a标签的属性、事件 样式 公共样式 sr

页面效果 用户信息上下文 返回一个userInfo、设置userInfo函数，为了缓存userInfo 对象、函数通过userContext传递需要加useMemo、useCallback，防止多次执

创建项目 安装包 src\.env nest-cli.json asssets是指定build时复制的文件，watchAssets是在assets变动之后自动重新复制 src\modules\redi

页面效果 实现使用手机号+验证码登录，自动登录 页面结构 使用Ant Design Pro Components的LoginFormPage组件 登录使用login接口、发生短信使用sendCodeM