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

> A unified development framework using React syntax to build WeChat, Alipay, and other mini-program apps plus H5 and React Native targets.

## Install

Save in your project root:

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

## Quick Use
```bash
npm install -g @tarojs/cli
taro init my-app
cd my-app
npm run dev:weapp    # WeChat Mini Program
npm run dev:h5       # Web browser
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-e467b0e8
Author: AI Open Source