JDReact Multi‑Platform Framework and Its Mini‑Program Bidirectional Conversion Engine

JDReact is a multi‑end integration development framework launched by JD.com’s front‑end product R&D department. After continuous technical improvements, it has been integrated into over 100 business lines, supports millions of daily active users, and provides a complete API set and a powerful IDE.

The article focuses on JDReact’s mini‑program bidirectional conversion tool, explaining its underlying principles and how to use it to convert an existing WeChat mini‑program into a JDReact application and vice versa, thereby achieving seamless connectivity between JDReact and the WeChat mini‑program ecosystem.

Background : The tool originated from the team’s winning project in JD’s sixth hackathon, titled “One‑Click Mini‑Program Conversion”. It addresses three typical scenarios:

Scenario 1 – An already developed WeChat mini‑program needs to be migrated to an app.

Scenario 2 – An existing app needs to be migrated to a mini‑program.

Scenario 3 – A new product is being developed with both app and mini‑program versions.

By converting JDReact applications to mini‑programs (and the reverse), developers can maintain only one codebase, reducing engineering effort and simplifying product, testing, and maintenance work.

Effect Demonstration : The article demonstrates converting the “Worth‑Buying JD Selection” WeChat mini‑program into a JDReact version that runs inside the JD mobile client.

Principle Introduction : Both React and mini‑programs can be expressed as ui = f(data) . Mini‑programs update UI via setData(newData, cb) , while React uses setState(newState, cb) . These two update mechanisms form the prerequisite for conversion. The engine parses source code into an AST using babel‑parse , traverses it with babel‑traverse , applies transformation rules (e.g., mapping wx:for to Array.map , wx:if to logical expressions), and finally generates the target code with babel‑generator .

Example code snippets used in the conversion process:

setData(newData, cb)

setState(newState, cb)

return <View />

Component Alignment : To achieve cross‑platform compatibility, a set of JDReact components (e.g., FlatList , SectionList , JDImage , JDSwiper ) is implemented on the mini‑program side, and corresponding React Native components are provided on the RN side. Lifecycle methods (e.g., ready ↔ componentDidMount ) are mapped, and missing mini‑program lifecycles are simulated around setData calls.

Event System : Mini‑program events are based on the web model, while React Native uses its own gesture system. The engine maps events such as bindtap to onPress and adds gesture handling to RN components when needed.

Style Conversion : Converting styles is challenging because mini‑program CSS (wxss) is a superset of standard CSS, whereas React Native relies on Yoga for layout. The engine parses CSS selectors, supports around ten common selector types, and translates them into RN style objects. It also normalizes property names (e.g., border-width → borderWidth ) and expands shorthand properties (e.g., margin: 10px 0 → marginTop: 10px; marginBottom: 10px; marginLeft: 0; marginRight: 0; ).

Differences in default values (e.g., flex direction, flexShrink ) are handled by applying corrective styles so that the visual result remains consistent across platforms.

Limitations and Constraints : The engine cannot handle runtime‑only information (e.g., values resolved during execution), certain high‑order React components, or platform‑specific limits such as mini‑program package size (<2 MB) and navigation depth. These constraints are documented and alternative solutions are provided where possible.

Finally, the article invites collaboration, providing contact information for business cooperation and encouraging interested parties to reach out for joint testing and integration.