慕课 《React.js入门基础与案例开发》 总结

慕课 《React.js入门基础与案例开发》 总结

最近在慕课网听了React入门的项目，写篇文章小结一下，为这个课程画上一个句号。

1.预备知识

这个课程的内容是用React写一个新闻网页，我们用npm来管理项目，且使用webpack模块打包机进行打包。

1.1 关于npm

npm通常称为node包管理器。顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等；

在进行此项目之前，我有一定的npm基础，所以在做项目的过程中，没有遇到太多问题。想了解npm的小伙伴可以参考下面两篇文章：

• 安装Node.js和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的热加载的配置，这个功能真的很好用。

1. 常规情况下，我们配置好webpack.config.js文件之后，使用webpack命令进行打包，然后手动刷新页面。就是说，我们在编写代码的过程中，要不断的执行webpack命令，再手动刷新，才能看到效果。

2. 还有一种厉害一点的方法，webpack --watch 命令来动态监听文件的改变并实时打包，输出新 bundle.js 文件，但是还是要我们手动进行刷新。

3. 最厉害的就是热加载， 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文件需要直接引用根目录下面的！)

  这样就能享受时时刷新的待遇啦！

2.框架

项目中使用AntDesign框架来书写样式，AntDesign框架的很多组件很好用，比如：Tabs、Form、Carousel、Modal、Menu、Button等；
AntDesign的 官网 是中文的，学习起来容易一些呢！

React项目的重点当然是React了，React的核心思想是数据驱动，我们从后台取到数据，再将取到的数据用 this.setState()进行保存，从而导致页面重新render。关于React我也在学习的过程中，下面的三篇文献是我最近正在学习的：

• React 入门实例教程

• React官网

• React Router 使用教程

---

阮一峰大神曾说过：真正学会 React 是一个漫长的过程。

一起加油吧！