window: 1Get-ChildItem -Path . -Recurse -Directory -Filter "node_modules" | ForEach-Object { rimraf $_.FullName }

思路 我们最终的成果：左边写代码，右边实时预览 右边还能看到编译后的代码 编译思路 用户输入代码 使用 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插件 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-react-compone ...

关键字 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：指定多个元素的多 ...