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:

## Transform-vue-jsx is introduced by default in the #.babelrc file. This plug-in escapes jsx into the form of h function for vue to call.

Solution:

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

And replace

transform-vue-jsx# with

transform-react-jsx

in the .babelrc file

## Related free learning recommendations:

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!