React JSX语法简介

JSX是一种类似XML的标签语法，用来简化代码，我们可以不使用JSX，但了解并使用也没什么坏处：）

在React中，JSX是一个使用 React.createElement() API的快捷方式，代码看起来更象一个UI组件。

每个标签，比如 <View />, 被转换成一个 React.createElement() 调用。而其中包含的attributes则成为实例化组件对象的props。属性（Attributes）可以是字符串比如 foo='hello'，或者使用大括号包含起来的内嵌JS表达式，比如 bar={baz}，baz将引用变量baz。

标签可以是自闭合的，比如 <View />，或者使用一个开始和关闭标签，如 <View></View>。

要包含子元素，得使用开始和关闭标签，这样才能把子元素放进去。

JSX代码示例如下：

const a = <View />

const b = (
  <View
    foo='hello'
    bar={baz}>
    <Text>42</Text>
  </View>
)

使用Babel编译后的JS代码如下：

var a = React.createElement(View, null);

var b = React.createElement(
  View,
  {
    foo: 'hello',
    bar: baz },
  React.createElement(
    Text,
    null,
    '42'
  )
);

你可以自己在线试试看（提示：点击JS面板设置中的编译按钮

，可以看到编译后的代码）。