最近几天在看一个开源的数字货币交易所，这个交易所用的react前端框架，用了webpack打包，由于之前自己没有学习过webpack以及react，在这样的情况下看这个项目就显得比较的费力，通过近几天的学习，有一些感悟。
我是看的rails365的教程，感觉还不错，这个教程是webpack3的内容，大家可以照着这个教程学习webpack3学会了，webpack4也是很简单的。
首先新建一个项目，比如我这里就新建一个目录叫day
mkdir day
cd day
然后就初始化这个项目，这里需要注意的是，你不要把项目名弄成了webpack，不然会报错当时我就是起的这个名字。
npm init
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
必需要全局安装不然会报错，说找不到那个webpack。然后就一直按照rails365的教程走。在我刚接触package.json 的时候我是觉得package.json 是用的很少的，但是接触到了webpack就发现 这个文件的作用还是挺大的。比如script这个项目下面的一些对象就很有用，在刚开始接触npm start 可能不知道这个是什么意思，也没有什么教程给你说这是个什么意思，但是通过学习webpack你就会发现，这个脚本就是在package.json 里面，会让你觉得发明这个东西的人真的好厉害。举个例子，以免自己忘了这是什么意思了
"scripts": {
"dev": "webpack -d --watch",
"prod": "webpack -p"
}
这个就是你在敲
npm run dev
npm run prod
的时候会用到的脚本，学到这里我自己也明白了一些东西。接下来就是plugin这个插件，webpack生态圈里面的东西还是比较多的，这里只是其中的一个典型的插件。这个plugin插件的作用就是更好的组织js代码，能够适应js文件的动态的变化。html-webpack-plugin就是一个用来处理这些事情的插件。接下来就是loader了，loader就不做过多解释，就是用来加载文件的。在使用loader的过程中，在我的电脑上报了一个错
Error: Cannot find module 'html-webpack-plugin' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25)
通过找答案，发现，需要
rm -rf node_modules || true // remove node_modules (all deps)
npm install // install all deps
然后你再运行项目，就没有问题了。这是我的解决方案，你自己如果有这问题也可以试一试。loader 这个插件还是听不错。接下来了解下webpack-dev-server这个插件，我感觉这个件就显得比较厉害了，在开发环境下编译静态文件、在本地上开启服务，打开浏览器等。简单说下安装这个插件
# 先全局安装
$ npm install -g webpack-dev-server
$ npm install --save-dev webpack-dev-server
#运行
$ webpack-dev-server
这个运行起来之后，默认的端口是8080，你也可以在webpack.config.js里面去修改它，比如我现在修改它为3000
module.exports = {
entry: './src/app.js',
...
devServer: {
port: 3000
},
...
};
就在module.exports加一句devServer: {port: 3000},就可以了。你重新启动这个服务，就可以看到在3000端口的服务。这个webpack-dev-server使用的频率还是比较的高也比较给力，应该仔细的学习和掌握。
接下来看看babel这个控件，如过你没有听说过，那么你就把它理解成为一个翻译中间件，它在项目中就是负责把react代码转化成为普通的代码，或者是把es6 的语法转化为浏览器能够读懂的es5语法。我们通过学习react来熟悉babel这个中间件
$ npm install --save react react-dom
$ npm install --save-dev babel-core babel-preset-react babel-preset-env
我们需要在 webpack 中使用一个 loader 来转化 react 的代码。安装babel-loader这个中间件
npm install --save-dev babel-loader
按照reils365的教程，一步步去体会。
下面来到clean-webpack-plugin这个中间件的学习，其实这个中间件的功能就比较的容易让人理解了，就是在新生成文件的时候就先去清除之前的文件。这样就可以一定程度上避免混乱。在操作的过程中，又出了点问题报一些错误，在网上寻找答案，我发现重新
rm -rf node_modules
npm start
当然这个只是暂时解决，长期还是要有一个比较好的解决方法。像这样的情况可能就是依赖没有被检测到或者包没有安装好，所以报错。一直跟着rails365的教程走。到了模块热替换这个地方，我认为这个也是比较重要的。模块热替换 不用刷新浏览器，它是只让修改到的模块，才会在浏览器上发生相应的变化，就是生效，而不用重新刷新浏览器。在学习模块热替换中间件的过程中，我发现这个跟新的过程还是比较慢，不知道这个是不是正常的情况。然后一直跟着教程走，差不多走完了这个教程就对webpack打包有了最基本的认识，想要更好的学习这个，自己就要去练习几个项目。
学习完了webpack打包工具，现在就来学习react.js 这个前端框架，为了简便一些，也去找一个教程来跟着学做。这次还是使用rails365的教程，这个教程相对来说还可以，时长比较短，有重点，所以我个人感觉比较好。
下载Facebook在GitHub上面的creat-react-app这个项目，按照Facebook在GitHub上面的教程让这个程序运行起来。然后跟着rails365的教程走，基础知识都是比较简单的。这里需要书说明下，在这个教程的过程中千万不要跳着看，不然什么都不知道，知识点很紧密没有什么废话。
组件化是react前端框架的特点，所以这个是非常的关键，我们把creat-react-app重新命名为my-app,在项目中新建一个目录，在目录中增加两个文件
屏幕快照 2018-08-27 下午3.35.54.png
成为component目录下的目录项，按照rails365 的教程，这么走下去。
在这个过程中我记录了一下重点
1、 搞明白props和state的区别和用法
在react中props是没有状态的，props是一个组件的设置参数，可以在父控件中选择性设置。父组件对子控件的props进行赋值，并且props的值不可改变。一个子控件自身不能改变自己的 props。
在react中state是有状态的，当一个组件 mounts的时候，state如果设置有默认值的会被使用，并且state可能时刻的被改变。一个子控件自身可以管理自己的state，但是需要注意的是，无法管理其子控件的state。所以可以认为，state是子控件自身私有的。
所以，就是它的值能不能改变的这个最大的区别。
2、在组件中传值
这个在教程里面是说的最多的一部分，主要是要掌握怎么在父组件与子组件传值，在组件间传值主要是依赖于父组件。组件传值是非常核心的东西，一定要重点掌握。
在rails365的基础教程中教程，基本上就这两点，掌握之后，就有一个react的基础了。
网友评论