arcthur / react-book-examples Goto Github PK

你好，看到第六章immutable优化时，推荐redux-immutable模块，但是看到其它文章的介绍，好像改得文件很多，redux-form-utils也没有提供对immutable的处理。总结一下的话，就是不太明白。能否麻烦您在第六章的基础上引入immutable，谢谢了。

发布到npm的应该是一个下载后可以通过import MyComponent from 'my-component'引入的模块吧？ 然后可以在自己的代码中通过<MyComponent ... />来使用……可是这个A.5.2的配置方法完全不能实现导出模块呀，只是实现了对源码的编译，然后生产项目可以直接用这个编译后的代码。

求教有没有讲webpack如何导出react组件的文章？我查了一下，网上各种资料讲的很混乱……请问有没有讲得比较好的比较标准的webpack导出react组件的方法的文章推荐？非常感谢！

componentWillReceiveProps(nextProps) {
if ('defaultActiveIndex' in nextProps) {
this.setState({
activeIndex: nextProps.defaultActiveIndex,
});
}
}

错误信息为:Uncaught TypeError: Cannot read property 'push' of undefined，devtools也没有显示actions
去掉的话，可以从devtools中看到actions正常发出去了

看到第二章发现有错误

我直接git clone 项目，然后cd 08/
然后 npm install 安装依赖包
但是报错了：▒▒▒▒ʱ▒▒ 00:00:00.40
gyp ERR! build error
gyp ERR! stack Error: C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (C:\Users\Administrator\desktop\forBook\react-book-examples\08\node_modules\node-gyp\lib\build.js:262:23)
gyp ERR! stack at ChildProcess.emit (events.js:189:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Windows_NT 10.0.17134
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\Administrator\desktop\forBook\react-book-examples\08\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\Administrator\desktop\forBook\react-book-examples\08\node_modules\node-sass
gyp ERR! node -v v10.15.3
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm WARN [email protected] requires a peer of react-dom@^15.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN react-book-examples@ No description
npm WARN react-book-examples@ No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2019-04-27T16_40_28_762Z-debug.log

第7章的示例代码有吗

Tabs.js文件中：
componentWillReceiveProps(nextProps) { if ('activeIndex' in nextProps) { this.setState({ activeIndex: nextProps.activeIndex, }); } }

应修改成
componentWillReceiveProps(nextProps) { if ('defaultActiveIndex' in nextProps) { this.setState({ activeIndex: nextProps.defaultActiveIndex, }); } }

你好，
2.6节里用Immutable优化shouldComponentUpdate的例子有点困惑。
书中提到两个Immutable对象的比较是比较内存地址，而例子中比较props和state的代码同时使用了“!==”和Immutable.is方法。

if (thisProps[key] !== nextProps[key] ||
!is(thisProps[key], nextProps[key])) {
return true;
}

我的理解是如果thisProps[key]是Immutable对象，很有可能“!==”比较为true，而后面的!is比较为false。这样不就矛盾了吗？结果并没有起到优化效果。
所以我觉得只需要用is方法来比较就可以了啊。

请指点。谢谢

Tabs例子，采用下拉框无法正确切换Tab页。

1. 51页52页53页多处target.removeEventListener('click') 来移除上面注册的click方法。
   removeEventListener(type, listener, [options|useCapture]) 中前两个参数是必选项。
   mdn removeEventListener
2. 48页

而 HTML事件则需要使用全部小写的属性名(比如onclick)

HTML并不区分大小 onclick 和onCLICK 是一样的效果

第五章redux例子，构建后放到服务器上，请求时，提示：
Location "/react/" did not match any routes，请问npm build后，为什么找不到路由了

const Button=>({ color, text }){
  return {
    type: 'button',
    props: {
      
    }
  }
}

这么写有语法错误吧，我翻了几遍语法书，箭头函数没有这么写的。

运行server.js后生成的bundle.js文件在哪里？能以文件夹01为例吗？

events.js:182
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE :::8787
at Object._errnoException (util.js:1041:11)
at _exceptionWithHostPort (util.js:1064:20)
at Server.setupListenHandle [as _listen2] (net.js:1322:14)
at listenInCluster (net.js:1370:12)
at Server.listen (net.js:1466:7)
at Function.listen (D:\company\project\react-book-examples\01\node_modules\express\lib\application.js:618:24)
at Object. (D:\company\project\react-book-examples\01\server.js:25:5)
at Module._compile (module.js:573:30)
at Object.Module._extensions..js (module.js:584:10)
at Module.load (module.js:507:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-book-examples@ start: cross-env NODE_ENV=development node server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-book-examples@ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\huang\AppData\Roaming\npm-cache_logs\2017-09-02T03_30_32_860Z-debug.log

line 17:6

按买的书找到源码地址，下载完安步执行不成功；是要特定版 node 吗？

$ npm run start

[email protected] start G:\workspaces\fe_workspaces\react\深入react技术栈\ react_develop\first_react_app
node server.js

module.js:529
throw err;
^

Error: Cannot find module './webpack.config'
at Function.Module._resolveFilename (module.js:527:15)
at Function.Module._load (module.js:476:23)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)
at Object. (G:\workspaces\fe_workspaces\react\深入react技术栈\rea ct_develop\first_react_app\server.js:4:14)
at Module._compile (module.js:624:30)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: node server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional log ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\aladdin\AppData\Roaming\npm-cache_logs\2017-11-18T13_29_4 8_993Z-debug.log

import React, {Compoment} from 'react';

class Button extends Compoment {
    constructor(props){
        super(props);
    }
    static defaultProps = {
        color:'blue',
        text: 'Confirm',
    }
    render (){
        return (
            <button className={'btn btn-${color}'}>
                <em>{text}</em>
            </button>
        );
    }
}

static defaultProps = {
这一行里面报错

ERROR in Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (57)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v3.13.1
@ ./css/style.scss 4:14-188 13:2-17:4 14:20-194

1.4.2

  static defaultProps = {
  	classPrefix: 'tabs',
  	onChange: () => {},
  };
.......


3. 用 function prop 与父组件通信

现在我们发现对于 state 来说，它的通信集中在组件内部；对于 props 来说，它的通信是父组 件向子组件的传播。相关代码如下：

7

handleTabClick(activeIndex) { // ...
this.props.onChange({activeIndex, prevIndex});

}

我们通过点击事件 handleTabClick 触发了 onChange prop 回调函数给父组件必要的值。对于兄 弟组件或不相关组件之间的通信，具体请看 2.4 节。

触发回调函数给父组件传值我明白，但是onChange写个空函数是什么意思？传过去啥也不干？

react-book-examples@ start D:\Work\test\react-book-examples-master\01
NODE_ENV=development node server.js

'NODE_ENV' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "D:\Program Files\nodejs\node.exe" "C:\Users\SF2160\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\bin\npm-cli.js" "--userconfig=C:\Users\SF2160\.cnpmrc" "--disturl=https://npm.taobao.org/mirrors/node" "--registry=https://registry.npm.taobao.org" "run" "start"
npm ERR! node v4.6.1
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! react-book-examples@ start: NODE_ENV=development node server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-book-examples@ start script 'NODE_ENV=development node server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-book-examples package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! NODE_ENV=development node server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-book-examples
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-book-examples
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\Work\test\react-book-examples-master\01\npm-debug.log

npm -v : 2.15.9
cnpm -v : 4.4.2

http://stackoverflow.com/questions/41340676/reactjs-the-syntaxerror-with-static-defaultprops
ERROR in ./src/app.js Module build failed: SyntaxError: Unexpected token (8:24)

https://github.com/arcthur/react-book-examples/blob/master/01/js/TabContent.js#L13

• 其中的isActive 这个props的作用是什么，个人认为这个不是TabContent应该关心的props，TabContent应该关心activeIndex 就行了
• 另外下面的childen.map中又重新定义了一个命名有冲突的isActive，虽然我认为此处才是真正应该得到isActive的地方，但命名规范似乎欠妥

e.stopPropagation()写成e.preventDefault();
不知道反馈的邮箱是多少，我很多地方找了半天，没有找到邮箱。 也不清楚我是否买到了盗版书籍。

node-sass依赖版本过低导致 修改package.json中node-sass的版本为最新版本即可

2.5.3 SearchSelect的实例代码可以提供下吗？非常感谢。

单选框与复选框的栗子错误。
type用的都是
"text"

你好，我在阅读第一个例子中，有一个问题，
https://github.com/arcthur/react-book-examples/blob/master/01/js/Tabs.js#L63
在这里调用了下onChange的方法。
但是在 defaultProps里 onChange就是一个空的箭头函数。
https://github.com/arcthur/react-book-examples/blob/master/01/js/Tabs.js#L22

书中写到。

我们在Tabs组件中设计了切换tab时的onChange 函数，通过传递 onChange prop到 TabNav子组件中，在子组件中完成对节点上事件的绑定
// 更新后执行回调函数，抛出当前和上一次索引（comments里）

我的问题是传递到TabNav组件的方法是handleTabClick方法，这里onChange如果是更新后执行的回调函数，抛出当前和上一次索引，是抛给谁了？

我尝试着将onChange方法在handleTabClick里去了，也没有什么错误。

没有搞懂onChange函数的作用，盼回复，多谢

components/Home/Preview.js line15
this.props.push(/detail/${id});

从浏览器network中可以看到请求成功了，但是在PreviewListRedux.js文件中的previewList函数中，打印action.payload没有请求到的数据。

Hi,i am reading your works recently.And i find one mistake in page Fifty-six,in the sample code of Radio an Check Box on line seven,it should be 'this.handleChange = this.handleChange.bind(this);'instead of 'this.handeChange...' Though it is tiny mistake and i hope in next version it will be corrected.And by the way,the book is useful~

看react项目的代码和第三章介绍的有些出入，不确定书中使用的是哪个版本

http://stackoverflow.com/questions/42749353/actions-may-not-have-an-undefined-type-property-have-you-misspelled-a-constan

问题在哪啊?

"state.home.list.articleList"是什么呢？

该示例 我整理在 codepen
该 multiple为true的 select组件并不会如示例原意所想的 返回多选的 option，而是每次选择仅返回当前选择的 option 的值。

` handleTabClick(activeIndex) {
const prevIndex = this.state.activeIndex;

if (this.state.activeIndex !== activeIndex &&
    'defaultActiveIndex' in this.props) {
  this.setState({
    activeIndex,
    prevIndex,
  });

  this.props.onChange({ activeIndex, prevIndex });
}

}`
文中对上面的代码描述是：然后，在 tab 点击事件上，对是否存在 defaultActiveIndex prop 进行判断即可达到在传入 defaultActiveIndex 时使用内部更新，当传入 activeIndex 时使用外部传入的 props 更新。
相关代码如下。

可是仔细看这段代码，只是对传入defaultActiveIndex传入时进行了判断，并没有兼容activeIndex传入时的操作，因为这里面只有一个if判断然后剩下的代码就是if为true时执行的代码，if里面只是判断defaultActiveIndex传入时。

有的时候想要先完整过一遍代码。
再对着书来验证自己的理解。
能否给代码加一些注释方便阅读呢？

报错信息：
C:\前端\学习资源\react-book-examples-master>npm start
npm ERR! path C:\前端\学习资源\react-book-examples-master\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'C:\前端\学习资源\react-book-examples-master\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\78274\AppData\Roaming\npm-cache_logs\2018-04-10T08_46_52_252Z-debug.log

2018-04-10T08_46_52_252Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Apps\nodejs\node.exe',
1 verbose cli 'C:\Apps\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: ENOENT: no such file or directory, open 'C:\前端\学习资源\react-book-examples-master\package.json'
5 verbose cwd C:\前端\学习资源\react-book-examples-master
6 verbose Windows_NT 10.0.16299
7 verbose argv "C:\Apps\nodejs\node.exe" "C:\Apps\nodejs\node_modules\npm\bin\npm-cli.js" "run" "start"
8 verbose node v8.11.1
9 verbose npm v5.6.0
10 error path C:\前端\学习资源\react-book-examples-master\package.json
11 error code ENOENT
12 error errno -4058
13 error syscall open
14 error enoent ENOENT: no such file or directory, open 'C:\前端\学习资源\react-book-examples-master\package.json'
15 error enoent This is related to npm not being able to find a file.
16 verbose exit [ -4058, true ]

大神第五章代码, 点击标题,不能跳转到详情啊.!!!

Module not found: Error: Cannot resolve module 'react-dom/lib/ReactMount' in E:\Files\Front\react\react-book-examples\01\js
@ ./js/app.js 1:337-372

这是第一张的示例的代码，几个js都报这个错误，npm install 之后，执行npm run start 就报错，我在node_modules/react-dom/目录都找不到lib/ReactMount，是在一个try 失败了catch里面报的错

https://github.com/HaileHuang/my-components/blob/master/src/components/SearchSelect.js

RT，我的React版本是15.4.3，代码照书上敲的，报了两处错误

1、constructor中初始化handleClick方法的作用域绑定失败，报undefined，找不到方法，后来在render里绑定成功，onClick="this.handleClick.bind(this)"

2、 handleClick方法里的加法运算报错，找不到count，后来改成count: this.state.count + 1 后成功

不知道是怎么回事，环境是mac，node版本7.x