005-006 jsx语法规则、jsx小练习

jsx语法规则定义虚拟DOM不要写引号。标签中混入JS表达式要用{}。样式的类名指定不要用class要用className。内联样式要用style{{key:value}}的形式去写。虚拟DOM必须只有一个根标签。标签必须闭合。标签首字母 (1) 若小写字母开头则将该标签转为html中同名元素若html中无该标签对应的同名元素则报错。 (2) 若大写字母开头react就去渲染对应的组件若组件没有定义则报错。!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style .title { background-color: orange; width: 200px; } /style /head body div idtest/div script typetext/javascript src../js/react.development.js/script script typetext/javascript src../js/react-dom.development.js/script script typetext/javascript src../js/babel.min.js/script script typetext/babel const myId aTgUiGu const myData Hello,rEaCt //1.create virtual dom const VDOM ( div h2 classNametitle id{myId.toLowerCase()} span style{{ color: white, fontSize: 29px }}{myData.toLowerCase()}/span /h2 h2 classNametitle id{myId.toUpperCase()} span style{{ color: white, fontSize: 29px }}{myData.toLowerCase()}/span /h2 input typetext / /div ) //2.render virtual dom to page ReactDOM.render(VDOM, document.getElementById(test)) /script /body /htmljsx小练习一定注意区分【js语句(代码)】与【js表达式】表达式一个表达式会产生一个值可以放在任何一个需要值的地方(左边可以用一个const衔接的)下面这些都是表达式(1) a(2) ab(3) demo(1)(4) arr.map()(5) function test () {}语句(代码)下面这些都是语句(代码)(1) if() {}(2) for() {}(3) switch() {case: xxx}!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body div idtest/div script typetext/javascript src../js/react.development.js/script script typetext/javascript src../js/react-dom.development.js/script script typetext/javascript src../js/babel.min.js/script script typetext/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