GuoYongfeng / idoc

我的技术文档

http://guoyongfeng.github.io/idoc/

64 stars 93 forks source link

React Course Feedback #3

Open GuoYongfeng opened 8 years ago

GuoYongfeng commented 8 years ago

React Course Feedback

1.Babel

preset和plugin的区别
stage-0是对应的ES7提案语法的哪个阶段
写代码的时候怎么在windows下用命令行
babel和gulp及webpack的关系是什么
atom编辑器的美化和配置
2.ES 6
class部分需要多讲一些内容
rest和spread
3.Webpack
hash值是一样的
less-loader解析出错，node升级到5+版本后不会自动下载less模块
为什么要分离js
loader和loaders的写法区别
入口文件那加两行代码啥意思
如何将css也分离
整理一套webpack常用插件功能列表及示例
4.React Fundamentals
15.0.1版本的升级信息
canvas组件
组件生态及组件的购买
组件开发流程
defaultProp在ES6的写法
直接this.refs.xxx和findDOMNode后拿到的元素差异
5.React App Develop
暂无
6.React Router
动态路由
setRouteLeaveHook的action是POP，这个是否可以修改
history的三种定义方式
纯函数中props
7.Redux Fundamental
middleware
如何管理应用的store，如果想删除store中不用的state
性能优化
store的数据和RootElement关联，如何优化只渲染需要更新部分的数据
connect第一个和第二个参数的定义及写法
...state.slice(0, action.index)这种写法的渲染顺序
8.Redux Advanced
异步action
自定义devtools的monitor
devtool的使用和环境标识结合

GuoYongfeng commented 8 years ago

preset和plugin的区别

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

GuoYongfeng commented 8 years ago

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 commented 8 years ago

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

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

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

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

GuoYongfeng commented 8 years ago

babel和gulp及webpack的关系是什么

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

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

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

GuoYongfeng commented 8 years ago

atom编辑器的美化和配置

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

docblockr
emmet
es6-javascript
file-icons
file-type-icons
react
minimap
autocomplete-paths

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

GuoYongfeng commented 8 years ago

class部分需要多讲一些内容

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

GuoYongfeng commented 8 years ago

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

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 commented 8 years ago

@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 commented 8 years ago

@GuoYongfeng

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

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

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

GuoYongfeng commented 8 years ago

@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 commented 8 years ago

@GuoYongfeng

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

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

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

pengchengCN commented 8 years ago

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

lizhanjie1314 commented 8 years ago

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

lian-fei commented 8 years ago

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

diandian18 commented 8 years ago

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

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

MonetWest commented 8 years ago

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

Alisa0026 commented 7 years ago

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

GuoYongfeng commented 7 years ago

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