react/vue 里的jsx区别1 vue支持模板语法，通常情况写法上面代码会被编译成如下函数但是这样写代码很痛苦

1 vue支持模板语法，通常情况写法

<template>
  <h1>{{ blogTitle }}</h1>
</template>

上面代码会被编译成如下函数

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

但是这样写代码很痛苦于是有了babel插件，我们可以下面这样写代码（jsx写法）插件 Then add the preset to babel.config.js:

module.exports = { presets: ['@vue/babel-preset-jsx'], }

import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})

2 react jsx语法类似vue

<div className="content">Hello world!</div>

上面代码会被babel编译成如下代码（）插件babel preset react

React.createElement("div", {
    className: "content"
}, "Hello world!");