jsx
创建<script type="text/babel">
// 1. 创建虚拟DOm - 此处不能写 '' 因为 jsx 可以和 js 混合写
const VDOM = <h1 id="title">Hell,react</h1>
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
js
创建,React.createElment
React.createElment
创建虚拟 DOM
就跟 vue
的 h
函数是一样的<script type="text/javaScript">
// 1. 创建虚拟DOm
// const VDOM = React.createElment(标签名, 标签属性, 标签体内容)
const VDOM = React.createElement('h1', {id: 'title'}, 'Hello,React')
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
jsx
而不是使用 js
js
还要使用 jsx
呢还得去学习规则,那么下面这个案例就可以看出 jsx
的好处了h1
标签内部加一个 span
标签jsx
写法<script type="text/babel">
// 1. 创建虚拟DOm - 此处不能写 '' 因为 jsx 可以和 js 混合写
const VDOM = (
<h1 id="title">
<span>Hell,react</span>
</h1>
)
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
js
写法<script type="text/javaScript">
// 1. 创建虚拟DOm
// const VDOM = React.createElment(标签名, 标签属性, 标签体内容)
const VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span', {}, 'Helo,React'))
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
看了上面的两个案例我想大家应该就知道为什么 React
要打造 jsx
了,因为他写模板就像我们写原生 html
一样,但是因为我们浏览器是不认识 jsx
的,最终还是会通过 babel
编译成 js
写的那样,所以说 jsx
是原生 js
创建虚拟 DOM
的语法糖