下面的这些语法仅用于构建一个组件的标签模块，定义完成之后如果需要做演示，请附加以下代码：
ReactDOM.render(
element1,
document.body
);
即可完成标签的演示。
const element1 = <div>Hello JSX</div>;
const element2 = (
<div>
<h1>Hello Child1</h1>
<span>Hello 2</span>
</div>
);
const user = { name: ‘qiumohanyu‘, age: 27, hobby: ‘nothing‘, website: ‘www.baidu.com‘ }; const hasNav = true; const element3_1 = ( <div> <h1>{user.name}</h1> <span>{user.age}</span> <span>{user.hobby}</span> <a src={user.website}>主页</a> <div> {hasNav ? <nav>Nav</nav> : null}</div> </div> );
function getItem() { return ‘from function‘; } const element3_2 = <div>{getItem()}</div>;
const type = true; const element4_1 = ( <div> <div className="mycls">带class的标签</div> <span className={type?‘class1‘:‘class2‘}>带判断逻辑的类名</span> </div> );
const element4_2 = <div tabIndex="0">带tabindex的标签</div>;
const element4_3 = <label htmlFor="input1">User Name</label>;
const MyComponent = React.createClass(
{
render: function() {
return <div>My Component</div>
}
}
);
var x = "foo-value";
var y = "bar-value";
const element5_1 = <MyComponent foo={x} bar={y}/>;
var props = {};
props.foo = x;
props.bar = y;
const element5_2 = <MyComponent {...props} />;
//需要覆盖时
const element5_3 = <MyComponent {...props} foo={‘new-value‘}/>;
var mystyles = {
color: ‘red‘,
border: ‘1px solid #000‘
};
const element6 = <div style={mystyles}></div>;
var innerHtml = ‘<span> my span label</span>‘;
var toDiv = { __html: innerHtml };
const element7 = (
<div dangerouslySetInnerHTML={toDiv}></div>
);
const element8=(
<div data-id="can render" ride="can not be render"></div>
);
原文：http://www.cnblogs.com/qiumohanyu/p/5988542.html