ref-list.md

Going big with React

从外界的听到的关于它的传言都是有误导的，React根本不是什么mvvm框架，只是带有丰富功能的，类似component概念的，具有良好生命周期设计的，可以通过JSX大大提高编码效率的—View，其中功能之一(插件形式)是mvvm而已，但他依然还是个View和其设计及组织View的理念。移动端用这个很是靠谱。

React观点

• simple !== familiar

TODO

• 重要 Streamlining React Elements
• H5 react-swiper
• H5 react-tappable demo
• immutable.js
• Imutable Data and React Youtube

代码质量

• airbnb js编码风格
• airbnb对应的jscs配置
• jscs的sublime插件

图片

• img lazy

官方文档

• JSX进阶
• 配套工具和教程(Complementary Tools)
• JSX和HTML的区别 里面讲到输出html的几种方法
  • unicode工具 很好的工具
  • DOM Differences
• 关于children的key，重要
• 关于复用component
  • propTypes的验证规则
  • Mixin
• Component Lifecycle
  • Mounting: A component is being inserted into the DOM.
  • Updating: A component is being re-rendered to determine if the DOM should be updated.
  • Unmounting: A component is being removed from the DOM.
• Forms
  • Controlled Components
  • Uncontrolled Components: An <input> that does not supply a value (or sets it to null) is an uncontrolled component. In an uncontrolled <input>, the value of the rendered element will reflect the user's input.
  • checkbox/radio使用defaultChecked实现Uncontrolled
  • textarea的值必须使用value属性来设置
• 重要概念Refs
• 捕获点击事件 onClickCapture
• 必须掌握的知识点 Multiple Components
• 必须掌握textarea的赋值

// WRONG
<textarea name="description">This is the description.</textarea>
// RIGHT
<textarea name="description" value="This is a description." />

• 必须掌握select的赋值

// WRONG
<select>
   <option value="foo" selected>Foo</option>
   <option value="boo">Boo</option>
</select>
// RIGHT notice the "value" attribute
<select value="foo">
   <option value="foo">Foo</option>
   <option value="boo">Boo</option>
</select>

对比事件处理

方法1：使用bind绑定参数

<span onClick={this.handleDelete.bind(this, this.props.id)}>
    删除
</span>

方法2：默认传入event对象

<span onClick={this.handleDelete2} data-id={this.props.id}>
    删除
</span>

webP

• webp介绍
• gulp-webp

ES6

• mozilla高质量教程 es6 in depth

代码质量

• eslint
• sublimelinter

svg as img

• 判断浏览器是否支持svgasimg
• 在浏览器不支持svgasimg的时候，如何降级
• svg好文 复杂样式实现

icon实现

• https://lincolnloop.com/blog/svg-sprites-and-icon-systems-are-super/
• https://css-tricks.com/gotchas-on-getting-svg-into-production/
• http://andrewliebchen.github.io/reacticons/
• webpack/webpack#595
• http://jsfiddle.net/3PfcC/
• http://stackoverflow.com/questions/11753485/set-img-src-to-dynamic-svg-element
• https://css-tricks.com/svg-sprites-use-better-icon-fonts/
• http://fontastic.me/ 在线工具
• http://simurai.com/blog/2012/04/02/svg-stacks/
• http://iconizr.com/

icon资源

• www.flaticon.com 有svg可以下载 很好很好
• www.freepik.com 搜索的结果都是集合，找起来比较累
• http://fontastic.me/ 也很大气
• http://iconmonstr.com/ 这个网站的设计也很大气 icon很少

相关CommonJS工具

• html to jsx
• browserify
• webpack
• flux
• Reflux：flux概念的一个优雅实现
• react cdn

基于React实现的UI

• React.js powered UI framework for developing beautiful hybrid mobile apps.
• React Hackathon toolkit
• react-touch
• widgets
• day picker
• Imager.jsx
• Imager.js responsive image solution

比较好的React教程

• React News: using React, RefluxJS, and a Firebase backend.
• Removing User Interface Complexity, or Why React is Awesome
• Complementary-Tools
• awesome-react 这是一个react的资料大全 需要自己找精华
• React TODO

Reactjs VS Angularjs

定位：

• React：A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
• Angular：

资料：

• When To Use AngularJS And When You Should Use ReactJS
• BirdWatch: AngularJS vs. ReactJS 老外做的复杂项目的实现比较
• Facebook's React vs AngularJS: A Closer Look 用react和angular实现同样的功能，对比行数，概念
• React.js and How Does It Fit In With Everything Else? 对于react的一些思考
• SPA实现对比：http://blog.celerity.com/react/flux-from-an-angularjs-perspective

Rating实现对比

• by Angular
• by React

React-Router

• 各种情况的匹配说明：Path Matching

• Route

   <!-- `path` defaults to '/' since no name or path provided -->

```

关于Reflux的相当重要的注意点

• Component的生命周期是永远不会重叠，即生命周期和该生命周期的一切属性(props/state/methods)都是一一对应的。当上一个生命周期的方法(比如addItem)没有执行完成时，即使Store层分发了新的数据，该Component的state数据和从Stroe获取的数据都一定是被触发时所对应的生命周期的数据，而不是新数据。

Flux相关

• 各种flux方案比较
• Introducing Relay and GraphQL译
• Reflux的中文介绍
• 网文：聊一聊基于Flux的前端系统
• 网文：理解reflux中的事件结合

其他

• MDN Javascript
  • Spread operator React中{...props}写法的来源
• HTML5shim
• console-polyfill

细节

• 关于升级的优雅提示 https://gist.github.com/sebmarkbage/ae327f2eda03bf165261#
• 当value/onChange和valueLink同时使用的时候，在控制台的提示。

起步样板库

https://github.com/celerityweb/react-flux-boilerplate

可以参考的站点样式

• http://www.thinkmill.com.au/

工具

• https://github.com/reactjs/sublime-react

动态

• emberjs/rfcs#15
• http://talks.erikbryn.com/htmlbars-emberconf/#/

Offline Transform

安装

npm install -g react-tools

监听

jsx --watch jsx/ src/
激活ES7的语法
jsx --watch --harmony jsx/ src/