http://video.ch9.ms/ch9/bb79/82273f3d-125a-4667-ab54-9bdaa528bb79/M216_mid.mp4
视频中探讨了TypeScript的结构和strong-typing的优势。如何利用TypeLite模式生成的迅速变化需求，对于前端和后端应用程序之间的同步开发。

awesome-react#components

React Tree 组件收集
React Table 组件收集
React Form 组件收集
Date & Time

Spinner

react-loader - React component that displays a spinner via spin.js until your component is
halogen - A collection of loading spinners with React.js
react-spinkit - A collection of loading indicators animated with CSS for React

Dialog

boron - A collection of dialog animations with React.js

Code Editor

react-codemirror - Codemirror Component for React.js

fatiherikli/React-designer React 的 SVG 编辑组件

hax/hax.github.com#22

https://github.com/zenorocha/clipboard.js

组件列表

• Libraries
• JavaScript Components
• React Components
• jQuery Libraries
• jQuery Components
• CSS
• Development Tools
• Other

Libraries

JavaScript Components

React Components

jQuery Libraries

jQuery Components

CSS

Development Tools

Other

https://github.com/jacomyal/sigma.js

教程

react-webpack-cookbook
React 入门教程 翻译
深入浅出React
React 文档中文翻译
petehunt/react-howto - 如何学习React

文章

轻松入门React和Webpack
基于react构建spa应用
ReactJS实践（一）—— FrozenUI React化之Loading组件
React单元测试——十八般兵器齐上阵，环境构建篇
React 组件，元素和实例
Smooth Game Animations in React - 文章通过react-tween-state、VelocityJS、CSS keyframes并结合demo，给出了3种不同的animation的解决方案。
Why we moved to React 架构迁移至 React 的经验分享
React 同构实践与思考

资源

Awesome React 列表(英文)
React.js 资料和教程 by @thoughtbit
react-redux-links

React Style Guide

Airbnb React/JSX Guide
react-starter-kit - React Style Guide

React 组件收集

#42

Examples

• redux-react-router-example-app

Boilerplate

• react-starter-kit
• este
• frontend-boilerplate - webpack-react-redux-babel-autoprefixer-hmr-postcss-css-modules-rucksack-boilerplate
• coryhouse/react-slingshot

【译】下一代选择器：CSS4

• react-treeview
  • https://github.com/chenglou/react-treeview
  • 示例地址 https://cdn.rawgit.com/chenglou/react-treeview/07132c6ad33a7b94d479eae60e84a0f02b2126da/demos/index.html
• react-ui-tree
  • https://github.com/pqx/react-ui-tree
  • 示例地址 http://luqin.github.io/react-ui-tree/example/
  • 支持拖拽
• react-json-tree
  • https://github.com/chibicode/react-json-tree
• react-json-inspector
  • https://github.com/Lapple/react-json-inspector
  • 示例地址 https://lapple.github.io/react-json-inspector/
  • 支持编辑、检索
• react-object-inspector
  • https://github.com/xyc/react-object-inspector
  • 示例网站 http://xyc.github.io/react-object-inspector/
  • 类似浏览器的查看对象
• react-json-editor
  • https://github.com/dustingetz/react-json-editor
  • 示例地址 http://xyc.github.io/react-object-inspector/
  • 支持编辑
• tree-view
  • https://github.com/maxogden/tree-view
  • 示例地址 http://maxogden.github.io/tree-view/
  • 类似文档结构
• react-bootstrap-treeview
  • http://jonmiles.github.io/react-bootstrap-treeview/
  • 文档结构
• react-tree-menu
  • https://github.com/MandarinConLaBarba/react-tree-menu
  • 示例地址 http://mandarinconlabarba.github.io/react-tree-menu/example/index.html
  • 有很多操作事件
• tree
  • https://github.com/react-component/tree
  • 文件结构
• react-pathjs-chart
  • https://github.com/rsamec/react-pathjs-chart
  • 示例地址 http://rsamec.github.io/react-pathjs-chart/
  • 图形树木
• https://github.com/alexcurtis/react-treebeard

InteractJS是一个JavaScript模块，它为最新的浏览器（包括IE8以上版本）增加了拖放、缩放和多点触控手势，并带有惯性和快照功能。

这个库的主要目的是替换jQuery UI所提供的功能。 因此，使用InteractJS来编写的web应用在智能手机和平板上会更加易用。 InteractJS是一个轻量级的库，可以与SVG技术协作，处理多点触控输入，而把渲染元素以及设置其样式的任务留给了应用程序。

官方的InteractJS站点提供了拖拽、快照、缩放和多点触控旋转的示例和用例。

https://github.com/JeremyWei/baidu-ocr
http://apistore.baidu.com/apiworks/servicedetail/146.html

redux-in-chinese - Redux 中文文档

react-redux-links

使用Redux管理你的React应用
深入到源码：解读 redux 的设计思路与用法
redux 资料收集 by @xuanxiao2013

http://www.bokeyy.com/post/do-not-use-bootstrap-like-this.html

【React终极教程】 本教程将为 EVE Online构建一个角色投票app（灵感来自Facemash）--一款大型多玩在线游戏。可以学习用Node.js构建REST API，保存和检索MongoDB数据，使用Socket.IO实时跟踪在线访客，用React+Flux构建单页app并最终部署到云端。源代码：https://github.com/sahat/newedenfaces-react

Tree.js是一种用来构建和操作可挂钩的树的JavaScript库。 对于查找和遍历目录结构，它是一种很有用的插件。

想象一下，你在web应用程序中有一个管理部分，需要浏览文件系统。 那么使用Tree.js，你就可以像下面这样来展示文件系统：

var myTree = Tree.tree({
    children: [
        {
            name: 'dupuis',
            children: [
                {
                    name: 'prunelle',
                    children: [
                        {
                            name: 'lebrac',
                            job: 'designer'
                        },
                        {
                            name: 'lagaffe',
                            firstname: 'gaston',
                            job: 'sleeper'
                        },
                    ]
                }
            ]
        }
    ]
});

为了找到一个节点，你可以传递任意一个有效的目录结构作为参数，就可以在这个树中搜索。

javascript
var lebrac = myTree.find('/dupuis/prunelle/lebrac');
lebrac.data() // { name: 'lebrac', job: 'designer' }
lebrac.attr('job'); // designer
lebrac.path(); // /dupuis/prunelle/lebrac

GitHub上的The Tree.js库提供了其他使用挂钩和保证（promises）的案例。

https://github.com/tapmodo/Jcrop/

React Native

教程

• React Native中文翻译文档
• React-Native入门指南

文章

• react-native 与 react-web 的融合
• React Native概述：背景、规划和风险
• react-native 之布局篇
• ionic和react native的区别
• “指尖上的魔法” -- 谈谈React-Native中的手势
• 三步将 React Native 项目运行在 Web 浏览器上面
• ReactNative增量升级方案
• REACT NATIVE 蛮荒开发生存指南
• React-Native之Android:原生界面与React界面的相互调用
• 在原生和React Native间通信
• iOS原生项目中集成React Native
• 将React Native集成至Android原生应用
• ReactNative开发指导

实战经验

• 一个上线了的React-Native的项目总结
• React&React Native初次体验
• react-native实战--简单登录UI实现
• 来订货小结
• React Native 在现有项目中的探路
• 一次RN跨平台开发之旅GitFeed

开源APP

• 官方演示App https://github.com/facebook/react-native/tree/master/Examples
• Hacker News iOS and Android App - Made with React Native
• react-native-dribbble-app https://github.com/catalinmiron/react-native-dribbble-app
• Leanote for iOS(云笔记) https://github.com/leanote/leanote-ios
• ReactNativeRubyChina https://github.com/henter/ReactNativeRubyChina
• React-Native新闻客户端 https://github.com/tabalt/ReactNativeNews
• newswatch(新闻客户端) https://github.com/bradoyler/newswatch-react-native
• buyscreen(购买页面) https://github.com/appintheair/react-native-buyscreen
• V2EX客户端 https://github.com/samuel1112/v2er
• react-native-todo https://github.com/joemaddalone/react-native-todo
• react-native-beer https://github.com/muratsu/react-native-beer
• react-native-stars https://github.com/86/react-native-stars
• 模仿天猫首页的app https://github.com/hugohua/react-native-demo
• ReactNativeChess https://github.com/csarsam/ReactNativeChess
• react native 编写的音乐软件 https://github.com/Johnqing/miumiu
• react-native-pokedex https://github.com/ababol/react-native-pokedex
• CNode-React-Native https://github.com/SFantasy/CNode-React-Native
• 8tracks电台客户端 https://github.com/voronianski/EightTracksReactNative
• React-Native实现的计算器 https://github.com/yoxisem544/Calculator-using-React-Native
• 房产搜索app https://github.com/jawee/react-native-PropertyFinder
• 知乎专栏app https://github.com/LeezQ/react-native-zhihu-app
• ForeignExchangeApp https://github.com/peralmq/ForeignExchangeApp
• Segmentfault 客户端 https://github.com/fakefish/sf-react-native
• 糗事百科app https://github.com/stormhouse/QiuShiReactNative
• 孢子社区app https://github.com/Hi-Rube/baoz-ReactNative
• 深JS app https://github.com/fraserxu/shenjs
• Den - 房屋销售app* https://github.com/asamiller/den
• Noder-cnodejs客户端 https://github.com/soliury/noder-react-native
• 知乎日报Android版 https://github.com/race604/ZhiHuDaily-React-Native
• ziliun-react-native https://github.com/sonnylazuardi/ziliun-react-native
• react-native-weather-app https://github.com/shevawen/react-native-weather-app
• React Native Sample App(Navigation,Flux) https://github.com/taskrabbit/ReactNativeSampleApp
• TesterHome社区app https://github.com/qddegtya/A-ReactNative-TesterHome
• Finance - 股票报价app https://github.com/7kfpun/FinanceReactNative
• shopping - 购物app https://github.com/bigsui/shopping-react-native
• react-native-nba-app https://github.com/wwayne/react-native-nba-app
• 一简：使用 React Native 开发的微博客户端 https://github.com/SFantasy/WeiboReactNative
• LagouApp - React Native 版仿拉勾 App, 用纯纯的 ES6 实现 https://github.com/Kennytian/LagouApp
• React Native仿猫眼APP https://github.com/yohnz/maoyanFilm

项目模板

工具

• code-push React Native package升级工具
• https://rnplay.org

组件

React Native组件搜索库

Material React Native (MRN) - A Material Design style React Native component library

react-native-baidu-map - 百度地图的React-Native Android版本
react-native-scrollable-tab-view

开发环境搭建

• 在Windows下搭建React Native Android开发环境
• 在Windows下搭建React Native Android开发环境
• React Native Android生成发行包
• React-Native环境搭建
• React-Native-Andoird的配置说明

资源

• awesome-react-native 系列
• React-Native 指南汇集了 react-native 学习资源与各类开源 app

Lining.js是用来处理带有元素的单独行的库。 你只需要在元素上增加data-lining属性，就可以使用Lining.js，然后使用CSS来设置它的样式。

在CSS中我们已经拥有::first-line这个选择器，可以在元素的第一行上应用样式。 但并没有类似于::nth-line()、::nth-last-line()或者::last-line之类的选择器。 Lining.js对你的文本提供了完整的行控制，如下示例所示：

<div class="poem" data-lining="">Some text...</div>
<style type="text/css">.poem .line[first] { /* `.poem::first-line`*/ }
.poem .line[last] { /* `.poem::last-line` */ }
.poem .line[index="5"] { /* `.poem::nth-line(5)` */ }
.poem .line:nth-of-type(-n+2) { /* `.poem::nth-line(-n+2)` */ }
.poem .line:nth-last-of-type(2n) { /* `.poem:::nth-last-line(2n)` */ }
</style>
<script src="YOUR_PATH/lining.min.js"></script>

现在，Lining.js只支持主要浏览器，像Chrome、Firefox、Safari和Opera。 但不支持IE。

http://www.w3ctech.com/topic/1545
Twitter融合了React.js与Velocity.js，打造了一款异常强大的JS动画库

JS-Git是一款使用纯JavaScript实现Git客户端和服务器端的开源项目。其主要采用模块化设计，可以运行在任何可以运行JavaScript的平台上。

原文

教程

• react-webpack-cookbook
• AriaFallah/WebpackTutorial - A simple webpack tutorial
• zhaoda/webpack-handbook

文章

• webpack-howto by @petehunt
• Start your own JavaScript library using webpack and ES6

模板

• webpack-demos by @ruanyf
• echarts-webpack-starter-kit
• webpack-css-demos

资源

• webpack 整理 by @thoughtbit

分析工具

• Webpack Chart by @alexkuz
• Webpack Visualizer by @chrisbateman
• original analyse tool

React 入门教程
English

推荐 14 款基于 JavaScript 的数据可视化工具

• 淘宝 UED http://ued.taobao.org/blog/
• 阿里妈妈 MUX http://mux.alimama.com/
• 天猫前端 https://github.com/tmallfe/tmallfe.github.io
• 百度 FEX http://fex.baidu.com/
• 百度 EFE http://efe.baidu.com/
• 腾讯 ISUX http://isux.tencent.com/
• 腾讯 AlloyTeam http://www.alloyteam.com/
• 携程 UED http://ued.ctrip.com/
• 百度搜索用户体验中心 http://ued.baidu.com/
• 手淘前端 https://github.com/amfe/article

http://www.baiduux.com/ 百度UFO
http://ued.sohu.com/ 搜狐UED
http://ued.taobao.com/ 淘宝UED
http://www.ued163.com/ 网易UED
http://www.uedblog.com/ YAHOO!CN UED
http://fed.renren.com/ 人人网FED
http://cdc.tencent.com/ 腾讯CDC
http://isd.tencent.com/ 腾讯ISD
http://www.sndaued.com/ 盛大UED
http://ued.koubei.com/ 雅虎口碑网UED
http://ued.alipay.com/ 支付宝UED
http://www.aliued.cn/ 阿里巴巴(中文站)UED
http://www.aliued.com/ 阿里巴巴(国际站)UED
http://www.alisoftued.com/ 阿里软件UED
http://www.the9ued.com/ The9 UED

http://mp.weixin.qq.com/s?__biz=MzA3Mjk1MjA4Nw==&mid=209278158&idx=1&sn=0a6a12eeab5ed87973de055196eac5b8#rd
自Facebook 开源出React 后，天猫技术团队就在一直关注，并对比现有Html5系的Hybird解决方案的差异性。天猫早是在15年的年中618大促及各会场业务页面中，率先在iOS平台上进行业务线上尝试，效果不错，得到肯定。

https://github.com/serratus/quaggaJS

QuaggaJS是一种条形码扫描程序，完全使用JavaScript编写，支持对各种类型的条形码——像EAN和CODE128——的实时定位和解码。

尽管已经存在各种各样的条形码库，但它还是从头编写的，而并没有从流行的zxing库移植过来。 QuaggaJS实现的特性是一种条形码扫描程序，它能够在图形中找到类似于条形码的样式，得到估计的边界框，包括旋转的情况。 这样，你就可以在图形中做很智能的二维码识别。

如果你想要完全利用QuaggaJS的优势，那么浏览器需要支持getUserMedia这个API，它在最新版本的Firefox、Safari、Chrome和Opera中都已经实现。

这个库暴露了以下API：

Quagga.init(config, callback)
这个方法会根据给定的配置和回调函数对库进行初始化，回调函数会在载入过程完毕后调用。 如果配置了实时检测，那么初始化过程还会请求访问相机。

Quagga.start()
当库初始化之后，start()方法会启动视频流，并开始对图像进行定位和解码。

Quagga.stop()
如果当前解码器在运行，那么在调用stop()之后，解码器就不会再处理任何图像。

Quagga.onDetected(callback)
注册一个回调函数，它会在成功定位和解码一个条形码模式之后触发。 在调用回调函数的时候，解码后的数据会作为第一个参数。

Quagga.decodeSingle(config, callback)
和上述的方法不同，这个方法不会依赖于getUserMedia，而会在单独的图像上处理。 提供的回调函数和onDetected中的一样，会包含解码后的数据作为第一个参数。

The QuaggaJS示例库中包含了更多示例和用例。

http://bennettfeely.com/clippy/

Brackets 是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。该项目由 Adobe 创建和维护，根据MIT许可证发布，支持 Windows、Linux 以及 OS X 平台。

Codiad 是一个开源基于Web的IDE应用程序，用于在线编写和编辑代码。

这个应用程序采用PHP开发，并且不需要一个SQL数据库，数据是存储在一个JSON格式的文件中。

Collide 是一个基于Web的协作型代码编辑器，可以在本地运行，通过http://localhost:8080来访问。该项目依赖于Google Web Toolkit、Guava以及其他库，还需要Java 7和Ant 1.8.4+等。 github

ACE 是一个开源的、独立的、基于浏览器的代码编辑器，可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过40种语言语法高亮，并能够处理代码多达400万行的大型文档。ACE开发团队称，ACE在性能和功能上可以媲美本地代码编辑器（如Sublime Text、TextMate和Vim等）。

Light Table is a next generation code editor that connects you to your creation with instant feedback. Light Table is very customizable and can display anything a Chromium browser can.

http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html

gitbook

Gitbook 使用入门

https://www.gitrep.com/
如何高效利用GitHub

http://fex.baidu.com/blog/2015/07/we-have-a-problem-with-promises/

Web动画 by @airen

https://github.com/bpampuch/pdfmake
http://pdfmake.org

原文

浅议内滚动布局

Exploring ES6

http://www.cnblogs.com/coco1s/p/4029708.html

React 在 Coding WebIDE 中的应用实践

原文：ES6 In Depth

infoq翻译：深入浅出ES6

• ES6是什么
• 迭代器和for-of循环
• 生成器 Generators
• 模板字符串
• 不定参数和默认参数
• 解构 Destructuring

CSDN翻译：探秘ES6

http://div.io/topic/746

Web应用组件化的权衡
[Web应用组件化的权衡 - slide](http://xufei.github.io/slides/2015/components and templates.html)
民工哥整理的对组件化的深入思考，值得认真研读。

前端学习资源 by @RedrockTeam

https://github.com/fehmicansaglam/progressed.io
progressed.io 可以很方便的在线生成进度条和徽章图标, 并使用 MarkDown 的图片内嵌语法将图标嵌入到自己项目的 README 等文件中去, 使文档看起来更加直观, 漂亮,

教程

ECMAScript 6入门 阮一峰

• http://es6.ruanyifeng.com/

Babel：learn-es2015

• https://babeljs.io/docs/learn-es2015

ES6 In Depth

原文：https://hacks.mozilla.org/category/es6-in-depth/

infoq翻译《深入浅出ES6》： http://www.infoq.com/cn/es6-in-depth/

1. 深入浅出ES6（一）：ES6是什么
2. 深入浅出ES6（二）：迭代器和for-of循环
3. 深入浅出ES6（三）：生成器 Generators
4. 深入浅出ES6（四）：模板字符串
5. 深入浅出ES6（五）：不定参数和默认参数
6. 深入浅出ES6（六）：解构 Destructuring
7. 深入浅出ES6（七）：箭头函数 Arrow Functions
8. 深入浅出ES6（八）：Symbols
9. 深入浅出ES6（九）：学习Babel和Broccoli，马上就用ES6
   
10. 深入浅出ES6（十）：集合
    
11. 深入浅出ES6（十一）：生成器 Generators，续篇
    
12. 深入浅出ES6（十二）：代理 Proxies
    
13. 深入浅出ES6（十三）：类 Class
    
14. 深入浅出ES6（十四）：let和const
    
15. 深入浅出ES6（十五）：子类 Subclassing
    
16. 深入浅出ES6（十六）：模块 Modules
    
17. 深入浅出ES6（十七）：展望未来
    

CSDN翻译《探秘ES6》： http://www.csdn.net/tag/探秘es6/news

1. ES6简介
2. 迭代器和for-of循环
3. 生成器
4. 模版字符串
5. 剩余参数和默认参数
6. 解构赋值
7. 箭头函数
8. JS的第七种基本类型Symbols
9. 使用Babel和Broccoli

探索 ES6（Exploring ES6）

• 原文：http://exploringjs.com/es6/
• 翻译：http://es6-org.github.io/exploring-es6/

资源

• es6-cheatsheet ES2015 [ES6] cheatsheet containing tips, tricks, best practices and code snippets

文章

ES6专栏

• 全面解析ECMAScript 6模块系统
• [翻译] We have a problem with promises

工具

• Babel
• ESLint ES2015+ 代码风格检查工具
• airbnb/javascript JavaScript Style Guide

模板

• systemjs-starter-kit - ES6 Modules starter project that uses Gulp, Babel, SystemJS, React, react-router, react-bootstrap, ECharts, three.js

Package Control

作为安装 Sublime Text 插件的必备利器，Package Control 是这款编辑器的标配，可以方便开发人员快速安装需要的插件。

React data table

• Griddle - A simple grid component for use with React
• react-grid - Data grid for React
• react-datagrid - A carefully crafted DataGrid for React
• reactable - Fast, flexible, and simple data tables in React
• react-table-component - React Table Component for creating a very basic html table
• fixed-data-table - A React table component designed to allow presenting thousands of rows of data
• react-pivot
• react-bootstrap-table
• https://github.com/bebraw/reactabular
• https://github.com/react-component/table
• http://lobos.github.io/react-ui/#/table

http://jimliu.net/2015/10/21/real-functional-programming-in-javascript-1/

文章

• 前端工程——基础篇
• 浅谈前端集成解决方案
• 前端工程精粹（一）：静态资源版本更新与缓存
• 前端工程精粹（二）：静态资源管理与模板框架
• 使用lerna管理大型前端项目

博客

• fouber/blog

其他

致我们终将组件化的 Web (长文多图)
前端工程之模块化
前端模块化
前端工程与性能优化
前端优化带来的思考，浅谈前端工程化

2016年JavaScript技术栈展望
前端重构之路（技术选型篇）
前端重构之路（组件化）

http://helmetrex.com/
Structor is former React UI Builder. But, it is better to read the following description and Wiki docs here because the builder has absolutely redesigned look and feel and has a lot of new features.

浅谈移动前端最佳实践