在线视频制作网站,网站研发费用吗,app开发需要多少钱,做生鲜食品最好的网站【React学习】—jsx语法规则#xff08;三#xff09; 一、jsx语法规则#xff1a; 1、定义虚拟DOM#xff0c;不要写引号#xff0c; 2、标签中混入JS表达式要用{} 3、样式的类名指定不要用class#xff0c;要用className 4、内联样式#xff0c;要用style{{key:value}…【React学习】—jsx语法规则三 一、jsx语法规则 1、定义虚拟DOM不要写引号 2、标签中混入JS表达式要用{} 3、样式的类名指定不要用class要用className 4、内联样式要用style{{key:value}}的形式去写 5、虚拟DOM只有一个根表签 6、标签必须闭合 7、标签首字母若小写字母开头则将该标签转为html中同名元素若html无该标签对应的同名元素则报错
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title使用jsx创建/titlestyle.title {background-color: pink;width: 200px;}/style/headbody!-- 准备好一个容器 --div idtest
!-- jsx语法规则1、定义虚拟DOM不要写引号2、标签中混入JS表达式要用{}3、样式的类名指定不要用class要用className4、内联样式要用style{{key:value}}的形式去写5、虚拟DOM只有一个根表签6、标签必须闭合7、标签首字母若小写字母开头则将该标签转为html中同名元素若html无该标签对应的同名元素则报错--/div!-- 引入react核心库 --script src../js/react.development.js/script!-- 引入react-dom支持react操作dom --script src../js/react-dom.development.js/scriptscript src../js/babel.min.js/scriptscript typetext/babelconst myId CaiCai;const myData Hello React;const VDOM (divh2 classNametitle id{myId.toLowerCase()}span style{{color:white, fontSize: 20px }}{myData.toLocaleUpperCase()}/span/h2h2 classNametitle id{myId.toLowerCase()}span style{{color:white, fontSize: 20px }}{myData.toLocaleUpperCase()}/span/h2input typetext//div);ReactDOM.render(VDOM, document.getElementById(test));/script/body
/html
二、区分js语句和表达式 三、JSX练习 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titlejsx练习/title/headbody!-- 准备好一个容器 --div idtest/div!-- 引入react核心库 --script src../js/react.development.js/script!-- 引入react-dom支持react操作dom --script src../js/react-dom.development.js/script!-- 引入Bable 用于将jsx转化为js --script src../js/babel.min.js/script!-- 此处一定要写Bable --script typetext/babelconst data[Angular,React,Vue]//创建虚拟DOMconst VDOM (divh1前端js框架列表/h1ul{data.map((item,index){return li key{index}{item}/li})}/ul/div)//渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById(test))/script/body
/html 四、组件与模块化的理解
