jsx语法规则
- 定义虚拟DOM，不要写引号。
- 标签中混入JS表达式要用{}。
- 样式的类名指定不要用class，要用className。
- 内联样式，要用style={{key:value}}的形式去写。
- 虚拟DOM必须只有一个根标签。
- 标签必须闭合。
- 标签首字母 (1) 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。 (2) 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
<!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>Document</title> <style> .title { background-color: orange; width: 200px; } </style> </head> <body> <div id="test"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> const myId = 'aTgUiGu' const myData = 'Hello,rEaCt' //1.create virtual dom const VDOM = ( <div> <h2 className="title" id={myId.toLowerCase()}> <span style={{ color: 'white', fontSize: '29px' }}>{myData.toLowerCase()}</span> </h2> <h2 className="title" id={myId.toUpperCase()}> <span style={{ color: 'white', fontSize: '29px' }}>{myData.toLowerCase()}</span> </h2> <input type="text" /> </div> ) //2.render virtual dom to page ReactDOM.render(VDOM, document.getElementById('test')) </script> </body> </html>jsx小练习
一定注意区分：【js语句(代码)】与【js表达式】：
表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方(左边可以用一个const=衔接的)
下面这些都是表达式：
(1) a
(2) a+b
(3) demo(1)
(4) arr.map()
(5) function test () {}
语句(代码)
下面这些都是语句(代码)：
(1) if() {}
(2) for() {}
(3) switch() {case: xxx}
<!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>Document</title> </head> <body> <div id="test"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> //simulate some data const data = ['Angular', 'React', 'Vue'] //1.create virtual DOM const VDOM = ( <div> <h1>前端js框架列表</h1> <ul> { data.map((item, index) => { return <li key={index}>{item}</li> }) } </ul> </div> ) //2.render virtual DOM to page ReactDOM.render(VDOM, document.getElementById('test')) </script> </body> </html>
