破题
想要用组件的方式重构一下前段时间搞出来的前台界面，看来看去决定了React.js……这篇就作为破题了
入门基础知识
- React与ReactDOM：阮一峰老师的React 入门实例教程，大概了解了React与ReactDOM的最最基础知识，以及部分JSX、与Ajax结合等基础知识
- webpack：入门 Webpack，看这篇就够了，了解了webpack基本使用流程、各参数意义等。
碰到的问题
- 对React总体框架没有概念，不知道React、webpack、react-route、redux等应该用在什么场景下。茫然的查来查去看到了一句话：只有遇到 React 实在解决不了的问题，你才需要 Redux。挺有道理的，等遇到解决不了的场景的时候自然就会去找上面那几个工具。
- 本来想用require.js的异步加载来引入各用ES6语法写的js，结果发现并不像以前那样好用，如果直接引用ES6的js会报错。最后决定了用Webpack来预处理打包。
- 我在windows下安装的Webpack需要node环境，参考了windows下webpack快速上手（一）。根据官网教程一步步傻瓜装机似的装上了。
- 没有使用webpack构建本地服务器，因为8080端口被我正在跑的工程占用了……，等找找如何修改Webpack服务器的端口号再去搞本地服务器
- 创建
package.json文件，使用的npm init创建的，注意每步的提示填上信息就行了。每个字段的值参考的package.json文件。 -
webpack.config.js里entry代表的是待打包js文件，output才是输出js文件…… - 根据入门 Webpack，看这篇就够了打包后的main.js文件过大，看了一下打包后的文件，由于待打包文件里面有
import React from 'react'，导致main.js里面多引入了react与ReactDOM（这俩已通过html引入了），就又把这个import给删除了，大小瞬间降下来了。其他减小size的方法或许可以参考彻底解决 webpack 打包文件体积过大 - 有两个文件需要打包，A.js与welcome.js，要在A.js中调用welcome.js，要在A.js开头写上：
import WelcomeHostMonitor from './template/welcome.js';，注意路径只与A跟welcome.js的路径有关，不用考虑index.html与welcome.js的路径关系。不然webpack打包时会报错。 - Webpack打包A.js会自动打包welcome.js
- 要在welcome.js中加上
export default WelcomeHostMonitor，可以参考ES6模块的import和export用法总结，只有这样在html中才能访问到WelcomeHostMonitor，不然会报：
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
var WelcomeHostMonitor = React.createClass({
render: function() {
return (
<h1>Hello ~</h1>
);
}
})
export default WelcomeHostMonitor
- 未完待续……
阶段性成果
A.js调用了welcome.js后结果
下一步
- 修改welcome.js成一个具体的模块，试试Ajax与数据渲染
- 分析A.js能不能修改作为一个系统总入口
网友评论