How to use react components in vue

Vue uses react components: first install dependencies; then edit [main.js]; finally add the react components that need to be referenced, the code is [import MyReactComponent from './MyReactComponent'].

[Related article recommendations:vue.js]

vue uses react components Method:

1. Install dependencies

npm i -S vuera npm install --save react react-dom

2. Edit main.js:

import { VuePlugin } from 'vuera'Vue.use(VuePlugin)

3. Add the react components that need to be referenced

import MyReactComponent from './MyReactComponent'

The first problem was discovered at this time:

It is not difficult to find that this is a vue project Caused by the problem of jsx file format

Solution:

Edit webpack.base.conf.js and add support for jsx

test: /\.( js|jsx)(\?.*)?$/

At this time the second problem appeared:

Reason:

npm install --save-dev babel-plugin-transform-react-jsx

transform-vue-jsx# with

in the .babelrc file

JavaScript

(video)

The above is the detailed content of How to use react components in vue. For more information, please follow other related articles on the PHP Chinese website!