标签：bsp doctype render ops 括号 语法 browser html模板 eem
1. HTML模板
Jsx是react的语法糖，最终会被编译成js语法。因此需要第三方库browser将jsx转换成js。
由于react 0.14版本之后，将react和react-dom拆分，所以需要分别引入react和react-dom
这是官网的一个demo
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 ReactDOM.render( 12 <h1 color>Hello, world!</h1>, 13 document.getElementById(‘example‘) 14 ); 15 </script> 16 </body> 17 </html>
但是编译之后是这样的：
React.render( React.createElement("h1", {color: "red"}, "Hello, world!"), document.getElementById(‘example‘) );
render()方法里面的html代码被转换成了React.createElement.因此阔以使用React.createElement来创建模板，但不推荐。
React.createEleemt(type,[props],[...children]):
type:the type argument can be either a tag name string(such as "div"),or a React Compoment()
jsx语法规则：render方法第一个参数，首写字母如果是小写的就是HTML代码，如果是大写字母就是React组件；
jsx会主动去检查标签是否闭合，如果没有闭合，直接报错。
2.ReactDOM.render()+js
只需要用大括号括起来就可以使用js语法。
1 var names = [‘Alice‘, ‘Emily‘, ‘Kate‘]; 2 3 ReactDOM.render( 4 <div> 5 { 6 names.map(function (name) { 7 return <div>Hello, {name}!</div> 8 }) 9 } 10 </div>, 11 document.getElementById(‘example‘) 12 );
编译之后变成：
1 var names = [‘Alice‘, ‘Emily‘, ‘Kate‘]; 2 React.render( 3 React.createElement("div", null, names.map(function (name) { 4 return React.createElement("div", null, "Hello, ", name, "!") 5 }) ), 6 document.getElementById(‘example‘) 7 );
还是三个参数，第二个arg为null，第三个参数就是js代码。所以js代码只能放一行表达式，不能有;出现。
比如这样写就是错误的：
1 React.render( 2 <div> 3 { 4 var a = 1; 5 names.map(function (name) { 6 return <div>Hello, {name}!</div> 7 }) 8 } 9 </div>, 10 document.getElementById(‘example‘) 11 );
3.render 数组
arr是个数组，jsx会把arr的所有成员都添加到模板中。只需要用{}把arr括起来，表示js代码即可。
var arr = [ <h1>Hello world!</h1>, <h2>React is awesome</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById(‘example‘) );
编译后结果：
1 React.render( 2 React.createElement("div", null, [<h1>Hello world!</h1>,<h2>React is awesome</h2>,]), 3 document.getElementById(‘example‘) 4 );
标签：bsp doctype render ops 括号 语法 browser html模板 eem
原文地址：http://www.cnblogs.com/thonrt/p/6141630.html
