React Playground

个人技术项目
← 返回主页
用于快速构建预览React组件的纯前端项目
ReactMonaco EditorBabelTypeScriptWeb Worker

项目亮点

  • 通过Babel/standalone实现文件编译,实现babel插件修改import source
  • 使用Monaco Editor + Allotment实现网页版TypeScript编辑器
  • 通过Web Worker拆分文件编译逻辑,优化长任务性能
  • 使用iframe实现预览功能,postMessage进行错误提示
  • 支持分享链接、下载代码、主题切换等功能

使用引导

导入组件
在左侧文件树中新增组件文件或直接拖入 JSON 配置。
实时预览
编辑器保存后通过 Web Worker 编译并在预览面板即时展示。

界面预览