饮水思源：https://www.bilibili.com/video/BV1wy4y1D7JT?p=5
jsx语法规则
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className.
4.内联样式，要用sty1e={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将改标签转为html中同名元素，若htm1中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Add React in One Minute</title> </head> <body> <div id="test"></div> <!-- 加载 React。--> <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。--> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- Load Babel --> <!-- v6 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> let 容器 = document.querySelector("#test"); let 数据 = '数据要用花括号括起来'; let style不能写字符串 = { color: 'pink', fontSize: '54px', }; let class要用className因为class是关键字 = 'title'; let 虚拟DOM = ( <div className={class要用className因为class是关键字} id={数据} style={style不能写字符串}>{数据}</div> ) ReactDOM.render(虚拟DOM, 容器); </script> </body> </html>
运行结果：
<div id="test"><div class="title" id="数据要用花括号括起来" style="color: pink; font-size: 54px;">数据要用花括号括起来</div></div>
动态列表初步
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Add React in One Minute</title> </head> <body> <div id="test"></div> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- Load Babel --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> let 容器 = document.querySelector("#test"); let list = ["data1", "data2", "data3"] let 虚拟DOM = ( <ul> <li>data0</li> {list.map(x => <li>{x}</li>)} </ul> ) ReactDOM.render(虚拟DOM, 容器); </script> </body> </html>
控制台不高兴，列表元素必须有唯一的key：
暂时改成这样：
let 虚拟DOM = (
<ul>
<li >data0</li>
{list.map((x, i) => <li key={i}>{x}</li>)}
</ul>
)