在完成react理论知识学习后，我打算通过一个简单例子去了解基于React开发，从开发到正式上线，整个过程是怎样的，然后再对各部分深入学习。
在开始之前，需要在电脑上安装：node.js、npm、react 的IDE（我选择的是Visual Studio Code）等。
简单例子做如下事情：
1、创建React项目；
2、开发环境运行项目；
3、React项目打包；
4、嵌入到JavaWeb程序中；
5、生产环境运行项目。
创建React项目
第一次创建，需要安装create-react-app脚手架。打开命令行对话框，执行命令npm install -g create-react-app ，完成脚手架的全局安装。
然后，通过create-react-app脚手架创建示例项目：exp_a。在命令行中执行create-react-app exp_a (其中，exp_a为项目名称),即看到如图1所示创建过程。
图1
完成创建后，可以看到创建结果如图2所示。
图2
在IDE中加载此工程可以看到图3所示代码结构。
图3
“public/index.html”为入口文件，与“src/index.js”配合使用。如图4所示。
图4
“src/App.js”中提供了一个名称为APP的组件。如图5所示。
图5
“src/index.js”中引入了组件APP，并将它展示在index.html中id为“root”的容器内。如图6所示。
图6
开发环境运行项目
在命令行对话框中，进入到项目exp_a目录中，执行npm start命令，即将exp_a项目运行起来了，默认访问地址为http://localhost:3000/ 。运行过程见图7所示。运行结果见图8所示。
图7
图8
React项目打包
1、修改默认配置
1）在package.json中添加“homepage”:”.”。如图9所示。
图9
2) 在“node_modules/react-scripts/config/webpack.config.js”中修改静态文件存放目录，将static改为static_file。如图10所示。
图10
2、执行打包命令“npm run build”。打包过程如图11所示。打包结果如图12所示。
图11
图12
嵌入到JavaWeb程序中
将生成的build目录中文件复制到JavaWeb项目的顶级目录中，如图13所示。即完成嵌入。
图13
生产环境运行项目
将JavaWeb打包部署到tomcat中，并运行tomcat。即，看到如图14的运行结果。
图14
如果看到结果为空白页，打开浏览器控制台看到如图15所示。则是因为“React项目打包”时，文件配置修改的不正确导致的。需要回去查找并改正，重新打包后，再行尝试。
图15
此时即演示了从创建react工程，到最终部署到生产环境的整个过程。希望能帮助到和我一样的初学者。
网友评论