JDReact Dual‑Platform Conversion Tool: Principles and Usage for WeChat Mini‑Program and JDReact

JDReact is a multi‑end development framework launched by JD Mall's front‑end product R&D department, currently supporting over 100 business lines and 15+ independent apps with a robust API and IDE.

The article introduces the dual‑direction conversion tool that can transform an existing WeChat mini‑program into a JDReact application and vice versa, enabling low‑cost migration between the two ecosystems.

Background: the idea originated from the team’s winning project in JD’s 6th Hackathon, a “one‑click mini‑program conversion tool”.

Typical scenarios covered include:

1. Migrating an already developed WeChat mini‑program to an app.

2. Migrating an existing app to a mini‑program.

3. Developing a new product where both app and mini‑program versions are needed.

Effect demonstration shows converting the “Worth Buying JD Selection” mini‑program into a JDReact version running in the JD mobile client.

Principle: both React (JSX) and mini‑program (wxml) can be expressed as ui = f(data). The conversion relies on the similarity of setData (mini‑program) and setState (React). The engine parses source code to an AST using babel‑parse, traverses and modifies it, then generates new code with babel‑generator, handling mappings such as wx:for ↔ Array.map and wx:if ↔ logical expressions.

Example code snippet:

setData(newData, cb)

setState(newState, cb)

During AST traversal, function calls in JSX are replaced by their return values, and data bindings are pre‑processed to fit mini‑program constraints.

Component alignment requires implementing counterpart component libraries on both sides (e.g., FlatList, JDImage) and mapping lifecycle methods (ready ↔ componentDidMount) and events (bindtap ↔ onPress).

Style conversion addresses differences between mini‑program wxss (full CSS) and React Native’s Yoga‑based style system, handling selector translation, property name conversion (border-width → borderWidth), and default value discrepancies.

Limitations include unsupported high‑order components, runtime‑only information that cannot be captured by static AST analysis, package size constraints for mini‑programs, and differences in scrolling and event handling.

The team invites collaboration and provides contact information for business cooperation.