JDReact Multi‑Platform Conversion Engine: Principles and Usage for Bidirectional Mini‑Program and React Native Transformation

JDReact is a multi‑platform development framework launched by JD.com’s CMO system, currently supporting over 100 business lines and millions of daily active users, and providing APIs and a powerful IDE.

The article introduces the bidirectional conversion tool that can transform existing WeChat mini‑programs into JDReact applications and vice‑versa, enabling low‑cost migration across platforms.

Three typical scenarios are described: (1) migrating a developed mini‑program to an app, (2) migrating an existing app to a mini‑program, and (3) choosing technology for new projects that need both app and mini‑program versions.

An effect demonstration shows the conversion of the “值得买京东优选” mini‑program into a JDReact version running in the JD mobile client.

The conversion principle relies on the fact that both React and mini‑programs express UI as ui = f(data) with data‑driven updates ( setData vs setState ). JSX (React) and WXML (mini‑program) are parsed into ASTs using babel‑parse , traversed with babel‑traverse , and regenerated with babel‑generator , applying rules such as mapping wx:for to Array.map and wx:if to logical expressions.

Component alignment is achieved by implementing counterpart component libraries on both sides (e.g., FlatList, JDImage) so that equivalent components exist in mini‑programs and React Native.

Lifecycle methods and events are synchronized by matching similar hooks (e.g., ready ↔ componentDidMount ) and simulating missing ones; event bindings like bindtap map to onPress .

Style conversion addresses differences between mini‑program CSS (WXSS) and React Native’s StyleSheet, handling selector translation, property name conversion (e.g., border-width → borderWidth ), shorthand expansion, and default value mismatches.

The article also lists limitations such as AST’s inability to resolve runtime values, unsupported high‑order React components, package size constraints for mini‑programs, and directional scrolling differences.

Finally, the team invites collaboration and provides contact information for technical discussion and business cooperation.