–React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

要渲染 React 组件，只需创建一个大写字母开头的本地变量。

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

转换

JSX 把类 XML 的语法转成纯粹 JavaScript

var Nav;
// 输入 (JSX):
var app = <Nav color="blue" />;
// 输出 (JS):
var app = React.createElement(Nav, {color:"blue"});
//注意，要想使用 <Nav />，Nav 变量一定要在作用区间内。

JSX 也支持使用 XML 语法定义子结点

var Nav, Profile;
// 输入 (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// 输出 (JS):
var app = React.createElement(
Nav,
{color:"blue"},
React.createElement(Profile, null, "click")
);

JavaScript 表达式

属性表达式
要使用 JavaScript 表达式作为属性值， 只需把这个表达式用一对大括号 ({}) 包起来，不要用引号 ("")。

// 输入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 输出 (JS):
var person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);

子节点表达式

// 输入 (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 输出 (JS):
var content = React.createElement(
Container,
null,
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

注释
你只需要在一个标签的子节点内(非外层)小心地用 {} 包围要注释的部分。

var content = (
<Nav>
{/* 一般注释, 用 {} 包围 */}
<Person
/* 多
行
注释 */
name={window.isLoggedIn ? window.name : ''} // 行尾注释
/>
</Nav>
);