add basic react setup

src/components/ReactTestComponent/index.jsx

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+
+class Form extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      value: ""
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    const { value } = event.target;
+    this.setState(() => {
+      return {
+        value
+      };
+    });
+  }
+
+  render() {
+    return (
+      <form>
+        <input
+          type="text"
+          value={this.state.value}
+          onChange={this.handleChange}
+        />
+        <br/>
+        value: {this.state.value}
+      </form>
+    );
+  }
+}
+
+export default Form;

src/components/ReactWrapper/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import React from 'react'
+import ReactDOM from 'react-dom'
+import ReactTestComponent from '~/components/ReactTestComponent/index.jsx'
+
+export default {
+  mounted(){
+    ReactDOM.render(React.createElement(ReactTestComponent, this.$props), this.$el)
+  },
+
+  beforeDestroy(){
+    ReactDOM.unmountComponentAtNode(this.$el)
+  }
+}
+</script>

src/main.js

@@ -3,11 +3,13 @@ import 'prismjs/themes/prism-coy.css'
 import DefaultLayout from '~/layouts/Default.vue'
 import Demo from '~/components/Demo'
 import Tab from '~/components/Tab'
+import ReactWrapper from '~/components/ReactWrapper'
 
 export default function (Vue, { router, head, isClient }) {
   Vue.component('Layout', DefaultLayout)
   Vue.component('Demo', Demo)
   Vue.component('Tab', Tab)
+  Vue.component('ReactWrapper', ReactWrapper)
   Vue.filter('highlight', (code, lang = 'javascript') => {
     return Prism.highlight(code, Prism.languages[lang], lang)
   })