JavaScript的React框架中的JSX语法学习入门教程

什么是JSX？

在用React写组件的时候，通常会用到JSX语法，粗看上去，像是在Javascript代码里直接写起了XML标签，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，当然你想直接使用纯Javascript代码写也是可以的，只是利用JSX，组件的结构和组件之间的关系看上去更加清晰。

var MyComponent = React.createClass({/*...*/});var myElement = <MyComponent someProperty={true} />;React.render(myElement, document.body);

一个XML标签，比如<MyComponent someProperty={true} />会被JSX转换工具转换成什么呢？

比如：

var Nav = React.createClass({/*...*/});var app = <Nav color="blue"><Profile>click</Profile></Nav>;

会被转化为：

var Nav = React.createClass({/*...*/});var app = React.createElement( Nav, {color:"blue"}, React.createElement(Profile, null, "click"));

那么也就是说，我们写一个XML标签，实质上就是在调用React.createElement这个方法，并返回一个ReactElement对象。

ReactElement createElement( string/ReactClass type, [object props], [children ...])

这个方法的第一个参数可以是一个字符串，表示是一个HTML标准内的元素，或者是一个ReactClass类型的对象，表示我们之前封装好的自定义组件。第二个参数是一个对象，或者说是字典也可以，它保存了这个元素的所有固有属性（即传入后基本不会改变的值）。从第三个参数开始，之后的参数都被认作是元素的子元素。

JSX转化器

要把带有JSX语法的代码转化为纯Javascript代码，有多种方式，对于内联与HTML中的代码或者是未经过转化的外部文件，在script标签中要加上type="text/jsx"，并引入JSXTransformer.js文件即可，不过这种方式并不建议在生产环境使用，建议的方法是在代码上线前就将代码转换好，可以使用npm全局安装react-tools：

npm install -g react-tools

并使用命令行工具转化即可（具体用法可以参考jsx -h）：

jsx src/ build/

如果使用自动化工具，比如gulp的话，可以使用相应插件gulp-react。

HTML模板中使用JS

在HTML模板中使用JS非常方便，只需要用大括号把JS代码括起来即可。

var names = ['Alice', 'Emily', 'Kate'];  React.render( <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById('example') ); 

编译出来就变成了这样：

var names = ['Alice', 'Emily', 'Kate']; React.render(  React.createElement("div", null, names.map(function (name) {  return React.createElement("div", null, "Hello, ", name, "!")  }) ),  document.getElementById('example') );