1.全名javascropt XML
XML示意图：
<student> <name></name> <address></address> </student>
可以转化为JSON
JSON示意：{"name":"front-end","address":"shenzhen"}
JSON有两个转化方式：parse,stringfy
parse表示将XML转化为JSON,stringfy表示将json转化为XML
2.定义虚拟DOM的时候，不能带引号。在引入js变量的时候，要使用括号{ }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用js创建DOM</title> </head> <body> <div id="test"></div> <script src="./react-resource/react.development.js"></script> <script src="./react-resource/react-dom.development.js"></script> <script src="./react-resource/babel.min.js"></script> <script type="text/babel"> const myID="laoZHICHI"; const myDATA="Hello!React"; const VDOM=( <h1 id={myID.toLocaleUpperCase()}> <span>{myDATA.toLocaleLowerCase()}</span> </h1>); ReactDOM.render(VDOM,document.getElementById("test")); </script>
3.样式类名指定不能用class,要用className
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用js创建DOM</title> </head> <style> .title { color: aqua; font-size: large; } </style> <body> <div id="test"></div> <script src="./react-resource/react.development.js"></script> <script src="./react-resource/react-dom.development.js"></script> <script src="./react-resource/babel.min.js"></script> <script type="text/babel"> const myID="laoZHICHI"; const myDATA="Hello!React"; const VDOM=( <h1 className="title"> <span>{myDATA.toLocaleLowerCase()}</span> </h1>); ReactDOM.render(VDOM,document.getElementById("test")); </script> </body> </html>
4.内联样式要用格式style={{key:value}}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用js创建DOM</title> </head> <style> .title { color: aqua; font-size: large; } </style> <body> <div id="test"></div> <script src="./react-resource/react.development.js"></script> <script src="./react-resource/react-dom.development.js"></script> <script src="./react-resource/babel.min.js"></script> <script type="text/babel"> const myID="laoZHICHI"; const myDATA="Hello!React"; const VDOM=( <h1 className="title"> <span style={{color: 'orange',fontSize: '20px'}}>{myDATA.toLocaleLowerCase()}</span>; </h1>); ReactDOM.render(VDOM,document.getElementById("test ")); </script> </body> </html>
5.虚拟DOM必须只有一个根标签
例如在这里多个<h1></h1>要用一个大的div盒子来装
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用js创建DOM</title> </head> <style> .title { color: aqua; font-size: large; } .title1{ color: azure; font-size: large; } </style> <body> <div id="test"></div> <script src="./react-resource/react.development.js"></script> <script src="./react-resource/react-dom.development.js"></script> <script src="./react-resource/babel.min.js"></script> <script type="text/babel"> const myID="laoZHICHI"; const myDATA="Hello!React"; const VDOM=( <div> <h1 className="title"> <span style={{color: 'orange',fontSize: '20px'}}>{myDATA.toLocaleLowerCase()}</span>; </h1> <h1 className="title1"> <span style={{color: 'orange',fontSize: '20px'}}>{myDATA.toLocaleLowerCase()}</span>; </h1> </div> ) ReactDOM.render(VDOM,document.getElementById("test ")); </script> </body> </html>
6.标签必须要闭合
7.标签首字母
A.若为小写字母开头，则将该标签改为html当中的同名元素，若html当中无相关的对应元素，那么就报错
B.若为大写字母开头，那么就去React当中的组件当中寻找相关的渲染组件，如果没有，那么就报错。
