日常在开发中总是会遇到各种奇怪的需求，
最近在开发一个多人合作的项目时变遇到一个奇怪的需求，
对方之前开发了一个react组件，要求在这期迭代中嵌入到vue项目中。
Vue中引用React组件：
1. 安装依赖
npm i -S vuera
npm install --save react react-dom
2. 编辑main.js:
import { VuePlugin } from 'vuera'
Vue.use(VuePlugin)
3. 加入需要引用的react组件
import MyReactComponent from './MyReactComponent'
这个时候发现第一个问题：
1.png
不难发现，这是vue项目中未jsx文件格式的问题所导致
解决办法：
编辑webpack.base.conf.js，加入对jsx的支持
test: /\.(js|jsx)(\?.*)?$/
这个时候第二个问题出现了：
2.png
原因：
.babelrc文件中默认引入了transform-vue-jsx，此插件将jsx转义成h function的形式供vue调用。
解决办法：
npm install --save-dev babel-plugin-transform-react-jsx
并且在.babelrc文件中
用transform-react-jsx替换transform-vue-jsx
"plugins": ["transform-react-jsx"]
至此，我们便完成了在vue项目中引入react组件的目的
效果：
3.png
React项目中引用Vue组件：
1. 安装依赖
npm i -S vuera
npm install --save vue
