huzidaha / react-naive-book Goto Github PK

可否提供PDF版本？或者epub版本，可以离线学习？

尝试编译，缺少database file。感谢！

链接打开全都404了

#router
#redux-saga

文本过长会超出显示框，建议添加p标签添加自动换行 word-break:break-word;

为什么不用 textarea 的 autofocus 属性啊?
不是说尽量不用 ref 吗

Hello，everyone：

Lesson 29关于context的用法，最新的16.4.1版本react已经不使用this.context了，但是还是支持老的用法,后续版本就不会再支持this.context了。

最新的方法详见：https://reactjs.org/docs/context.html

举个例子：
比如component结构如下,App包含Child1,Child1包含Child2,Child2包含Child3.
现在需要把App里面传一个值red(注意是red不是blue)到Child3里面的button里面去：

1.首先在App里面要
export const ButtonColor=React.createContext(‘blue')
来创建这个context, blue是一个默认值，如果咱们没有写provider的话，默认就把blue传给 child component了，但是一般咱们都会写provider，所以blue在这里可写可不写，其实不写挺好的，省事。
2.在App render里面的return用
<ButtonColor.Provider value='red'> <Child1 /> </ButtonColor.Provider>
把Child1包裹住,此时说明了ButtonColor.Provider是一个provider了,提供的东西是red，这里打算把red传给child1 component以及他的child component,所以child 3也能接收这个value。
3.在Child3这个component里面首先要先
import {ButtonColor} from App.js,
然后用ButtonColor.Consumer包裹某个东西,这个东西必须是一个function,或者用箭头函数写更好.
<ButtonColor.Consumer> {value=>( <button style={{backgroundColor:value}}></button> )} </ButtonColor.Consumer>

这样就成功的把red 从app里面传到了child3的button里面了.当然咱们如果想要传个function什么都行，反正就是能隔着好几个component传东西，不过context肯定是不能替换redux的，毕竟功能太单一了。

如果有写错的地方，希望大神们指出来,欢迎大家指出来，共同进步，谢谢。

Regards
Ming

Thank you.

网站貌似无法打开了

如果对 react 源码感兴趣的朋友，欢迎一起共建。如果有什么好的外文需要翻译，也可以加到 仓库read.me 中的TODO列表。或者觉得什么文章好，也欢迎提 PR 收录进来。希望能一起对文章质量把关，一起共建社区最好的 react 源码生态环境

https://github.com/lizuncong/mini-react

http://huziketang.com/ 域名到期了，无法访问

看了您的文章受益匪浅。想请教一下：在项目中使用了redux,知道智能组件和展示组件的区别。可不可以在智能组件中使用react原始的this.state来控制自身内容展示和隐藏。即操作this.setState()的方法。

现在链接地址 显示的不是react小书的地址~ @huzidaha

您好，感谢您的教程
在章节 挂载阶段的组件生命周期（二）中，

class Index extends Component {
  constructor () {
    super()
    this.state = { isShowClock: true }
  }

  handleShowOrHide () {
    this.setState({
      isShowClock: !this.state.isShowClock
    })
  }

第一行Component前面应该加上 “Reacr.”
博主的像是React Native 的写法。

另外有两个问题想请教下博主：
1、这种.md文档是如何做出在线书籍的？（以您这本书为例，阮一峰老师的ES6教程似乎也是如此）
2、文中的做图软件是什么？
谢谢了。

在render()函数中直接返回字符串会报undefined的错误，应该用一个变量存起来。

<p dangerouslySetInnerHTML={{ __html: this._getProcessedContent(comment.content) }} />

这段应该报错，应改成
<p dangerouslySetInnerHTML={{ __html: this._getProcessedContent(this.props.comment.content) }} />

教程非常棒，感谢大哈。

邮箱：[email protected]
知乎：@胡子大哈
专栏：@前端大哈
加入《React.js 小书》读者交流群，一起讨论、交流、学习前端技术。

_上面提到交流群号是多少？_谢谢~~

以为是群友们的性质？可图片是你个人微信号，所以没有好意思加。呵呵！

如题：
想问一下，教程的图是用什么工具作成的，谢谢大哈

访问效果

error info

感觉这React小书写得超级棒，很好的入门书籍，但想问下大佬，后续还会更新技术点吗

感谢作者的教程，学起来很愉快。只是教程里评论总提示请文明用语。。。
学习lesson24这节的时候发现会有propTypes 的warning，查询后发现15.5后已经独立出来了
// After (15.5)
`import React from 'react';
import PropTypes from 'prop-types';

class Component extends React.Component {
render() {
return

Component.propTypes = {
text: PropTypes.string.isRequired,
};`
参考：https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes

RT，有了react生命周期，redux，还差一个路由的概念就完整了。

总计中写道：
总结
我们一般会把组件的 state 的初始化工作放在 constructor 里面去做；在 componentWillMount 进行组件的启动工作，例如 Ajax 数据拉取、定时器的启动；组件从页面上销毁的时候，有时候需要一些数据的清理，例如定时器的清理，就会放在 componentWillUnmount 里面去做。
也就是说，推荐在 componentWillMount 的时候进行数据请求。我在翻 react 文档的时候发现，上面是这么写的：
componentDidMount()
componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.
文档上说应该在 componentDidMount 阶段进行网络请求的实例化，那请问最好的进行网络请求的地方是在哪里？

http://huziketang.mangojuice.top/books/react/lesson39 中，mapStateToProps和mapDispatchToProps是否少了第二个参数this.props?

朋友推荐的，说写的非常好。但是不知道为何，访问非常慢。。。

在加入 createdTime 那一版的css中

.comment-createdtime {
  padding-right: 5px;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  font-size: 12px;
}

padding-right 属性多余了 ：)

https拒绝,http可用