reactjs - 在 J2EE 应用程序中插入 React JS-JSX
问题描述
我的目标是在本地 tomcat 服务器上运行的现有(基于 JSP)J2EE 应用程序上添加基于 React JS 的新 UI 屏幕。是的,要求是使用现代 javascript/客户端技术添加新屏幕,但要保留现有屏幕。
我下载了单独的 react.js 和 react-dom.js,将它们添加到我的 J2EE 项目内容中,并将它们引用到 html 页面。通过这种方式(无需安装节点 JS 或设置反应开发环境),我能够实现我的目标,但我只能使用普通的 javascript React.createElement 来创建 UI 组件。
但是,我还需要使用 JSX 语法来加快我的开发速度。现在,要使用 JSX 功能,我了解到我必须设置 Node JS、Babel 等,并且必须构建应用程序。这不符合我的目标,因为我不需要独立的 React 应用程序,而只需要根据对现有 J2EE 应用程序的反应创建额外的屏幕。
所以,我需要专家的建议来做到这一点。我的问题是
- 如果我设置了 react+babel 开发环境并构建了一个应用程序,我可以轻松地获得转编译的 JS 文件,以便我可以将它们部署到我的 tomcat 服务器上吗?
- 如果是这样,这是实现我的目标的唯一方法还是有更好的选择来加快发展?
解决方案
你不需要专家的建议很容易。
1)您可以使用来自 Facebook 的 create react app 样板中的 create react 应用程序,它提供了开箱即用的所有内容。
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')
);
推荐阅读
- javascript - 如何在 DataTable 中保留固定列?
- azure - 无法从 Azure 门户在 Azure 函数中为 CsvHelper 添加 nuget 包
- angular - 如何在ngrx效果中的switchMap中抛出错误
- python - 在脚本中使用 cmake
- javascript - 如果它存在于字符串中,则将其替换为正斜杠的问题
- python - 改变 Django 表单
- javascript - 根据下拉列表值更改文本字段默认值
- php - 如何设置 PHP 内容输出的样式?
- node.js - Nodebeats -> MongoDB 连接使用 mongodb+srv 并且不使用 admin db 仍然抛出未经授权的错误
- javascript - 查询 firestore 中的文档集合并将其保存在变量中始终返回空