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 );
时间： 2024-10-26 17:52:20