慕课 《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 是一个漫长的过程。
一起加油吧!