慕课 《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文件须要直接引用根目录下面的！)

  <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 入门实例教程

• React官网

• React Router 使用教程

---

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

一块儿加油吧！