JavaScript文件中使用JSX的方法步骤

1. 安装必要的依赖

使用 npm 或 yarn 安装 Babel 和相关插件：

# 使用 npm
npm install --save-dev @babel/core @babel/preset-react

# 使用 yarn
yarn add --dev @babel/core @babel/preset-react

2. 配置 Babel

创建 babel.config.json 或 .babelrc 配置文件：

{
  "presets": ["@babel/preset-react"]
}

3. 设置构建工具

选项 A：使用 Webpack

npm install --save-dev babel-loader webpack webpack-cli

webpack.config.js：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      }
    ]
  }
};

选项 B：使用 Vite（推荐用于现代项目）

npm create vite@latest my-app -- --template react

选项 C：使用 Parcel

无需配置，Parcel 自动支持 JSX。

4. 文件扩展名

确保 JSX 文件使用 .jsx 或 .js 扩展名：

// App.js 或 App.jsx
import React from 'react';

function App() {
  return <h1>Hello, JSX!</h1>;
}

export default App;

5. 旧版 React 的注意事项

React 17+ 不需要在顶部导入 React，但如果你使用旧版本或特定工具，可能需要：

// React 16 及以下需要此导入
import React from 'react';

6. 快速开始的替代方案

使用 CDN（仅用于学习/原型）：

<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  function App() {
    return <h1>Hello JSX!</h1>;
  }
  ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>

7. 在 Node.js 中直接运行

使用 @babel/register 或 @babel/node：

npm install --save-dev @babel/core @babel/preset-react @babel/register

// register.js
require('@babel/register')({
  presets: ['@babel/preset-react']
});
require('./app.js');

项目结构示例

my-app/
├── src/
│   └── App.js        # 包含 JSX 的文件
├── babel.config.json # Babel 配置
├── package.json
└── webpack.config.js # Webpack 配置（如果使用）

验证配置

创建一个简单的测试文件：

// test.jsx
import React from 'react';

const element = <h1>JSX is working!</h1>;
console.log(element);

然后运行构建命令查看是否成功转换。

常见问题解决

SyntaxError: Unexpected token '<'

确保 Babel 正确配置并处理了 JSX 文件

React is not defined

在 React 17 以下版本中确保导入 React
或在 Babel 配置中添加 "runtime": "automatic"

{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}