Taro Introduction

Introduction

Taro is an open cross-platform and cross-framework solution that supports the use of frameworks such as React/Vue/Nerv to develop WeChat / Jingdong / Baidu / Alipay / ByteDance / QQ mini program / H5 / RN and other applications.

Nowadays, there are a variety of ends in the market, such as Web, React Native, and WeChat mini-program. When the business requirements are required to perform on different ends at the same time, the cost of writing multiple sets of code for different ends is obviously very high, so the ability to adapt to multiple ends by writing only one set of code is extremely necessary.

Features

Multi-end conversion support

Taro 3 can support conversion to H5, React Native and any mini-program platform.

• H5
• ReactNative
• WeChat Mini Program
• Jingdong Mini Program
• Baidu Smart program
• Alipay Mini Program
• ByteDance Mini Program
• QQ Mini Program
• DingTalk Mini Program
• Enterprise WeChat Mini Program
• Alipay IOT Mini Program

Framework Support

The full React / Vue / Vue3 / Nerv development experience is available in Taro 3, as described in.

• Basic Tutorial - React
• Basic tutorial - Vue
• Basic tutorial - Vue3

React

Sample Code

import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
  state = {
    msg: 'Hello World！'
  }

  componentWillMount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='index'>
        <Text>{this.state.msg}</Text>
      </View>
    )
  }
}

Vue

Sample Code

<template>
  <view class="index">
    <text>{{msg}}</text>
  </view>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World！'
    }
  },
  created () {},
  onShow () {},
  onHide () {}
}
</script>

Taro UI

Taro 3 can only be used with taro-ui@next version

Installation command: npm i taro-ui@next

A multi-end UI component library based on the Taro framework.

Taro UI Features.

• Based on Taro development UI components
• A set of components can be adapted to run on multiple ends (ReactNative end does not support)
• Provides a friendly API for flexible use of components

Learning Resources

[Information] Taro Team Blog

[Tutorial] 5 minutes to get started with Taro development

[Video] 5 minutes to get started with Taro development mini program

[Nuggets booklet] Taro multi-end development implementation principles and practice

For more resources, please click to view More Resources, if you have good resources or tutorials to share with everyone, please feel free to submit resources to awesome-taro.

Use Cases

Taro is already in use in our production environment, and the industry is using Taro extensively to develop multi-site applications.

To see more cases, please click

We are looking for more excellent cases, welcome to click to submit