应该分几个部分去了解一个新技术

一、技术的背景（解决了什么问题，什么模式）

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创建函数