Taro — React-Based Cross-Platform Framework for Mini Programs and Mobile

Introduction

Taro is an open-source cross-platform framework by NervJS (JD.com) that allows developers to write applications using React and JSX syntax, then compile them to WeChat, Alipay, Baidu, ByteDance mini-programs, H5 web apps, and React Native mobile apps from a single codebase.

What Taro Does

• Compiles React/JSX components into mini-program template syntax
• Supports React, Vue 2, Vue 3, and Preact as view layers
• Targets 7+ mini-program platforms plus H5 and React Native
• Provides Taro UI component library for consistent cross-platform styling
• Offers a plugin system for extending the compilation pipeline

Architecture Overview

Taro 3 uses a runtime-heavy approach: instead of compile-time transformation, it implements a lightweight virtual DOM that drives each platform's native rendering layer. This means standard React patterns (hooks, context, refs) work without compiler restrictions. The CLI orchestrates builds via Webpack or Vite with platform-specific plugins.

Self-Hosting & Configuration

• Install the CLI globally and scaffold via taro init
• Configure target platforms and app IDs in config/index.js
• Set design width for responsive units in project config
• Use babel-preset-taro for JSX transformation per platform
• Build production with taro build --type <platform>

Key Features

• Full React Hooks and Composition API support across all platforms
• Multi-framework support (React, Vue 2/3, Preact) in one project
• Hot module replacement during mini-program development
• Taro UI and NutUI component libraries for cross-platform UIs
• Strong TypeScript support with platform-specific type definitions

Comparison with Similar Tools

• uni-app — Vue-only, broader mini-program coverage, larger Chinese community
• React Native — Native mobile only, no mini-program compilation
• Flutter — Dart-based, superior performance but no mini-program output
• Remax — Similar React-to-mini-program approach, less actively maintained
• mpx — WeChat-focused by DiDi, narrower platform support

FAQ

Q: Can I use existing React libraries? A: Libraries relying on DOM APIs will not work in mini-programs. Pure logic and state libraries (Redux, MobX, Zustand) work across all targets.

Q: How does Taro 3 differ from Taro 1/2? A: Taro 3 switched from compile-time to runtime architecture, removing JSX restrictions and enabling full React feature support.

Q: Is there a performance penalty for the runtime approach? A: The virtual DOM adds minimal overhead. For most apps, performance is comparable to native mini-program development.

Q: Can I share code between mini-program and React Native targets? A: Yes, business logic and most components compile to both. Platform-specific APIs need conditional compilation.

Sources

• https://github.com/NervJS/taro
• https://docs.taro.zone/