如何让我的 React 组件在退出 HTML 时呈现

Question

我正在尝试在现有网页上插入一个反应组件。 阅读文档后，我似乎仍然无法让我的反应组件使用 JSX 进行渲染。 有人可以解释我错过了什么吗？

<!-- Some react code -->
<div id="welcome-back"></div>
<!-- Some react code -->


      <img class="shonprofile rounded-circle profilecenter " style="" src="images/shonblue2.png" alt="" width="300" height="300">


      </div>
      <button type="submit" class="btn btn-primary" style="margin-bottom:10px">Submit</button>
   

   
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="index.js" charset="utf-8"></script>
  <script src="app.js" charset="utf-8"></script>
  <script src="src/Welcome.jsx" charset="utf-8"></script>



</body>

</html>

我的组件

import React from "react";
import ReactDOM from "react";



class WelcomeBack extends React.Component{
  constructor(props){
    super(props);
    this.state ={
      name:'Tay',
      appVersion: ""
    };
  }
  render(){
    return(
      <div>
      <h2>Hello{this.state.name || 'Friend'}!Welcome back</h2>
      <button>Download</button>
      </div>
    )
  }
};
let welcomeId = document.querySelector("#welcome-back");
ReactDOM.render(<WelcomeBack />, welcomeId);

Answer 1

正如@lortschi 在评论中指出的那样......

import ReactDOM from "react-dom";