react js video tutorials - qianxueseng-com/guides GitHub Wiki

总论

  • 动手才是硬道理。在练习上花的时间越多，学习效果越好
  • 如果发现错误，记得这是一个wiki，请费心改正

有问题?

  • 常见问题的页面
  • 可以加入我们的微信群

模块一，Webpack, props 和 state

例子

  • 用React实现百度首页

笔记链接

视频链接

目的

  • 用JSX
  • 使用多个component
  • 使用props和state
  • 使用onClick和在component之前传递function
  • 使用propTypes和defaultProps

大纲

  • 为什么和展示最终产品
  • 起始代码 
      git clone https://github.com/qianxueseng-com/react-jsx-es6-babel6-sass-images-boilerplate react-baidu-homepage
    • 解释起始代码的所有文件
    • 简单的解释Webpack
  • 只用HTML实现所有功能
  • 用一个component
  • 用2个component但是不用props
  • 从root component用props传搜索按钮的文字
  • 安装Chrome插件
  • 绑定onClick
    • 错误的做法，直接去拿value
    • 画一个示意图
    • 正确的做法，input在onChange的时候改变state
  • 总结

更多读物

模块二，propTypes, defaultProps, list of components

例子

  • 实现简单版的朋友圈

目的

  • 多个components
  • propTypes
  • defaultProps

大纲

  • 为什么和展示最终产品
  • 一切都是列表 everything is a list
  • 起始代码
git clone https://github.com/qianxueseng-com/react-jsx-es6-babel6-sass-images-boilerplate react-moments
  • 只用HTML实现一个朋友圈的更新
  • 使用media object并简单介绍
  • 用一个component实现
  • 用多个component实现
  • 使用array, dummy array, dummy array with data
  • 解释key
  • 当数据不全的时候，需要使用PropTypes或者defaultProps
  • 总结

References: