npm install @types/react @types/react-dom

# 安装 webpack
npm install webpack webpack-cli --save-dev
# 安装 TypeScript 编译器和 loader
npm install --save-dev typescript ts-loader

plugin
├── code.js
├── manifest.json
├── package.json
└── ui.html

npx tsc --init

touch webpack.config.js

plugin
├── /src
    └── code.js
├── manifest.json
├── package.json
├── package-lock.json
├── webpack.config.js
├── tsconfig.json
└── ui.html

{
	"version": "1.0.0",
	"description": "",
	"main": "code.js",
	"scripts": {
	  "test": "echo \"Error: no test specified\" && exit 1",
	  "build": "webpack"
	},
	"devDependencies": {
		"@jsdesigndeveloper/plugin-typings": "^1.0.12",
		"@types/node": "^16.7.1",
		"css-loader": "^6.2.0",
		"html-webpack-inline-source-plugin": "0.0.10",
		"html-webpack-plugin": "^5.3.2",
		"style-loader": "^3.2.1",
		"ts-loader": "^9.2.5",
		"typescript": "^4.3.5",
		"url-loader": "^4.1.1",
		"webpack": "^5.51.1",
		"webpack-cli": "^4.10.0"
	},
	"dependencies": {
		"@types/react": "^19.0.8",
		"@types/react-dom": "^19.0.3",
		"react": "^19.0.0",
		"react-dev-utils": "^12.0.1",
		"react-dom": "^19.0.0"
	}
}

{
  "compilerOptions": {
    "target": "es6", // 编译后的代码将符合 ES6 (ES2015) 标准。
    "jsx": "react", // 将 JSX 转换为 React.createElement 调用。
    "noEmit": false, //编译器会生成编译后的 JavaScript 文件。如果设置为 true，则只进行类型检查，不生成输出文件。
    "typeRoots": [ // 类型定义文件（.d.ts 文件）的查找路径
      "./node_modules/@types",
      "./node_modules/@jsdesigndeveloper"
    ]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"] // 需要编译的文件或目录。
}

// 通过 React 实现了一个简单的表单，允许用户输入矩形的数量并触发创建矩形的操作。
import * as React from 'react' // React 核心库，用于构建组件。
import * as ReactDOM from 'react-dom' // 用于将 React 组件渲染到 DOM 中。
import './ui.css' //  引入样式文件，用于美化 UI。

declare function require(path: string): any // 这是一个 TypeScript 声明，用于告诉编译器 require 函数的存在。通常用于加载静态资源（如图片、字体等），但在这里并未实际使用。

class App extends React.Component {
  textbox: HTMLInputElement // 一个类属性，用于保存输入框的 DOM 元素引用。

  countRef = (element: HTMLInputElement) => { // 一个回调函数，用于绑定输入框的 DOM 元素。当输入框渲染完成后，会将其默认值设置为 5，并保存到 textbox 属性中。
    if (element) element.value = '5'
    this.textbox = element
  }

  onCreate = () => { // 点击“创建”按钮时触发的函数。
    const count = parseInt(this.textbox.value, 10) // 从输入框中获取用户输入的值（矩形数量）。
    parent.postMessage({ pluginMessage: { type: 'create-rectangles', count } }, '*') // 向 JSD 插件主逻辑发送消息，消息类型为 create-rectangles，并传递 count 参数。
  }

  onCancel = () => { // 点击“取消”按钮时触发的函数。
    parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*') // 向 JSD 插件主逻辑发送消息，消息类型为 cancel。
  }

  render() { // 渲染组件的 UI。
    return <div>
      <h2>创建矩形</h2>
      <p>数量： <input ref={this.countRef} /></p>
      <button id="create" onClick={this.onCreate}>创建</button>
      <button onClick={this.onCancel}>取消</button>
    </div>
  }
}

//---
ReactDOM.render(<App />, document.getElementById('react-page')) // 将 App 组件渲染到 DOM 中，挂载到 id 为 react-page 的元素上。
//---
// 对于 React 18+，你需要使用 createRoot() 替换 ReactDOM.render()：
// 替换如下
// import { createRoot as createReactRoot } from 'react-dom/client';

// function createRoot(element: HTMLElement) {
//   return createReactRoot(element);
// }
// root.render(<App />)

<div id="react-page"></div>

{
  "name": "your_plugin_name",
  "id": "your_plugin_id",
  "api": "1.0.0",
  "main": "dist/code.js", // code.js 的位置
  "ui": "dist/ui.html" // ui.js 的位置
}

pnpm run build