---

前言

在掘金买了光神的《React通关秘籍小册》也有一段时间了，搁着买了以后，收藏吃灰着，平时大多用的vue技术栈，之前用react 还是class组件写法，这次尝试下react hook写法。其中小册更新了react-playground，类似vue-palyround ，更加来了兴致就搞起来了。

---

1. 搭建react 开发环境

1.1 vscode workspace
区分react 与 vue的开发环境

1.2 npx 快速创建项目

npx create-vite

1.3 安装vscode 插件

1.4 运行npm run dev 报错

因为一开始node版本用的是v14.16.0 ,使用 nvm 切换node版本 到v18.20.0 后,重新npm run dev 报错解决

2、react hooks 知识

react hooks 🚀🚀🚀

3. 目标：跟着小册实现 react-playground

3.1 整体布局

初始化项目

项目中 package.json 文件

使用Alloment 来实现左右分屏的拖拉功能

Alloment 🚀🚀🚀

效果：实现左右分屏

3.2 代码编辑器

Monaco Editor

微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode。Monaco Editor 插件通常以 @monaco-editor/react 或 @monaco-editor/core 等形式在 npm 上发布，可以根据项目需求选择合适的版本进行安装和使用。通过 Monaco Editor，可以为 Web 应用程序添加一个功能强大且用户友好的代码编辑器。

@monaco-editor/react 🚀🚀🚀

安装

npm install @monaco-editor/react
or
yarn add @monaco-editor/react

运行ok。

但是ts提示报错，需要修改一下ts配置就行

接着，使用 @typescript/ata 这个包来解决引入第三方包是没提示的问题。这里用到
@typescript/ata 🚀🚀🚀 ，ata 是 automatic type acquisition 自动类型获取。它可以传入源码，自动分析出需要的 ts 类型包，然后自动下载。

结果：能获取到类型了

3.3 实现了多文件的切换

用 useContext 来共享数据。

在React中，Context API是一种非常有效的方式来在多个组件之间共享数据。它允许你跨层级传递数据，而无需手动地将props逐层传递下去。这对于管理全局状态特别有用。

在这个项目中：

全局状态管理：使用 Context API 存储和管理应用的全局状态，如文件列表（files）和当前选中的文件名（selectedFileName）。

封装 Context.Provider：创建一个封装的 Context.Provider 组件，用于注入初始文件数据和相关操作方法。

文件列表渲染：在文件名列表组件（FileNameList）中，从 Context 中读取文件数据并渲染文件列表。

文件切换：用户点击不同的标签（tab）时，更新 selectedFileName 状态，从而更改编辑器中显示的文件内容。

优化 tab的样式，抽取FileNameItem 组件

用到classnames 🚀🚀🚀
classnames 是一个流行的 JavaScript 库，用于条件性地组合类名。在 React 应用程序中，它可以根据组件的状态或属性动态地应用 CSS 类名。

效果：

滚动条样式调优：
这里可以直接Duplicate element 拷贝多个file tab，直到出现滚动条，重写样式优化。

Eidtor中onEditorChange 调用比较频繁，添加debounce优化：

3.4 实现编译以及在 iframe 里预览

如何引入编辑器里写的 ./Aaa.tsx 这种模块，如何引入 react、react-dom 模块，分别用 Blob + URL.createBlobURL 和 import maps + esm.sh 来实现。

@babel/standalone 的一些主要用途

浏览器中的代码转译：在浏览器中直接运行 Babel 来转译 ES6+ 代码为向后兼容的 JavaScript 代码，以便在旧版浏览器中运行。

无需服务器端设置：不需要服务器端的 Babel 配置或构建步骤，可以直接在客户端进行代码转换。

即时转换：可以实现即时的代码转换，例如在用户输入代码时立即显示转换后的代码。

教育工具：作为教育工具，帮助开发者理解 Babel 是如何工作的，以及它是如何将现代 JavaScript 代码转换为旧版浏览器兼容的代码。

简化部署：对于简单的项目或原型，可以简化部署流程，避免复杂的构建和转译步骤。

处理成 Blob + URL.createBlobURL 和 import maps + esm.sh

结果：iframe 加载失败，看下了有一些是404 的加载失败。

换了下网络，404的问题消除了，但预览效果还是没出来，改了编辑器的代码就出来了

成功✌️✌️✌️

下集再跟着小册实现 文件增删改，错误优化等。

3.5 代码优化

4. 附录

4.1 vue-playground

vue-playground 是一个在线的 Vue.js 编辑器，它允许开发者在浏览器中编写和运行 Vue.js 代码，无需安装任何软件或设置本地开发环境。这种在线编辑器非常适合快速原型设计、学习 Vue.js 的新特性、分享代码片段或进行简单的实验。

vue-playground 🚀

主要特点：

1. 实时预览：vue-playground 提供实时的代码编辑和预览功能，你可以即时看到代码更改的效果。
2. 版本支持：支持不同版本的 Vue.js，包括 Vue 2 和 Vue 3，可以根据需要选择。
3. 组件支持：允许你创建和编辑 Vue.js 组件，并在沙箱环境中测试它们。
4. 代码共享：你可以保存项目并通过 URL 分享给他人，方便团队协作或在线讨论。
5. 扩展支持：一些在线编辑器还支持安装额外的插件或库，以便更好地模拟真实开发环境。
6. 文档链接：通常提供直接链接到 Vue.js 官方文档的选项，方便快速查找相关信息。
7. 多文件编辑：支持同时编辑多个文件，如 .vue 单文件组件、.js 文件等。

使用场景：

• 学习和实践：对于初学者来说，vue-playground 是一个很好的起点，可以快速上手 Vue.js 的基础知识。
• 快速原型设计：开发者可以使用它快速构建小规模的原型，以便展示概念或功能。
• 代码分享：可以轻松地与同事或社区成员分享代码片段，便于讨论和协作。

使用方法：

1. 访问网站：直接访问 vue-playground 的网址。
2. 选择 Vue 版本：根据需要选择 Vue 2 或 Vue 3。
3. 编写代码：在编辑器中编写 Vue.js 代码。
4. 查看效果：编辑器会自动显示代码的实时预览效果。
5. 保存和分享：保存项目并获取一个可分享的 URL。

注意事项：

• 限制：在线编辑器通常有一些限制，如文件大小、运行时间等，不适合大型项目。
• 安全性：尽管在线编辑器很方便，但对于涉及敏感信息的项目，最好还是使用本地开发环境。

vue-playground 是一个非常实用的工具，可以帮助开发者更快地学习 Vue.js 并进行实验。如果你还没有尝试过，不妨访问其官网并开始探索 Vue.js 的强大功能吧！