微网站平台建设方案,服装厂家,网站建设和管理办法,wordpress网站有哪些一、jsx 简介
全称为JavaScript XML#xff0c;是 react 定义的一种类似于 XML 的 JS 扩展语法
JS XML 本质是 React.createElement(component, props, …children) 方法的语法糖#xff0c;用来简化创建虚拟 DOM
写法#xff1a;var ele h1Hello JSX!/h1是 react 定义的一种类似于 XML 的 JS 扩展语法
JS XML 本质是 React.createElement(component, props, …children) 方法的语法糖用来简化创建虚拟 DOM
写法var ele h1Hello JSX!/h1注意
它不是字符串也不是 HTML/XML 标签
它最终产生的就是一个 JS 对象二、jsx 语法规则
1、定义虚拟 DOM 时不要写引号
2、标签中混入JS表达式时要用 {}
3、样式的类名指定不要用 class要用 className
4、内联样式要用 style{{key:value}} 的形式去写
5、只有一个根标签
6、标签必须闭合
7、标签首字母
(1)、若小写字母开头则将该标签转为 html 中同名元素若 html 中无该标签对应的同名元素则报错
(2)、若大写字母开头react 就去渲染对应的组件若组件没有定义则报错
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejsx语法规则/titlestyle.title{background-color: orange;width: 200px;}/style
/head
body!-- 准备好一个“容器” --div idtest/div!-- 引入react核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入react-dom用于支持react操作DOM --script typetext/javascript src../js/react-dom.development.js/script!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/babel.min.js/scriptscript typetext/babelconst myId aTgUiGuconst myData HeLlo,rEaCt// 1、创建虚拟DOMconst VDOM (divh2 classNametitle id{myId.toLowerCase()}span style{{color:white,fontSize:29px}}{myData.toLowerCase()}/span/h2h2 classNametitle id{myId.toUpperCase()}span style{{color:white,fontSize:29px}}{myData.toUpperCase()}/span/h2input typetext//div)// 2、渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById(test))/script
/body
/html三、jsx 练习
js 表达式
一个表达式会产生一个值可以放在任何一个需要值的地方
(1)、 a
(2)、 ab
(3)、demo(1)
(4)、 arr.map()
(5)、function test () {} - 函数定义表达式js 语句(代码)
(1)、if(){}
(2)、for(){}
(3)、switch(){case:xxxx}jsx 的 {} 中只能混入 JS表达式
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejsx小练习/title
/head
body!-- 准备好一个“容器” --div idtest/div!-- 引入react核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入react-dom用于支持react操作DOM --script typetext/javascript src../js/react-dom.development.js/script!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/babel.min.js/scriptscript typetext/babel // 模拟一些数据react可以对数组进行遍历对象不可以const data [Angular,React,Vue]// 1、创建虚拟DOMconst VDOM (divh1前端js框架列表/h1ul{data.map((item,index){return li key{index}{item}/li})}/ul/div)// 2、渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById(test))/script
/body
/html
