Converting React Class Components to Miniapp Component Calls Using Babel Plugins

Author 钟钦成 (aka 司徒正美) is a well‑known frontend expert in China, author of JavaScript Framework Design , and creator of the Avalon/Anu frameworks. This is the second part of a series that presents a reliable approach—more stable than JD's Taro—to convert React code for WeChat Mini‑Programs.

WeChat Mini‑Programs use a configuration‑object model that hides the prototypes of Page , App , and Component , exposing only three factory methods, which makes inheritance impossible and forces developers to declare dependencies in a JSON file.

Example Mini‑Program component definition:

Component({
  properties: {},
  data: {},
  onClick: function() {}
})

In React, properties and data correspond to defaultProps and propTypes . The article shows how to parse a class such as:

import { Component } from "./wechat";
class AAA extends Component {
  constructor(props) { super(props); this.state = {}; }
  static propTypes = {};
  static defaultProps = {};
  onClick() {}
}
export AAA;

To transform this code, a custom Babel plugin ( miniappPlugin ) is created. The plugin uses babel-traverse to walk the AST and defines handlers for ClassDeclaration , ClassExpression , ImportDeclaration , ExportDefaultDeclaration , and ExportNamedDeclaration . Import and export statements are removed because the Mini‑App runtime does not understand them.

The core transformation replaces a class definition with a call to Component . During the first AST pass, the plugin records the class name, its super‑class (Component, Page, or App), and the component type. In the second pass, it builds an object expression containing the collected methods and static properties, then creates a call expression:

Component({
  constructor: function(){},
  render: function(){},
  onClick: function(){}
});

Method extraction is handled by a ClassMethod visitor that converts each class method into an ObjectProperty with a functionExpression . The plugin also normalises constructor handling by introducing an onInit helper that moves this.state to this.data , matching Mini‑Program conventions.

State updates are transformed by a CallExpression visitor that renames setState to setData when the component type is Component :

if (callee.property && callee.property.name === "setState") {
  callee.property.name = "setData";
}

After these transformations, the React class is successfully turned into a Mini‑Program component definition. Remaining tasks include handling component imports to populate the usingComponents field in the component's JSON and converting the render method into a .wxml template, which will be covered in a future article.