在 J2EE 应用程序中插入 React JS-JSX答案

【问题标题】：Insert React JS-JSX inside J2EE application在 J2EE 应用程序中插入 React JS-JSX
【发布时间】：2019-06-07 07:20:48
【问题描述】：

我的目标是在本地 tomcat 服务器上运行的现有（基于 JSP）J2EE 应用程序上添加基于 React JS 的新 UI 屏幕。是的，要求是使用现代 javascript/客户端技术添加新屏幕，但保留现有屏幕。

我下载了单独的 react.js 和 react-dom.js，将它们添加到我的 J2EE 项目内容中，并将它们引用到 html 页面。通过这种方式（无需安装 node JS 或设置 react 开发环境），我能够实现我的目标，但我只能使用普通的 javascript React.createElement 来创建 UI 组件。

但是，我还需要使用 JSX 语法来加快我的开发速度。现在，要使用 JSX 功能，我了解到我必须设置 Node JS、Babel 等，并且必须构建应用程序。这不符合我的目标，因为我不需要独立的 React 应用程序，而只需要根据对现有 J2EE 应用程序的反应创建额外的屏幕。

所以，我需要专家的建议来完成这项工作。我的问题是

如果我设置了 react+babel 开发环境并构建了一个应用程序，我是否可以轻松获取转编译的 JS 文件，以便我可以将它们部署到我的 tomcat 服务器上？
如果是这样，这是实现我的目标的唯一方法，还是有更好的替代方法来加快开发速度？

【问题讨论】：

标签： reactjs tomcat jsx

【解决方案1】：

您不需要专家推荐，这很容易。

1) 您可以使用来自 Facebook 的 create react app 样板的 create react app，它提供了开箱即用的一切。

https://github.com/facebook/create-react-app

2) React 应用需要一个 div 来加载 js。

Keep generated js bundle from above step in J2EE application and load script on JSP page using script tags.

<script src="/reactbundle.js"></script>

<div id="root"> </div>  // create this div in existing J2EE application in HTML or JSP file.

ReactDOM.render(<App />,document.getElementById('root')
);

【讨论】：