React.jsx代码无法在浏览器显示，求助解决运行问题

嘿，我帮你排查下这个问题，你的React代码没法在浏览器正常渲染主要有两个关键问题，咱们一步步来修复：

1. JSX中误用了class属性，应该替换为className #

在React的JSX语法里，不能直接使用HTML的class关键字——因为class是JavaScript的保留字，React规定要用className来替代它，用来设置元素的CSS类名。

你原来的代码里：

<div class="person">

要改成：

<div className="person">

修改后的完整JS代码：

function Person(){
  return ( 
    <div className="person"> 
      <h1>Max</h1> 
      <p>Your Age: 28</p> 
    </div> 
  );
}
ReactDOM.render(<Person />, document.querySelector('#p1'));

2. 缺少必要的依赖引入与JSX编译支持 #

如果是直接在浏览器环境里运行React代码，你需要确保已经正确引入了React、ReactDOM的UMD版本，并且引入Babel来编译JSX（因为浏览器本身不认识JSX语法）。

下面是完整的可运行HTML页面示例，你可以参考这个结构调整你的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React Test</title>
  <!-- 引入你的CSS文件 -->
  <link rel="stylesheet" href="react.css">
  <!-- 引入React和ReactDOM的UMD库 -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- 引入Babel来编译JSX -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <!-- 挂载React组件的容器 -->
  <div id="p1"></div>

  <!-- 注意这里的type要设为text/babel，告诉Babel编译这段代码 -->
  <script type="text/babel">
    function Person(){
      return ( 
        <div className="person"> 
          <h1>Max</h1> 
          <p>Your Age: 28</p> 
        </div> 
      );
    }
    // React 18之后推荐使用createRoot替代原来的render方法
    const root = ReactDOM.createRoot(document.querySelector('#p1'));
    root.render(<Person />);
  </script>
</body>
</html>

另外补充一点：如果是用React 18版本，官方已经不再推荐使用ReactDOM.render()方法，而是改用createRoot来创建根节点并渲染组件，上面的示例也已经做了对应调整，这样更符合最新的React规范。

按照上面的修改调整后，你的组件应该就能正常在浏览器里显示了～

内容的提问来源于stack exchange，提问作者user9292281