React组件未渲染报Unexpected token '<'错误排查与解决

问题表现 #

• 编写的React自定义组件无法正常渲染
• 排查React导入配置、移除body内注释代码块后问题未解决
• 浏览器控制台抛出错误：Uncaught SyntaxError: Unexpected token '<' (at index.html:22:13)

根本原因 #

浏览器原生JavaScript解析器不识别JSX语法，虽然引入了@babel/standalone做JSX转译，但承载React JSX逻辑的script标签未配置type="text/babel"属性，Babel不会接管这段代码的转译，浏览器直接把JSX当普通JS解析，遇到<开头的标签语法就会触发语法错误。
除此之外原代码还有三个会导致渲染失败的问题：

• React挂载目标节点<div id="app"></div>被注释在body标签内，没有实际渲染到DOM树
• 写React逻辑的script标签放在了head与body之间，代码执行时DOM还未加载完成，会找不到挂载节点
• JSX语法中用class给DOM加类名会和JS的class关键字冲突，运行时会抛出警告

修复步骤 #

• 给编写React组件逻辑的script标签添加type="text/babel"属性
• 取消body内应用挂载节点的注释，确保<div id="app"></div>正常渲染
• 将React逻辑脚本移动到挂载节点#app的后方，保证代码执行时DOM节点已经存在
• 将JSX内的class属性替换为className

修复后可运行完整代码 #

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

    <!-- React 依赖引入 -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <title>Markdown Previewer</title>
  </head>
  <body>
    <wrapper>
      <div id="app"></div>
      <textarea name="name" rows="8" cols="80" id="editor"></textarea>
      <div id="preview"></div>
    </wrapper>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

    <!-- 修复：添加type="text/babel"，移动到DOM节点加载完成后执行 -->
    <script type="text/babel">
      class App extends React.Component {
        render() {
          return(
            <div className="">
            Hi
            </div>
          );
        }
      }

      ReactDOM.render(<App/>,
      document.getElementById('app'));
    </script>
  </body>
</html>

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