@hpp157
2016-08-26T15:20:07.000000Z
字数 6098
阅读 2770
React
React是用来创建用户界面的一个非常流行的javascript库。它是Facebook创建的，用来解决如何创建基于变化数据的大型应用的挑战。当2013最初发布的时候，因为React的规范比较独特的缘故还受到了一些怀疑。
为了使人们不望而却步，React核心团队写了一篇文章Why React建议你“花上5分钟时间”，文章的观点就是让人们在认为React的解决方案太疯狂之前先使用React。
是的，React是一个很小的js库，你建立应用程序所需的工具箱它并不是都有( doesn't come with everything you might need out of the box to build you application)，花上五分钟时间吧
是的，在React里，看起来像在你的javascript代码中写入了html一样，当然，这些标签在浏览器中运行的话需要进行预处理，你可能需要一个构建工具像webpack和browserify那样。花上五分钟吧
阅读本书不会只花费你5分钟的时间，但是我们会用很多知识带你深入React的世界
许多公司已经在React上花了很长的时间，它们大部分的web界面都是用的React，包括Airbnb（空中食宿），可汗学院(Khan Academy),以及《纽约时报》(New York Times)。facebook的大部分和instargram这整个部分都是使用react完成的，还有一些工具用来管理每天超过十亿次的用户提交的信息和图片
大型网站上react的广泛使用表明它是足够稳定,但是它不是一成不变的。因为它是新的 ，所以我们都有这个独特的机会成为构建react的一份子，随着react和它的工具的迭代，我们可以提供一些改进。当你有如何让react工作更有效率的注意的时候你可以改进它，react已经准备好了变得伟大，但是我们可以在react走向辉煌过程中发挥一个积极的作用。
react是在facebook和instagram开发的，最初在2013年3月发布，然后在5月29日开源，它是用与你的用户界面的，或者应用程序的view层的。它被设计为view-only库，可以创建用户界面组件展示数据。
react发布后发展迅速，社区迅速贡献代码并参与社区活动。
随着react的用户增长，2015年facebook决定发布一个构建原生应用的框架：React Native。你可以用来创建IOS，android,和window平台的应用。不像别的平台，它使用手机和平板的原生UI元素。react的目标就是使用相同的编程语言构建各种类型的app。
和React同时从facebook出现的一种应用架构叫做Flux，它是用来解决facebook的短信应用的问题的：用户们抱怨当他们读过一条短信的时候，还是会看到这个短信未读通知。为了解决这个数据不一致的问题，Flux引入了一种新的设计：数据单向流动(data flowed one way)。这中数据流和React配合的非常好。
基于Flux的应用架构，开发了Redux用来简化React应用中数据管理的流程。它于2015年发布，使用简单且类似FLux的完整实现让它发展势头良好。此外，Falcor和Realy也被开发出来用于解决数据处理的难题。
写这本书时，React还不是js中最为流行的库(最流行的是谷歌的angular.js，但是学习曲线陡峭)，但是它增长迅速，在网页上搜索javascript框架和库显示react受欢迎度有巨大的增幅。
你可能在公司或组织里听人听说过react是最热门的库，并且你应该学习它代替你上个月学的任何东西。流行并不是学习react的原因，受欢迎是因为有帮助并且节省时间的缘故。
react的流行甚至影响了其它mvc框架的发展，angular和Ember的新版本就受了react解决方案的启发。
react的下一步是什么呢，有可能用来创建桌面应用。我们也可能创建控制台应用，开发机器人或者成为自动驾驶的屏幕(screen）。
会发生什么？我们没有人知道，但是你可以加入我们，并且我们需要你！
react是一个javascript库而不是框架，许多人把react叫做框架并且用来和其他框架做对比，我们甚至在上一个小节也拿它和别的框架做了对比
react被误认为框架的一个原因就是它看起来像是框架，许多blog的文章都拿react和Angular或者react vs Ember对比。你可以用react和Angular一起工作，也可以用react和Ember一起工作，尽管大多数时候，我们一般不把react和Angular一块用。
框架比库要大，框架包括了你创建应用程序所需要的几乎所有的工具。想一下.net框架它不仅有你创建任何win程序所需要的一切东西，还包括组成你应用架构的设计模式，它甚至集成了自己的IDE，Visual Studio
Angluar是一个javascript框架，你可以用来构建大型的单页面应用。angular自带了web开发的大部分工具，它有设计模式，基于MVC的初级模式，Angular2浏览器加载是764k大小，但是功能丰富。
作为对比，react加载的js文件只有151k，react非常小是因为它只是一个简单的库，它有强大的管理工具管理view层，它甚至有构建完整应用的工具，但是react依赖于一些原生的js文件，和其它的js库。
react没有自带任何使用HTTP请求的REST工具，也没有带用来处理客户端路由的工具，它仅是一个库，但是可以让你高效率的创建用户界面。
react并不对你的数据架构做限制，你可以用react和mvc一起，可以和jquery用在一起，可以和Flux或者Redux用在一起，你甚至可以创建自己的客户端数据管理的库，或者和react一起使用设计模式
理解react只是一个库的原因是因为把它叫做框架会产生怎么学习react的疑惑，如果你决定学习Angular，框架有的所有的东西你都要学，包括用来创建web应用的普通的设计模式，你可以说我在学习Angular2，并且开始学习一个简单的框架。
react有一点不同，你可以说，我在学习react，学怎么开发一个react组件，然后知道下一步怎么做。这样说react的原因是，你需要考虑整体的结构。你的app非常小，只用react开发就够了么？你的程序是单页面应用么(SPA)?如果是的话，你用什么处理路由呢，如果你使用Flux不管哪种的Flux：facebook Flux,Reflux,或者你自己的实现的flux？你怎样运行并且转换你的源码?你使用ES6或者ES7？在学习之前你要准备这些问题的答案，学习的孤独是令人怯步的。
好消息是，如果你能够回答这些问题，那么使用react会非常的值得，我们替你回答这些问题的答案就是让react更加的实用，创建一个关于这些问题的学习计划，我们准备只使用react，将创建单页面应用，甚至要开发跨平台的应用。我们将介绍函数式编程以及函数式编程的原则，flux的设计模式，使用redux开发应用程序实现flux的设计模式，使用webpack和babel来编译我们的代码，我们重度使用ES6和ES7
在前面一节，我们提过React可以和MVC一块使用，最初，当React发布的时候，一些开发者甚至引入react来做MVC中的V层，当我们第一次介绍React的时候，我们开发的前几个程序使用backbone的model模型,collections集合,和route路由，如果你很熟悉mvc的话，你可以很轻松的尝试把MVC应用替换为react组件
开发React就是用来处理构建MVC应用中可能出现的问题的，如果你在MVC中使用React，那么早晚你会碰到这些问题。当模型和多视图(multiple views)交互的时候，以及视图监听模型的变化来更新UI时，这些问题就会出现。当一个模型更新的时候，你明确不想改变的view视图可能改变。你发现React应用的复杂化会让你不得不学习Flux，我们就经常这样^ _ ^.
学习Flux是一个让你深入了解javascript函数式编程的美妙旅行，会加深你的javascript知识。React会提供一个用户界面作为抽象数据(provide a user interface as data abstraction),你的大部分工作就是这些核心数据集(core dataset),它们由javascript的数组(arrays)和对象字面量(object literals)组成，函数式编程要求我们保持数据的不可变性
要保持数组的不变性，我们要学习使用map，filter这样的函数。为了保持对象的不变性，我们要学习怎样复制和赋值对象(duplicate and assign）,你要能从数组对象的key和数组对象的reduce方法中抽象出对象。（you will need to be able to abstract objects from arrays with objet.key and arays from objects with array.reduce。）所有这些都是纯js的，这本书里都会涉及。函数式编程的实践你可在任何js应用中使用而不仅仅是在React中使用。
我们希望你在学习过程中能够跳过这些疑惑直接深入到javascript的函数式编程中，我们希望你们能通过这种途径快速的进入react 生态中
如我们提及的，React是一个库，并不是一个大框架的一部分，React生态中有许多流行的库和设计模式,在构建React应用时可以使用它们。我们要从这个生态系统的库选择用户界面的库从而来创造我们自己的库。
根据经验，当使用React工作时，只使用你需要的部分是最好的。react可以管理视图甚至管理视图中使用的数据。它非常强大能够构建不同类型的应用。为此，你不必使用大量的复杂工具。
你可以只使用react来开发应用，随着应用规模的增长，你好发现你需要其他的解决方法，如果你是全栈的react应用，那么就通杀所有问题。
一般来说，复杂工具的使用会是react和javascript的麻烦，很多复杂工具都会引发问题。如果你不需要使用工具，讨厌用工具工作，使用react是一个好的方法。
如果你需要额外的工具，这儿提供了一些给你，开发工具的目的是让一些普通且重复的任务能够自动完成，（SASS编译成css文件，代码分析，测试，Babel转换，等等)
这些构建系统在react项目中经常使用，但是它们在与react没有一点关系的项目中也大量的使用。这儿有大量的工具支持react项目。
React router
React router 提供在react应用中处理路由的框架，这个router可以来处理单页面应用中的路由。网站加载一次页面，router管理导航从一个页面到另一个页面。
React Motion
react中创建动画的一个框架，它通过插值用于CSS值变换，像x和y的值随着时间的变化，不透明度跟着变化一样。
React Addons
React.addons 是为了构建 React 应用而放置的一些有用工具的地方，此功能应当被视为实验性的，但最终将会被添加进核心代码中或者有用的工具库中：
上面举的两个插件都是仅存在于开发版的。当然插件不止上面连个。
Enzyme
Airbnb空中食宿公司开发的用来编写单元测试的框架，非常流行。它允许你使用多种的断言库和运行你喜欢的测试包括Karma,Mocha,Jest或者更多。
Redux
Redux是Flux的一个实现，尽管Redux经常和React联系在一起，但是Redux是一个没有属性的库(不分资本主义和社会主义)，你可以和任何的UI一块使用它，Angular,Ember,jQuer,或者标准的js文件。包括React和Redux的连接react-redux，还包括Redux Thunk,在Redux应用中处理复杂架构的中间件。
React Fire （firebase for react）
firebase是一个预置的实时性后端数据库，有用户验证，数据存储，和托管（云服务），react fire是firebase在react中的具体实现，可以整合进react应用程序中
本节开头提到过，对于react-related工具的大型生态有点认识是非常有帮助的，但是重要的是不要太陷入思考新工具未来会怎么样，新的工具总是在变化，按需所用，保持简单
react还比较新，它现在的核心功能比较稳定，但不排除有变动。这些工具，库，生态还在被发现，这些工具也在不断的迭代中。
和react有关系的工具万一更新了，本书的代码可能不会再起作用。我们会在package.json文件中详细列出所需的版本，你可以按照提供的版本安装开发环境。
除了本书，你还可以访问官方的React blog，当有新版本发布的时候，react的核心团队都会写一篇详细的博文，和更新日志。
还有很多react大会，你可以参加它获取最新的信息，不能参加的话，可以在you tube上查看内容
本节，我们讨论如何使用本书的文件和安装有用的工具
这些工具可以通过浏览器的扩展或者插件来安装，你会发现它们非常有用。
react-detector
chrome浏览器的扩展，让你知道哪个网站是用react开发的
show-me-the-react
火狐浏览器中的，功能跟react-detector差不多
React Developer Tools
是浏览器里边开发者工具的一个插件，安装好会在开发者工具中增加一个新标签让你看到react元素。
nodejs是没有浏览器的javascript，它是构建全栈js应用的运行环境，开源并且三大平台都可以安装
在第十二章时，我们会用node构建一个express服务器，用react工作的时候还需要安装nodejs的包管理工具npm,来安装依赖项，
这里node的最低版本为4.0，安装后可以用在命令行用查看版本
访问node官网，下载node
$ node -vOutput:v6.1.0
不仅仅react在发展和变化，javascript目前也在快速的迭代，我们会把js最新变化也使用到项目中。