如何在ExtJS 3.0中集成XAMPP上运行的React应用？

两种引入方式的问题根源 #

• <%@include file="index.html"%>是静态包含，会把index.html的代码直接嵌入JSP编译流程。如果你的React index.html里有完整的HTML根标签（比如<html>、<body>）、打包后的资源是绝对路径，或者存在和JSP语法冲突的内容，直接包含会导致HTML结构非法或编译报错。
• <jsp:include page="index.html" />是动态包含，运行时才加载index.html内容。但如果React的资源路径是相对路径，且JSP的上下文路径和React的部署目录不匹配，就会出现JS/CSS加载失败；另外XAMPP内置的Tomcat若未正确配置静态资源解析，也会导致无法访问index.html里的资源。

具体解决步骤 #

1. 修正React打包的路径配置
   打包React时必须设置相对路径，避免上下文路径问题：

   • 在React项目的package.json中添加"homepage": "./"，确保打包后的资源引用都是相对当前页面的路径。
   • 执行npm run build重新打包，将build目录下的所有文件复制到XAMPP的Tomcat webapps对应项目目录（比如webapps/myapp/react/）。

2. 调整静态包含的内容
   若使用<%@include，不要直接包含完整的index.html——JSP页面本身已有<html>、<body>结构，重复会导致HTML无效。修改React的index.html，只保留挂载容器和资源引用：

   <div id="root"></div>
   <script src="./static/js/main.xxxx.js"></script>
   <link href="./static/css/main.xxxx.css" rel="stylesheet">
   

   将修改后的文件放到JSP同目录，用<%@include file="react-fragment.html"%>引入（建议改名避免混淆）。

3. 动态包含的正确用法
   把React打包后的完整build目录放到Tomcat的webapps下，比如webapps/myapp/react/，然后在JSP里用绝对路径引用：

   <jsp:include page="/react/index.html" />
   

   同时检查Tomcat的conf/web.xml，确保默认的default Servlet配置了对.html、.js、.css等静态文件的支持（默认是支持的，除非被修改过）。

4. 处理ExtJS3和React的冲突

   • 两者可能存在全局变量冲突（比如都使用$），可以在React打包时配置webpack的externals，将jQuery这类依赖排除，直接使用ExtJS已有的版本，或修改React相关配置避免变量冲突。
   • 把React挂载到独立的DOM容器中，不要和ExtJS的组件DOM重叠，避免样式和事件互相干扰。

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