应该分几个部分去了解一个新技术
一、技术的背景（解决了什么问题，什么模式）
Blue：
1、过去的MVC开发模式是模型加视图，数据双向绑定，直接操作DOM,当数据交互复杂交错的时候，不方便应用的开发，同时直接对 DOM操作会延长请求数据时间，数据双向绑定可能导致不同页面展示的数据错乱等问题，故不适用于大型应用开发。
2、react是 js框架，不是MVC开发模式，它是用于构建可预期的和声明式的web应用，把页面分割成一个个独立的可重复使用的组件，数据单向绑定，这样在大型应该开发过程中，可以很容易对各部分代码进行修改和管理，不同页面可以重复使用一个组件，又可以保证独立数据交互。
3、react的出现改善了之前MVC开发模式所暴露的缺点，满足了大型应用程序开发。
Bert：
没错，不知道大家有没有发现，现在很多地方都在取舍如何使用 "数据共享" 这个概念。
我们现在的四层架构，虽然提取出了微服务，但是业务层之间是隔离的。
数据库，也会因为业务方面的因素，使用数据冗余。
作为新手在各个论坛上看到大神们如何提取出一个非常通用的方法，就会羡慕不已，实际工作共也会被大家喷，为什么这里长得一样，不抽取成公共的？
实际上抽象是一个高级的活，对于底层开发而言，不深刻理解上下文，做出来的公用方法都是瞎扯淡。
所以现阶段很多框架帮助大家实现数据共享，双向绑定等，用起来很舒服，但在维护阶段非常痛苦，往往牵一发动全身。
SiHang：
react的功能其实很单一，主要负责渲染的功能，react只负责ui渲染，想要做好一个项目，往往需要其他库和工具的配合，比如用redux来管理数据，react需要掌握es6
Bert：
为什么我喜欢React？传统的框架都是在js里面操作DOM，是紧耦合的，而React是真正做到松耦合的语言。
作为React的开发者，大家一定要习惯一点：所有的操作能有数据解决，就不要去操作DOM。
就是因为React的松耦合，所以微信可以做出小程序。（这是我个人的理解）
所有的数据，都可以使用Js，而UI层，用什么体现总要吗？使用Html还是XML又或者其他？
React真正的做到让开发人员专心写Js，把渲染的工作交给组件。
我觉得这个是未来前端发展的一个大方向。
Jack：
react提供了良好的虚拟dom对象，让元素组件化，增强了可复用性
react如果非要和mvc关联的话，只是其中的view层
模式：FP-函数式程序设计
Bert：
组件化的思维，让开发更容易理解组件复用这个思维，其实所有框架都是可以复用的，只是对于开发而言没有规范。
虚拟DOM的好处不仅仅与复用，而是为JS何HTML分离打下了基础，通过算法加速了页面解析速度。
React在整体看过去确实是做的view的事情。
函数式编程的最佳实例是Redux，而不是React
lLQunBin：
通过构造虚拟DOM提高了Web的性能，解决了复杂和频繁的DOM操作产生性能的问题，
采用的是组件化开发模式，总要操作于View是视图层对页面进行开发
Bert：
理解的不错，虚拟DOM不仅仅提高了性能，传统开发模式的性能与React不分高下，虚拟DOM起到的决定性作用是让开发人员脱离了DOM操作，且不会降低性能。
JiaWei
a) 解决大量操作节点的需要；
b) 组件化；
c) 提高性能；
d) 单向数据流；
Bert：
该说的都被你总结了，最好还是加上一些自己的理解，很多东西百度一下出来对自己的提升帮助不大 >.<
Rex：
采用了MVVM模式，通过DOM的虚拟减少DOM的交互
Bert：
理解不到位，可以看看前面的回复
ShanShan：
React：用于构建用户界面的库，仅仅关注UI层；解决面需要不断加载导致速度很慢的问题；采用了虚拟DOM,把UI拆分成组件，引入了JSX语法规则，可以使用类似HTML的语法去写js的函数调用
WebPack:把有依赖关系的各种文件打包成一系列的静态资源
Bert：
大部分的UI框架都是关注UI层，且执行速度并不满，如Jquery，到目前为止性能都不弱。
WebPack是React生态体系之一，但不起到决定性作用，他只是做了打包编译的活，如果有比他更合适的工具，却换成本不大。
XuYang:
React 利用jsx语法构建ui，有点类似于view层。Redux 用来处理数据和逻辑，与react连接，对页面数据进行模块化处理，两者结合起来类似于MVC框架。吃
Ant 是ui库，可以很好的与react结合。
Bert：
最重要的虚拟DOM你给漏了 ^_^
二、技术的体系（js,jsx,webpack,npm）
Blue：
该新技术主要包含了js\jsx\webpack\npm这几部分内容， js作为主体，贯穿整个应程序开发；jsx的作用是可以在js 中插入html标签；webpack相当于模块打包机，它把整个项目看成一个整体，通过一个切入点，查询各个模块中无法被js解析对内容进行打包，然后解析成可以被js 识别对代码渲染到页面；npm是react开发技术中所需要的依赖插件，引入各自插件有利于在开发过程中，开发出丰富的应用。
Bert：
大家都被括号的内容局限了，其实React生态除了这些还有很多，希望多去了解了解，像Redux、Immutable等，都是技术体系中的，只是现在没有使用。
SiHang：
react 还是一个类似组件包的东西 由多个小组件构成
Bert：
起码解释一下括号里的内容嘛 >.<
Jack：
js：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言
jsx：JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
webpack：webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
npm：包管理工具
Bert：
多想想，其他的东西，还有哪些技术体系，可以在评论中留言。
LiQunBin：
1.JS基于ES6的javascript进行发开
2.JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
3.webpack用来打包项目代码，解析成浏览器可以识别的代码
4.npm用来安装工程环境
Bert：
其实ES5也是可以使用的，但是ES6的语法更加规范，所以我们使用了ES6
JiaWei：
a) Webpack：简化开发复杂度，提供各种依赖包，并将浏览器无法识别或者识别困难的JS、css等转换为浏览器可以识别的代码。
b) Npm:用于启动项目，提供服务。
c) JSX：可以使组件和组件之间的结构看上去更加清晰。
Bert：
多想想，结合以往的经验，思考下还有哪些技术体系。
Rex：
js、jsx、webpack、npm、组件
ShanShan：
jsx：javascript 和xml
webpack：这个配置文件主要分为三大块：
1.entry 入口文件 让webpack用哪个文件作为项目的入口
2.output 出口 让webpack把处理完成的文件放在哪里
3.module 模块 要用什么不同的模块来处理各种类型的文件
如何配置不清楚，需要继续学习
npm：用来安装所需要的依赖
Bert：
Webpack的文档很多，但是我们实际用的到的很少，学习一门工具，最好的方式是有需要的时候去学习，如果只是干学不用，会影响到自己的热情。
XuYang：
Js 部分主要使用ES6/ES7，原生js体系。
Jsx 可以使react直接支持 html写法来编写ui框架，用来代替常规的js写法，更趋向于原生HTML写法。减少很多工作量。
Webpack 是自动化发布工具，用来编译es6/es7 自动打包，自动压缩，自动化发布方面的工作
NPM 包管理工具。
Bert：
大家都被局限了~~~
三、采用的开源框架（react + ant，整体架构是怎样的）
Blue：
react为主体结构，ant是UI框架，通过view绑定方法到action,在action里面通过标记连接reduce,在reduce 里面进行拦截，把数据存入state，渲染到页面中，并且实现了前后端分离。
Bert：
Antd只是帮我们做了组件分装的活，方便了我们的开发，且使用它们做出来的组件，更方便、易用、稳定。
SiHang：
redux 则来处理大量数据交互的问题 antd 算是react 配套的组件 是写好的东西 就像bootstrop
Bert：
理解的不错，如果有能力，我们可以做自己的组件库。
Jack：
采用的开源框架（react + ant，整体架构是怎样的）
react ：负责提供dom生成
ant ：提供UI库
Bert：
解释了一遍没有讲到要点。
LiQunBin：
Ant UI框架，基于react组件话开发模式，整体的界面效果很好，也有着丰富的API可以使用，用起来也很方便
Bert：
没错，Antd做的比我们自己做的好，那么就先用，边用边学习。
JiaWei：
a) ant基于react来开发，基本上开发者不用过多的编写html代码以及CSS。他们两个的关系类似于：ant为菜，react是刀，开发者是厨师，npn/node是炉子和火、webpack为调味品。厨师用刀处理菜，然后烹饪出一盘菜。
Rex：
不懂
ShanShan：
采用的开源框架（react + ant，整体架构是怎样的）
采用的开源框架是react-webpack-redux
架构里面主要包括以下文件夹：
conf-配置文件
node_modules-安装的依赖包
actions - 行为的抽象
components - 可复用的组件
containers-不知道
images-存储图片
reducers-响应的抽象（目前在项目里面都是存储的数据文件）
static-静态资源文件
sources-资源管理
stores-reducer放在stores,action作用于stores，reducer根据stores进行响应
test-单元测试
这个框架里面action、reducers和store三者的使用比较迷糊
Bert：
这里提到Webpack和Redux很好，证明没有被题目局限，Webpack和Redux都是开源框架之一。
action、reducers和store是属于Redux的，可以先去看看相关文档，问一些更深入的问题。
XuYang：
入口entires 定义路由组件，根据路由调用view页面，view页面调用 不同的components组件，页面或者组件定义事件响应 触发actions，actions调用相对应得reducers层，根据type 来执行响应的reducers层，reducers用来处理数据的改变以及改变stroe ，根据react的机制来对页面数据进行修改。Api层用来调用服务器数据，constants定义常量。Uitl定义公用方法。Antd用来支持ui。类似于components的组件。
Bert：
看的出来使用起来越来越熟悉了，快要出师了 ^.^
其实整体架构就是：
Redux操作数据（实现数据共享）
Antd负责UI，提供现成的组件
Webpack负责打包编译。
四、开发的框架（在开源框架基础上增加哪些部分？）
Blue：
可能是增加了cpmmponent，react不是直接对DOM进行操作 ，而是通过虚拟的DOM，把数据放在虚拟DOM上，计算最小的时间请求服务器，也减少了请求服务器次数。
Bert：
这个题目比较深入，需要可以理解各种关系后梳理出来，有更好的梳理随时在评论中留言
Jack：
redux：轻量级的数据管理工具 （让每个react生成的虚拟dom 中的数据可以 互相调用 ）
Bert：
我们的脚手架在基础框架上增加了什么，如何让他们结合起来工作的。
LiQunBin：
对数据和方法进行分开放置，分开管理；
通过type标记连接方法与变量
JiaWei：
4. 开发的框架（在开源框架基础上增加哪些部分）
a) ES6；
b) React;
c) Redux;
d) Less;
e) Ant-design;
f) Webpack;
g) Npm/cnpm;
h) Git;
i) json
Rex：
nodejs、redux
ShanShan：
采用开源框架react-webpack-redux
使用yeoman初始化项目yo react-webpack-redux “项目名字”,增加的部分现在不知道
XuYang：
增加了api的数据处理
增加了store的reducers将所有reducers合并处理。封装了数据请求的三个状态'PENDING', 'SUCCESS', 'ERROR'
Bert：
没错，继续深入，还有很多。
大家可以看看我之前写的 React+redux+webpack 项目构建：初具规模
五、练习，遇到问题，解决问题
Blue：
action 里面的params{}还是很模糊；
Bert：
阅读 uitl/index.js
export function createReducer(initialparams, reducerMap) {
return (params = initialparams, action) => {
const reducer = reducerMap[action.type]
return reducer ? reducer(params, action.payload ? action.payload : {}, action.params) : params
}
}
这快代码是做什么用的，可以在评论中留言。
SiHang：
写代码开始的时候，各种语法错误， 引用不到位，看代码出错提示，依赖问题，引用路由显示页面。。等等
Bert：
现在呢，还有入到类似的问题吗？或者有其他问题？在评论中留言
JiaWei：
a) 需要的不是一个已经搭建完成的模板，然后我们对其进行各种扩展，而是需要弄懂怎么去搭建一个框架模版出来，授人以鱼不如授人以渔。
b) 框架有各种文件夹，但是各文件夹有什么作用，分别是做什么的，在框架中主要是放置一些什么东西的。（所有页面调用的公共方法、单个页面的方法、数据的传递、数据的获取、状态的传递）
我的疑问：
1. ES6，框架本身也可以使用原生的JS，为什么要使用ES6。
2. React学习起来，概念简单，也不是太复杂。但是学习成本还是比较高，难度比较大。也比较繁琐。
如何使用可以在我写的 Redux使用笔记中看到相关内容，其他的在前面有做回复，如果有新问题，可以评论给我
ShanShan：
说一下自己的学习过程：我感觉我个人在学习这个框架的过程中，从一开始接触的是react语法和组件的使用，忽略了这个框架应该如何搭建，配置文件应该如何配置，自己去网上百度的时候到处都是react+webpack之类的文章，看着很迷糊，学的时候比较迷茫，因为我之前也没有接触过前端，好多语法什么的本来就特别弱，概念也没有那么清楚，所以有没有什么比较好的方法学习这套框架
可以看看我写的 Redux 使用笔记，有问题评论中留言
XuYang：
1、antd的版本问题，api与实际不太一样。解决方法：升级antd版本
2、state的深度拷贝问题，解决办法：使用immutable
3、css修改antd默认样式问题。解决办法：暂时没有很好的解决办法，提升自己的css权重，覆盖原样式
Bert：
有经验的高手就是不一般，哈哈
YangGuang
关于React
一.技术背景
在Web开发中，总是需要把变化的数据实时反应到UI上，这时就需要对DOM进行操作，而复杂或频繁的DOM操作通常是性能瓶颈产生的原因，为了解决这个问题，React引入了虚拟DOM机制：每当数据变化时，React会重新构建DOM树，然后将当前DOM树与上一次的DOM树进行对比，得到区别，然后仅仅将需要变化的部分进行实际的DOM更新，由于虚拟DOM是纯粹的JS数据结构，性能比原生的DOM快很多，而对实际DOM操作的部分仅仅是Diff部分，因而能够达到提高性能的目的。
二. 主要特点:
1.组件化: 封装起来的具有独立功能的组件，各个组件维护自己的状态和UI，当状态变更时自动重新渲染整个组件。这是React的核心思想，组件化的方式带来了UI功能模块之间的分离。
2.JSX语法: 允许HTML与JavaScript混写，基本的语法规则是: 遇到HTML标签<>就用HTML解析; 遇到代码块{}就用JavaScript规则解析。它允许直接在模板上插入JavaScript变量，如果这个变量是一个数组，则会展开这个数组的所有成员。
三.重要概念
1.this.props : 首先是一个对象，它的属性与组件的属性一一对应，但是有一个例外，那就是this.props.children
2.this.props.children : 表示组件的所有子节点，它的值有三种可能
1> 没有子节点 数据类型是undefined
2> 只有一个 数据类型是object
3> 多个 数据类型是array
React提供工具方法React.Children来处理这种情况
3.PropTypes:提供参数类型检验机制，类型不一致会导致报错，而getDefaultProps可以设置组件属性的默认值，
4.获取真实的DOM节点（ref属性）：组件并不是真实的DOM节点，而是存在内存中的一种数据结构，叫做虚拟DOM，只有在插入到文档以后，才会变成真实的DOM。通过this.refs.[refName]会返回这个真实的DOM节点。
5.this.state：通过getInitialState方法用于定义初始状态，也是一个对象，这个对象可以通过this.state获取；this.setState修改状态，然后自动调用this.render方法，再次渲染组件。
6. this.props 与 this.state的比较：都用于描述组件的特性，前者表示那些一旦定义，就不再改变的特性，而后者是随着用户互动而产生变化的特性。
关于Redux
一.技术背景
随着JavaScript单页应用开发日趋复杂，JavaScript需要管理比以往更多的state，管理不断变化的state已经变得非常困难，而React也没有涉及到state中数据处理的问题，也就是组件之间的通信，而Redux就是为了解决这个问题。
二. 主要特点
Redux有三大原则:
(1) 单一数据源: 整个应用的state被储存在一棵object tree中，并且这个object tree 只存在于唯一一个store中。
(2) State是只读的。唯一改变state的方法就是出发action，action是一个用于描述已发生事件的普通对象。
(3) 使用纯函数来执行修改: 为了描述action如何改变state, 需要使用reducers。Reducer只是一些纯函数，接受先前的state和action，然后返回新的state。
三.重要概念
1. Action: 将数据从应用传到store，是store数据的唯一来源，一般是通过store.dispatch()将action传到store，但是多数情况下会使用react-redux提供的connect()帮助器来调用。
2.Reducer: Action只是描述有事情发生这个事实，但是没有指明应用该如何更新state。而Reducer正是做这件事情。
3.Store: 将Action和Reducer联系到一起的对象。Redux应用只有唯一一个store。
关于React-Redux
1.容器组件使用connect() 方法连接Redux，通过这个方法可以从Redux store中指定准确的state到你想要获取的组件中
2.mapStateToProps()通过props获取的Redux全局的组件想要的state
3.mapDispatchToProps() 通过props获取的想要的action创建函数