通过Google Chrome扩展程序向页面添加React组件（按钮）

Question

我真的需要帮助。我正在尝试通过chrome扩展将React组件添加到页面中。为了简单起见，为练习起见，在Wikipedia上添加了一个按钮。

但是，我收到以下错误：未捕获的SyntaxError：以下行的意外标识符：import from'react'; 当我将其更改为ES5语法时：var React = require（'react'）;然后问题消失了。但是，另一个问题弹出

哪个是：//未捕获到的SyntaxError：以下行的意外令牌<：ReactDOM.render（，button）; 因此，我认为它不能识别ES6，JSX语法。 任何人都可以调查一下并救我吗 在下面添加代码：

// import React from 'react';  //content.js:1 Uncaught  SyntaxError: 
//Unexpected identifier
// import ReactDOM from 'react-dom';
// import Button from '../components/button.js';
//import serviceWorker from '../src/serviceWorker';

var React = require('react');
var ReactDOM = require('react-dom');
var Button = require('../components/button.js');
var serviceWorker=require('../src/serviceWorker');

const element = document.getElementById('firstHeading');
element.classList.add('cpy');

const button = document.createElement('span');
element.appendChild(button);


ReactDOM.render(<Button/>,button); //Uncaught  SyntaxError: Unexpected token <
serviceWorker.unregister();