React Course Feedback about idoc

[GuoYongfeng]

preset和plugin的区别

这个问题很简单，下载其中一个preset，然后到node_modules目录下找到它，接着在点击preset目录下的node_modules目录，发现里面是一堆babel的plugin，so，我想你应该知道了，babel的preset其实就是一系列的plugin的组合，集成起来实现某个功能。比如，解析react的jsx语法或是解析es6语法。

[GuoYongfeng]

stage-0是对应的ES7提案语法的哪个阶段

这个问题也是我一开始比较关注的，为了偷懒，我直接摘抄一段答案过来，哈哈，不要介意。

任何人都可以向TC39提案，从提案到变成正式标准，需要经历五个阶段。每个阶段的变动都需要由TC39委员会批准。

• Stage 0 - Strawman（展示阶段）
• Stage 1 - Proposal（征求意见阶段）
• Stage 2 - Draft（草案阶段）
• Stage 3 - Candidate（候选人阶段）
• Stage 4 - Finished（定案阶段）

一个提案只要能进入Stage 2，就差不多等于肯定会包括在ES7里面。

ES7功能清单如下。

Stage 0：

• Function Bind Syntax：函数的绑定运算符
• String.prototype.at：字符串的静态方法at

Stage 1：

• Class and Property Decorators：Class的修饰器
• Class Property Declarations：Class的属性声明
• Additional export-from Statements：export的写法改进
• String.prototype.{trimLeft,trimRight}：字符串删除头尾空格的方法

Stage 2：

• Rest/Spread Properties：对象的Rest参数和扩展运算符

Stage 3

• SIMD API：“单指令，多数据”命令集
• Async Functions：async函数
• Object.values/Object.entries：Object的静态方法values()和entries()
• String padding：字符串长度补全
• Trailing commas in function parameter lists and calls：函数参数的尾逗号
• Object.getOwnPropertyDescriptors：Object的静态方法getOwnPropertyDescriptors

Stage 4：

• Array.prototype.includes：数组实例的includes方法
• Exponentiation Operator：指数运算符

ECMAScript当前的所有提案，可以在TC39的官方网站Github.com/tc39/ecma262查看。

Babel转码器可以通过安装和使用插件来使用各个stage的语法。

[GuoYongfeng]

写代码的时候怎么在windows下用命令行

其实，我用的是windows系统，一直希望拥有一个高配的mbp，暂且先不说这个，说多了都是泪。。。

在windows下使用命令行有这么几种选择：

1. windows自带的CMD命名行，不过说实话，体验不是一般差，也不能使用shell命名
2. 使用GIT BASH客户端，我目前是这样的，话说体验还是不错的，可以使用常用的shell命令
3. 下载一个强大的编辑器，在编辑器里面使用命令行，vscode和sublime比较推荐
4. 当然，使用模拟远程客户端软件也是很方便的，比如secureCRT什么的...

[GuoYongfeng]

babel和gulp及webpack的关系是什么

刚开始接触的同学是不是有点懵，为毛一上来要用这么多工具，这里简单解释一下，但不做系统说明。

1. Babel 是一个 JavaScript 编译器，如果你想用ES6、React，那么，使用babel来编译你的ES6代码和JSX语法会是最佳推荐，何况，学习起来也是so easy......babel丰富的preset和plugin完全能够满足你对代码编译的需求，如果不能，你还可以封装属于你的preset和plugin。
2. Gulp是一款利用 Node.js 流的自动化构建工具，可以用来增强你的前端开发工作流程，你可以快速构建项目，相对于Grunt，我比较喜欢它清晰的可编程体验，不用去配置又长又臭的配置文件，说实话，那样真的很烦躁，个人感受哈。
3. Webpack是一款强大的模块加载器和打包工具，比Browserify强大，可结合丰富的loader满足你的前端开发需求

那么，上面说完了，他们之间是什么关系呢，他们可以有关系，也可以没有关系，你可以单独使用他们完成你的项目开发，同时，也可以在你的技术栈里面把这三者结合在一起使用，也完全可以。

[GuoYongfeng]

atom编辑器的美化和配置

哈哈，这也是个不错的话题，说实话，在选择编辑器上面，还真是眼花缭乱。Atom、sublime、webstorm以及目前风生水起的vscode。就外观来讲，对于我这样的天秤座，Atom的漂亮的主题和编辑体验吸引了我，我目前正在使用的有：

1. docblockr
2. emmet
3. es6-javascript
4. file-icons
5. file-type-icons
6. react
7. minimap
8. autocomplete-paths

还有很多就不一一列出啦，另外，vscode也在持续关注，并下载体验了，以后也不排除会对Atom移情别恋，哈哈...

[GuoYongfeng]

class部分需要多讲一些内容

对于ES6中新增的class，这里面确实有很多内容可讲，但是本质的原理和我们之前的认知没有发生改变，我会加强对ES6部分知识的讲解，因为，上次的内容毕竟是以语法快餐的方式为主，请持续关注....

[GuoYongfeng]

关于调试的时候端口被占用的解决方式

1.先找到占用该端口的进程号

$ netstat -aon | findstr '1987'
  TCP    0.0.0.0:1987           0.0.0.0:0              LISTENING       32340
  TCP    [::]:1987              [::]:0                 LISTENING       32340

2.然后杀掉该进程

$ tskill 32340

[GuoYongfeng]

@gthb2016888737

这个问题提的也比较好，大家都在接触React的时候，同学百度搜索，看别人的文章，博客，买书。但是这样会有一个问题，就是获取的信息比较滞后，而且学习不成体系，这样的话总会有很多疑惑，不知道从何学起。

所以我的建议是：

单纯学习React

如果只是单纯的学习react，在react的官网把教程包下载下来，直接运行，写一些demo，或是上https://jsfiddle.net/，在线练习

系统学习React相关技术栈

如果要将React应用到我们的项目中的话，我们建议你按顺序去学习React相关的技术栈：

• npm
• es6
• babel
• react基础
• 使用react开发一个小应用
• 路由react-router
• 应用数据管理redux
• immutable.js
• isomophic-fetch

具体学习资料请前往：http://guoyongfeng.github.io/idoc/index.html

[henryzp]

@GuoYongfeng

我想问一下，像fis3这样的命令，在window下面是如何实现的？？

就是我的困惑是在mac下，可以在文件的js上面加一个#/usr/xxx，然后npm link，就可以使用了。。

在window下面是用package.json里面的bin属性吗？具体是如何使用的？

[GuoYongfeng]

@henryzp

你的问题很模糊。

1. fis3的命令在windows下面是如何实现的
当你全局安装fis3的时候（npm install fis3 -g），你运行fis3的命令的时候，会找到fis3这个package的index.js文件，而这个文件指向bin下面的fis.js文件，从而开始走进fis3的逻辑里面

2.npm link
npm link的作用是将你开发的模块link到本地的全局环境，这样你就可以在其他的模块中引用这个模块，从而进行测试。

3.package.json
这个文件的bin字段是可配置的

很多包都有一个或多个可执行的文件希望被放到PATH中，实际上，就是这个功能让npm可执行的。

要用这个功能，给package.json中的bin字段一个命令名到文件位置的map。初始化的时候npm会将他链接到prefix/bin（全局初始化）或者./node_modules/.bin/（本地初始化）。

"bin": {
    "uap": "bin/uap.js"
  },

[henryzp]

@GuoYongfeng

郭老师，我的问题是怎么实现在window下面，比如说我写一个test.js的node文件

本来需要node test来运行的，然后我只要test，然后回车，就可以得到我要的结果。。

是使用package.json里面的bin写法吗？

[pengchengCN]

关于TypeError: element.loader.split is not a function报错问题：
配置文件webpack.config.js里面的module
loader:["react-hot","babel"] 在有多项的时候loader需要加s

[lizhanjie1314]

react学习路线有点蒙，学习react前的一些工具中，指导安装什么，但是不知道应该配置一些什么东西，用那些东西，路线不太清楚，希望老师指点一下。
                                                                             ```

[lian-fei]

bulid目录下有index.html，执行webpack-dev-server之后，localhost:8080默认打开的是index.html，我把index.html改成了test.html,默认怎么打开test.html文件，怎么配置

[diandian18]

郭老师，谢谢您的课让我受益匪浅。
请教下，使用redux和react时，请求的时机是什么时候呢?
有时间能否写一个包括请求在内的完整例子呢？

另外推荐一个sublime主题，十分好看：【aprosopo】
一款好看的字体：【consola mono】

[MonetWest]

郭老师，我在Windows7 下babel,我node,npm,gulp ,都安装了；但是当我打算安装babel的时候，全局(npm install -g babel)和当前项目命令（安装$ npm install --save-dev babel-cli）都敲了，而且也没报错；但是当我在当前项目下，babel -v，报错，错误为：bash: babel: command not found

[Alisa0026]

郭老师，这个课件没有了吗，访问成404了

[GuoYongfeng]

有的，访问：http://guoyongfeng.github.io/idoc/index.html
然后第一行就有说明