思路 我们最终的成果：左边写代码，右边实时预览 右边还能看到编译后的代码 编译思路 用户输入代码 使用 Babel 将 TSX/JSX 代码转换为 ES Modules Blob URL 处理代码加载 babel插件替换import语句 import maps + esm.sh引用react库 通过 iframe 运行代码并渲染 包安装123cnpm i --save @babel/standalonecnpm i --save-dev @types/babel__standalonecnpm i --save-dev @types/babel__core 编译1234567891011121314151617181920212223242526272829303132333435363738394041424344import { useRef, useState } from 'react'import { transform } from '@babel/standalone' ...

关键字 Storybook：组件文档 click-to-react-component：定位组件 dnd：拖拽高阶组件 allotment：拆分窗格 分配-NPM — allotment - npm @babel/standalone：babel的浏览器版本 @types/babel__core：babel插件 reactflow click-to-react-componentReact19用不了 安装1npm install --save-dev click-to-react-component 引用1234567891011121314// main.tsximport React from 'react'import ReactDOM from 'react-dom/client'import App from './App.tsx'// @ts-ignoreimport { ClickToComponent } from 'click-to-re ...

关键字 sass + classnames CSS in JS styled-components css module tailwind sass + classnames安装12cnpm install --save sasscnpm install classnames 介绍 当 className 的确定需要一段复杂计算逻辑的时候，就用 classnames 这个包。 使用12345678910111213141516171819202122232425262728293031.calendar-month { &-body { &-row { height: 100px; display: flex; } &-cell { flex: 1; border: 1px solid #eee; //padding: 10px; color: #ccc; overflow: hidden; &- ...

关键字 react-spring react-transition-group Transition、CSSTransition、TransitionGroup、SwitchTransition @use-gesture/react 不支持react19 react-spring/web官方文档：react-spring 安装1npm install --save @react-spring/web 使用react-spring 主打的是弹簧动画，就是类似弹簧那种回弹效果。 只要指定 mass（质量）、tension（张力）、friction（摩擦力）就可以了。 mass 质量：决定回弹惯性，mass 越大，回弹的距离和次数越多。 tension 张力：弹簧松紧程度，弹簧越紧，回弹速度越快。 friction：摩擦力： 可以抵消质量和张力的效果 react-spring 有不少 api，分别用于单个、多个元素的动画： useSpringValue：指定单个属性的变化。 useSpring：指定多个属性的变化 useSprings：指定多个元素的多 ...

组件打包前置知识1. 模块规范在 JavaScript 生态里，代码组织方式有不同的模块化规范，最常见的有以下三种： CommonJS（CJS） require() 语法 主要用于 Node.js 运行环境 代码示例： 12const lodash = require('lodash');console.log(lodash); 缺点：不适用于浏览器，不能 Tree Shaking（优化打包时移除未使用的代码）。 ES Modules（ESM） import/export 语法 现代 JavaScript 规范，适用于浏览器和 Node.js 代码示例： 12import { debounce } from 'lodash';console.log(debounce); 优势：支持 Tree Shaking，适合前端打包优化。 UMD（Universal Module Definition） 兼容 CommonJS、AMD（另一种浏览器模块规范）和全局变量 适用于在 <script> ...

关键字 Calendar组件 Icon图标组件 Space间距组件 Message全局提示组件 Popover气泡组件 onBoarding引导组件 Upload拖拽上传组件