要将 jsx 转换为浏览器可运行的 js 代码，您必须使用 babel。您可以babel-preset-react为此使用（通过配置 .babelrc）。

用于 React 的 Babel 预设

完成步骤：

1. 跑 npm install babel babel-cli babel-preset-react

2. 在项目根级别定义.babelrc，内容如下

   { "presets": ["react"], }

3. 跑 babel {jsxFile}.jsx --out {jsFile}.js

我对 Js 世界很陌生，听说过 babel 和 webpack 不知道如何使用它

上面的语句告诉我最好避免设置 npm 构建管道。
因此，假设您有组件jsx并且您想使用该javascript版本，您将需要“转换”它。如果是一个变化不大的组件，可以看看网上的babel.io repl（官方文档站点也推荐这个）。

但是，如果您的组件频繁更改，这种方法可能会很乏味。我强烈推荐create-react-app用于开发。它是一个固执的工具包，它隐藏了 webpack 和 babel 配置，但同时，他们的意见有据可查，适用于许多一般用例。

编辑 根据您的评论，您似乎已经在使用react-scripts，那么我看到的最可能的问题是您可能忘记homepage在 package.json 中指定该属性（请参阅相关文档）默认情况下，CRA 假定您的静态资产托管在服务器根目录下，我假设您没有在 ROOT 上下文中部署 WAR，因此您需要提供一个静态位置。

我有一个类似的设置，我需要将用 react 构建的站点打包在一个 war 文件中，我有以下设置：

在 package.json 中

"homepage": "/<webapp_context>/build"

然后使用 gradle，我将整个build文件夹复制到 WAR 文件（与 相同级别WEB-INF）。

这指示react-scripts将相对路径放在它发布的所有静态资产（例如 CSS、js 和图像）中，然后导入工作。