React的简单例子

在完成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工程，到最终部署到生产环境的整个过程。希望能帮助到和我一样的初学者。