[React]jsx语法规则
JSX语法规则
1. 定义虚拟DOM时，不要写引号。（建议写括号）
2. 标签中混入JS表达式时使用{ }
3. 类名样式：指定类名不要用class（是ES6的关键字），要用className。
4. 内联样式：要用style={{key:value}}的形式去写。
5. 虚拟DOM只有一个根标签。
6. 标签必须闭合。
7. 标签首字母：
a. 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
b. 若大写字母开头，React就去渲染对应的组件，若组件没有定义，则报错。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JSX语法规则</title> <style> .title { background-color: aliceblue; } </style> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库，核心库必须在最前 --> <script type="text/javascript" src="../js/16.8.4/react.development.js"></script> <!-- 引入react-dom，用于支持react操作DOM --> <script type="text/javascript" src="../js/16.8.4/react-dom.development.js"></script> <!-- 引入babel，用于将jsx转为js --> <script type="text/javascript" src="../js/16.8.4/babel.js"></script> <!-- <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> --> <!-- 正式开发时不这样写，浏览器编译babel耗时，可能造成白屏 --> <script type="text/babel" > /* 此处一定要写babel */ const myId = "oDD" const myData = "Hello, React." // 1.创建虚拟DOM const VDOM = ( <div> <h1 className="title" id={myId.toLowerCase()}> <span style={{color: 'white'}}>{myData}</span> </h1> <br /> <good>123</good> </div> ) // 2.渲染虚拟DOM到页面 ReactDOM.render(VDOM, document.getElementById('test')) </script> </body> </html>
JSX
1. 全称JavaScript XML
2. react 定义的一种类似于XML的JS扩展语法：JS + XML
3. 本质是React.createElement(component, props, ...children) 方法的语法糖
4. 作用：用来简化创建虚拟DOM
a. 写法：var ele = <h1>Hello, JSX!</h1>
b. 注意1：它不是字符串，也不是HTML/XML标签。
c. 注意2：它最终产生的就是一个JS对象。
5. 标签名任意：HTML标签或其它标签
XML早期用于存储和传输数据
<student>
<name>Tom</name>
<age>19</age>
</student>
现在少用，如：微信公众号
后来常用JSON，数据量更小，可读性更好。
"{"name":"Tom", "age": 19}"
内置方法：
1. JSON.parse()
2. JSON.stringify()
