Choosing Nanachi for React to Mini‑Program Conversion: Comparison, Challenges, and Implementation

Background

Since the emergence of WeChat mini‑programs, they have become a dominant "super‑app" component due to limited mobile storage and massive traffic, prompting teams to seek efficient ways to reuse existing React/H5 code for mini‑programs.

Cross‑Platform Framework Comparison

A table compares KBone, Remax, Taro, and Nanachi on dimensions such as cross‑platform support, DSL, development efficiency, package size, ability to mix with native projects, and coding constraints. Only Nanachi supports mixing with native projects and produces a relatively small bundle (~40 KB).

Portability and Package Size

Portability is defined as the ability of converted code to coexist with native mini‑program pages; this requirement eliminates Remax and Taro. Nanachi’s static conversion yields the smallest package, making it the optimal choice under the given constraints.

Nanachi Overview

Nanachi is a static translation framework that compiles React components into mini‑program pages, providing platform‑specific core libraries (ReactWx, ReactBu, etc.), default components, on‑demand business code packaging, and API shims. It leverages React’s component model to overcome mini‑program template limitations.

Existing Problems

Conversion limitations include: only this.props.xx or this.state.xx can be transferred; dynamic component props and refs are unsupported; strict file structure and naming rules are required; and extensive compile‑time condition handling is needed.

Conversion Plan and Implementation

The solution enhances Nanachi’s core library and adds static translation plugins to support native‑project mixing, reducing framework constraints.

Overall Translation Process

1. Collect dependency tree based on user‑specified page paths. 2. Perform static compilation to generate code conforming to Nanachi’s specifications. 3. Convert the compiled pages into Mini‑Program Page API parameters and merge them with native pages.

Static Translation Plugins

Plugins analyze React source code using Babel, enforce coding standards, replace dynamic variables with observable ones, extract dynamic components, handle refs, and apply tree‑shaking to eliminate redundant code.

Project Effect

After translation, the same codebase runs on mini‑program, React Native, and H5, with screenshots demonstrating consistent UI across platforms.

Conclusion

The article shares the selection criteria, challenges, and solutions for converting H5/React to mini‑programs, emphasizing the trade‑off between development efficiency and runtime performance, and noting that while Nanachi offers strong static conversion, newer tools like Taro 3 may impose fewer constraints.