《React.js入门基础与案例开发》 总结
最近在网听了React入门的项目，写篇文章小结一下，为这个课程画上一个句号。
1.预备知识
这个课程的内容是用
React写一个新闻网页，我们用npm来管理项目，且使用webpack模块打包机进行打包。
1.1 关于npm
npm通常称为node包管理器。顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等；
在进行此项目之前，我有一定的npm基础，所以在做项目的过程中，没有遇到太多问题。想了解npm的小伙伴可以参考下面两篇文章：
主要回顾一下npm配置国内资源
npm是一个非常大的JavaScript包，但是在国外，所以由于网速的原因，我们使用npm进行安装的时候，有时会失败。
还好，淘宝做了一个npm的国内镜像。我们安装之后，使用cnpm install [xxx] 命令使用淘宝的镜像进行安装了。cnpm的安装和使用淘宝 NPM 镜像说的很清晰。
另一种方式是直接修改npm的配置项register，将npm所在的位置修改为淘宝的地址，Mac 的做法如下：在命令行中输入如下命令
cd ~ //进入根目录 atom .npmrc //用atom打开.npmrc文件
将.npmrc文件中的内容修改如下：
registry = https://registry.npm.taobao.org
这样我们使用 npm install [xxx] 就是从淘宝镜像进行安装了。
注：关于npm配置国内资源，老师写了一篇文章，讲的很是明白使用 CNPM 进行 Ionic 环境的安装与配置
1.2 关于webpack
webpack是一个强大的模块打包机，本项目中使用了React和ES6的语法，所以使用webpack是非常合适的呢！
webpack的内容还是很多的，比如说配置文件webpack.config.js、loader的配置等等；我在学习webpack的过程中，还是花了很多力气的。想学习webpack的小伙伴，我推荐下面这篇文章（真心讲的很好）：
我们主要说说webpack的热加载的配置，这个功能真的很好用。
常规情况下，我们配置好
webpack.config.js文件之后，使用webpack命令进行打包，然后手动刷新页面。就是说，我们在编写代码的过程中，要不断的执行webpack命令，再手动刷新，才能看到效果。还有一种厉害一点的方法，
webpack --watch命令来动态监听文件的改变并实时打包，输出新 bundle.js 文件，但是还是要我们手动进行刷新。-
最厉害的就是热加载，
webpack-dev-server主要是启动了一个使用express的Http服务器 。它的作用主要是用来伺服资源文件 。此外这个Http服务器 和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，实时编译后的文件都保存到了内存当中。因此使用webpack-dev-server进行开发的时候都看不到编译后的文件。首先安装
npm install webpack-dev-server终端输入命令
webpack-dev-server --inline
这样我们在浏览器输入 http://localhost:8080/ 就能看到我们编写的页面了，并能时时刷新。
需要注意的是：
webpack-dev-server并不能读取你的webpack.config.js的配置output，你在webpack.config.js里面的配置output属性是你用webpack打包时候才起作用的，对webpack-dev-server并不起作用webpack-dev-server打包生产的文件并不会添加在你的项目目录中。你启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中，它默认打包的文件名是bundle.js。-
因此在使用热加载时，我们引入的文件应该是
webpack-dev-server打包生产的文件(引用bundle.js文件需要直接引用根目录下面的！)<script type="text/javascript" src="bundle.js"></script>
这样就能享受时时刷新的待遇啦！
2.框架
项目中使用AntDesign框架来书写样式，AntDesign框架的很多组件很好用，比如：Tabs、Form、Carousel、Modal、Menu、Button等；AntDesign的 官网 是中文的，学习起来容易一些呢！
React项目的重点当然是React了，React的核心思想是数据驱动，我们从后台取到数据，再将取到的数据用 this.setState()进行保存，从而导致页面重新render。关于React我也在学习的过程中，下面的三篇文献是我最近正在学习的：
阮一峰大神曾说过：真正学会 React 是一个漫长的过程。
一起加油吧！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。