Spring集成React用来开发前端----SpringMVC + react 开发实时测试

之前的博客主要是写了如何用maven将webpack功能开启用于打包react相关的组件成bundle.js，并把bundle.js导入HTML中，这里主要介绍一下如何在项目开发中随时查看react修改的效果，这里运行的project使用了springMVC；IDE用STS（spring tool suite，Eclipse类似）；React在Atom中修改；测试结果在chrome浏览器。

之前我尝试过将webpack部署到project中，run project并测试react，发现run failure，原因是bundle.js文件 out of sync，最终原因并没有很了解，猜测是webpack是maven plugin导入的，在run project时也是maven build 这样就会run project时候生成新的bundle.js，造成project building时的bundle.js总在更新，就会出现out of sync。这里的策略应该webpack和project分开运行，并将webpack生成的bundle.js路径设置成在project里生成，从而进行导入。 步骤如下：

1、项目结构
webpack和我的application project 是分开的两个maven webapp project，webpack project按照之前的maven-webpack进行配置，application project就是你自己的application了

webpack.config.js里output的file路径设置成你application project里的路径，从而将bundle.js导入application（这里我用相对路径定位到api-view project）。

ok, 这样 就可以 mven clean install 或者 npm run-script watch(修改实时生成bundle.js)，不懂的看我另一篇博文啦Spring集成React用来开发前端----maven项目中用webpack打包react相关组件

2、下面来看一下project里 关于react的组成
我的project是用了springMVC，前期的架构是很low的，controller里控制页面跳转及业务逻辑处理，当然会有service/dao/entity等，持久层用的hibernate，前端主要是ajax发请求，接受后端controller传递过来的json数据去拼接页面，对！很乱很low的一种方式，所以我后边的业务都打算用react实现了（前期选型真的很重要，有时候别偷懒会发现后边开发越来越顺利…），看一下project结构：

bundle.js是webpack project生成的，这里只要我修改了react相关组件，由于webpack是watch模式，它就会自动打包成新的bundle.js，对，打包到这里！bundle.js这个文件在哪里用得到呢？在queryAll.jsp里，看一下：

ok，这样你就可以顺利的run application了，application run起来后，你的应用就可以本地运行并用浏览器打开你的测试页面了（我的就是queryAll.jsp了），下一步的关注点就是bundle.js里的内容了，这里再重温下webpack，webpack将你写的所有react组件以及用到的package统统打包成一个文件，就是 bundle.js。下面介绍下如何开发react的IDE

3、Atom用来开发react
这个比较好用，你只需要把installed Packages里language-babel install一下就好，它可以转换jsx成js。
然后webpack project的woringdir（上边有提到）在Atom中打开，这里就可以随意编辑里边的jsx文件并保存，由于webpack的watch模式，会实时生成bundle.js文件，这个js在application中更新从而触发整个正在running的project在容器中更新（需要设置STS中的workspace：Preferences–>General–>workspace–>build automatically/refresh using native hooks or polling/save automatically before build打勾），这样你就可以直接在前端测试页面看到变化了。

当你在atom中修改组件并保存后，不要立刻就去页面测试，因为project 重新 refresh 并且building稍微用些时间。