React JSX语法说明

什么是JSX？

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

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

利用React创建评论区（Comment Box）组件

本文是在阅读学习了官方的React Tutorial之后的整理，实例链接。

开始使用React

首先从官方获取React.js的最新版本（v0.12.2），或者下载官方的Starter Kit，并在我们的html中引入它们：

1
2
3
4
5
6
<head>
    <meta charset="UTF-8">
    <title>React Test Page</title>
    <script src="../build/react.js"></script>
    <script src="../build/JSXTransformer.js"></script>
</head>

JSX语法

我们可以在React组件的代码中发现xml标签似乎直接写进了javascript里：

1
2
3
4
React.render(
    <CommentBox />,
    document.getElementById('content')
);

这种写法被称作JSX，是React的一个可选功能，将xml标签直接写在javascript中看上去比调用javascript方法要更加直观些。要正常使用这个功能，需要在你的页面中引入JSXTransformer.js文件，或者使用npm安装react-tools，将包含JSX语法的源文件编译成常规的javascript文件，比较推荐的是后者，因为使用后者让页面可以直接使用编译后的javascript文件而不需要在加载页面时进行JSX编译。

JSX中的类HTML标签并不是真正的HTML元素，也不是一段HTML字符串，而是实例化了的React组件，关于JSX语法的更多内容，可以看这篇文章。