JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 它只是一种语法糖。 它是类似 HTML 标签的表达式:
<View style={styles.text}> <Text style={styles.title}> MAKE IT EASY TO DO BUSINESS ANYWHERE </Text> <Text style={styles.subtitle}> We aim to build the future infrastructure of commerce. </Text> </View>
JSX 只是 JavaScript 语法的一个语法映射。 JSX 表达式执行函数调用,我们可以看成他就是调用 createElement() 方法的快捷方式。 Babel 内置的支持 JSX 语法的编译。在代码中声明 @jsx可以定制相应的函数调用:
// Tell Babel to transform JSX into createElement() calls: /* @jsx createElement */ import {createElement} from 'rax'; <View /> // => createElement(View)
除了在代码中声明,我们可以通过在 .babelrc 中进行配置来达到相同的目的:
{ "presets": ["es2015", "stage-0", "react"], "plugins": [ ["transform-react-jsx", { "pragma": "createElement" }] ] }