使用 JSX

请观察以下代码：

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
class Home extends Component {
  render () {
    return (
      <View>Hello World!</View>
    )
  }
}

必须声明 Taro 和组件

在这段代码中，大写开头的 JSX 标签 View 表示它是一个 Taro 组件，尽管在整段代码中，变量 View 看起来并没有被调用，但也必须从 @tarojs/components 中引入声明。变量 Taro 也是一个必须引入声明的变量，因为我们在编译期和运行时会依赖这个变量做一些特殊处理。当你引入了组件时，一定要使用，不要出现没有使用的变量。

当你只用支持微信小程序时，可以不用引入组件例如 View 这样的声明。但我们仍然强烈推荐你在顶部引入你将要使用的组件，这样编辑器/IDE 能更好地提前发现可能出现的问题，也为将来可能需要的多端转换留有余地。

首字母大写与驼峰式命名

在 Taro 中，所有组件都应当首字母大写并且使用大驼峰式命名法（Camel-Case）。
例如，下面的代码将无法按预期运行：

import Taro, { Component } from '@tarojs/taro'
// 引入一个自定义组件组件
import home_page from './page'
// 错误！组件名应该首字母大写:
class App extends Component {
  render () {
    return (
      <home_page message="Hello World!" />
    )
  }
}

为了解决这个问题，我们将 home_page 重命名为 HomePage，然后使用 <HomePage /> 引用：

import Taro, { Component } from '@tarojs/taro'
// 引入一个自定义组件组件
import HomePage from './page'
class App extends Component {
  render () {
    return (
      <HomePage message="Hello World!" />
    )
  }
}

和 React/Nerv 不一样的地方在于，Taro 不支持使用 点表示法 和运行时指定类型来引用组件，例如 <MyComponents.DatePicker /> 这样的写法在 Taro 中是无法正确编译的。