ReactJS按钮无法显示且报export语法错误的问题咨询

错误根源 #

1. ES模块语法不兼容：浏览器直接加载的普通脚本（未指定type="module"）无法识别export关键字，这是触发语法错误的核心原因。
2. JSX未转译：浏览器原生不支持JSX语法，代码中的<h1>、<button>等JSX写法无法被直接解析执行。
3. 自定义组件未挂载：代码中定义了MyApp组件，但未调用ReactDOM.createRoot().render()将其挂载到页面DOM节点上。

具体修复方案 #

1. 调整lik.js文件 #

移除export default关键字，并添加MyApp组件的渲染逻辑：

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <h1>Hello, 1234world</h1>;
root.render(element);

const root2 = ReactDOM.createRoot(document.getElementById('tworoot'));
const element2 = <h1>Hello, 5678world</h1>;
root2.render(element2);

function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

// 移除export，直接定义全局作用域的组件
function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

// 新增：将MyApp挂载到页面容器
const appRoot = ReactDOM.createRoot(document.getElementById('app-root'));
appRoot.render(<MyApp />);

2. 修改HTML文件 #

引入Babel工具转译JSX，并调整脚本标签类型：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- 新增MyApp组件的挂载容器 -->
    <div id="root"></div>
    <div id="tworoot"></div>
    <div id="app-root"></div>

    <!-- 加载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>
    <!-- 加载Babel用于转译JSX -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <!-- 指定脚本类型为text/babel，让Babel处理JSX语法 -->
    <script src="lik.js" type="text/babel"></script>
  </body>
</html>

3. 补充说明 #

• 若不想依赖Babel，可手动将JSX转换为React.createElement语法，例如<MyButton />等价于React.createElement(MyButton)，但该写法仅适合简单组件场景。
• 若坚持使用ES模块的import/export，需将脚本标签设为type="module"，同时调整React的引入方式为模块版本（需配合import maps配置），但对无构建工具的入门场景而言，全局作用域的实现方式更简洁。

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