如何讓我的 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";