参考:http://www.ruanyifeng.com/blog/2015/03/react.html
官方文档:https://reactjs.org/docs/introducing-jsx.html
JSX 的基本语法规则
遇到HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="../build/react.js"></script> 5 <script src="../build/react-dom.js"></script> 6 <script src="../build/browser.min.js"></script> 7 </head> 8 <body> 9 <div id="example"></div> 10 <script type="text/babel"> 11 var names = ['Alice', 'Emily', 'Kate']; 12 ReactDOM.render( 13 <div> 14 { 15 names.map(function (name) { 16 return <div>Hello, {name}!</div> 17 }) 18 } 19 </div>,//<div>{names }</div>, 20 document.getElementById('example') 21 ); 22 </script> 23 </body> 24 </html>
React 组件
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
1 var HelloMessage = React.createClass({ 2 render: function() { 3 return <h1>Hello {this.props.name}</h1>; 4 } 5 }); 6 7 ReactDOM.render( 8 <HelloMessage name="John" />, 9 document.getElementById('example') 10 );
组件的用法与原生的 HTML 标签完全一致，可以任意加入属性
组件的属性可以接受任意值，字符串、对象、函数等等都可以
组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取;
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求
1 var MyTitle = React.createClass({ 2 propTypes: { 3 title: React.PropTypes.string.isRequired, 4 }, 5 6 render: function() { 7 return <h1> {this.props.title} </h1>; 8 } 9 });
ref 属性:从组件获取真实 DOM 的节点
1 var MyComponent = React.createClass({ 2 handleClick: function() { 3 this.refs.myTextInput.focus(); 4 }, 5 render: function() { 6 return ( 7 <div> 8 <input type="text" ref="myTextInput" /> 9 <input type="button" value="Focus the text input" onClick={this.handleClick} /> 10 </div> 11 ); 12 } 13 }); 14 15 ReactDOM.render( 16 <MyComponent />, 17 document.getElementById('example') 18 );
上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。
React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看官方文档。
注意：
1、组件类的第一个字母必须大写；
2、组件类只能包含一个顶层标签；
3、添加组件属性， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字；
4、this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点