React入门程序报错求助：模块导出与JSX语法问题

问题根源 #

• 第一个Unexpected token 'export'错误，是因为浏览器默认将脚本视为普通JavaScript，不支持ES模块的export语法，设置type="module"是正确的调整方向，但后续出现的Unexpected token '<'错误，核心原因是浏览器原生不识别JSX语法——你写的组件里的<>标签属于JSX，必须经过转译才能被浏览器理解。

快速验证方案（CDN方式） #

修改你的index.html，引入React、ReactDOM的UMD版本，以及Babel的CDN来实时转译JSX：

<!DOCTYPE html>
<html>
<head>
  <title>React Image Demo</title>
  <!-- 引入React和ReactDOM开发版 -->
  <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>
  <div id="root"></div>
  <!-- 将script的type设为text/babel，让Babel处理JSX -->
  <script type="text/babel" src="./index.js"></script>
</body>
</html>

调整index.js的写法，适配React 18的渲染规范：

// 定义基础函数组件
function ImageCard() {
  // 确保图片路径与index.html同级，文件名正确
  return <img src="./your-image.jpg" alt="展示图片" />;
}

// 渲染组件到页面根节点
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ImageCard />);

推荐的正式开发方案（Create React App） #

如果要长期开发React项目，建议直接用官方脚手架，它会自动配置好Babel、Webpack等编译工具，无需手动处理：

1. 打开终端执行：

npx create-react-app my-first-react-project

2. 进入项目目录：

cd my-first-react-project

3. 替换src/App.js内容为你的图片组件：

function App() {
  return <img src="./logo.svg" alt="React标识" />;
}

export default App;

4. 启动项目：

npm start

浏览器会自动打开并加载你的组件。

关键误区提醒 #

• 浏览器仅支持标准JavaScript，无法直接解析JSX，必须通过转译工具处理。
• type="module"仅能启用ES模块支持，不能解决JSX编译问题。

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