React Web: Extending React Native to the Browser for Write‑Once‑Run‑Anywhere

Original column by Yang Qianjun – a senior front‑end engineer with eight years of experience, currently in the Qunar platform front‑end architecture team.

1 Background

Mobile development traditionally shoulders iOS, Android, and Touch, requiring three separate codebases and resulting in slow iteration and high costs.

Hybrid WebView solutions offered Write Once Run Anywhere using HTML, CSS, and JavaScript but suffered from poor performance and latency.

Facebook’s recent React Native promotes Learn Once Write Anywhere, providing a JavaScript‑based solution that delivers high‑performance native apps for both Android and iOS with reduced learning cost.

The remaining challenge is that React Native does not cover Touch and cannot run directly in browsers.

2 Implementation Mechanism

Qunar’s team deeply customizes React Native (Qunar React Native), adding many components and APIs to smooth iOS and Android platform differences, allowing core business logic to run unchanged on both platforms.

They envision a framework that also bridges Native and Web differences – this is React Web.

React Web’s design replicates React Native’s components and APIs in the browser, allowing the same business code to be built into both Native and Web versions via build tools.

3 React Web Advantages

Built‑in – React Web is bundled within React Native; creating a project requires only one react‑native node_module, no separate Native/Web setup.

High completeness – React Web implements almost all components and APIs of React Native and Qunar React Native, and the business component library react‑natie‑ui can be reused on both platforms without modification.

Compatibility – High completeness ensures strong compatibility across Web and Native; React Web has been tested on major browsers (Chrome, QQ, Safari, Android native, UC, 360, Baidu, WeChat X5, Hy WebView) to resolve browser compatibility at the framework level.

Optimization – Continuous performance tuning (animations, event response), a shared CDN for common libraries to improve load speed, and built‑in tools such as data‑mock middleware enhance the development experience.

4 Usage and Example

Long‑press the QR code below to view usage examples.

5 Summary

React Web provides a fast, low‑cost solution for reusing React Native code, greatly improving development efficiency; as optimization continues and device performance rises, its advantages will become increasingly evident and worth trying.

Feel free to reach out with questions, suggestions, or contributions.