专题：react -- IT技术博客大学习 -- 共学习共进步！

虽然 react-native-navigation 是 Facebook React Native 官方文档推荐的导航库之一，但我也不得不说使用它做 APP 导航主框架的体验简直糟糕透了。当然，这本身可能就是 React Native 自身的问题。

React一线问题十问十答

最近在开源中国搞了个问答活动，收到了不少网友关于React的提问，本文挑选出一些比较典型的问题总结一下。

从工程化角度讨论如何快速构建可靠React组件

React 的开发也已经有2年时间了，先从QQ的家校群，转成做互动直播，主要是花样直播这一块。切换过来的时候，业务非常繁忙，接手过来的业务比较凌乱，也没有任何组件复用可言。为了提高开发效率，去年10月份也开始有意识地私下封装一些组件，并且于今年年初在项目组里发起了百日效率提升计划，其中就包含组件化开发这一块。本文并不是要谈如何去写一个 React 组件，这一块已经有不少精彩的文章。例如像这篇《重新设计 React 组件库》，里面涉及一个组件设计的各方面，如粒度控制、接口设计、数据处理等等（不排除后续也写一篇介绍组件设计理念哈）。本文关键词是三个，工程化、快速和可靠。我们是希望利用工程化手段去保障快速地开发可靠的组件，工程化是手段和工具，快速和可靠，是我们希望达到的目标。前端工程化不外乎两点，规范和自动化。

从零开始React服务器渲染

当我们选择使用Node+React的技术栈开发Web时，React提供了一种优雅的方式实现服务器渲染。使用React实现服务器渲染有以下好处： 1.利于SEO：React服务器渲染的方案使你的页面在一开始就有一个HTML DOM结构，方便Google等搜索引擎的爬虫能爬到网页的内容。 2.提高首屏渲染的速度：服务器直接返回一个填满数据的HTML，而不是在请求了HTML后还需要异步请求首屏数据。 3.前后端都可以使用js。

前端路由实现与 react-router 源码分析

在单页应用上，前端路由并不陌生。很多前端框架也会有独立开发或推荐配套使用的路由系统。那么，当我们在谈前端路由的时候，还可以谈些什么？本文将简要分析并实现一个的前端路由，并对 react-router 进行分析。

zepto/jQuery、AngularJS、React、Nuclear的演化

因为zepto、jQuery2.x.x和Nuclear都是为现代浏览器而出现，不兼容IE8，适合现代浏览器的web开发或者移动web/hybrid开发。每个框架类库被大量用户大规模使用都说明其戳中了开发者的刚需。本文将对比zepto/jQuery到Nuclear的设计和演化的过程。

从 Web Components 到 React 谈前端组件化

前端的社区非常活跃，各种底层的框架和库层出不穷，而在这些框架和库的基础上也涌现出了一批又一批用各自的思想来实现的 UI 组件。前端本身的工作领域就专注在 UI 展现层上，一套好用的 UI 组件能提升团队的工作效率，但是这些组件的通用性和移植性并不强。 W3C 提出来的 Web Components 标准化的组件化方案，尝试去解决上面提到的各自为战的问题，在其刚提出来的那段时间确实火了一阵子，Google 的开发团队也在此基础上推出了基于 Web Components 的框架 Polymer。

从 React Router 谈谈路由的那些事

React Router 是专为 React 设计的路由解决方案，在使用 React 来开发 SPA （单页应用）项目时，都会需要路由功能，而 React Router 应该是目前使用率最高的。 React Router 并不是 Facebook 的 React 官方团队开发的，但是据说有官方人员参与开发。React Router 的设计思想来源于 Ember 的路由，如果原来有用过 Ember 的路由，那么应该对 React Router 不会陌生。

React 的骨架 JSX

JSX 是 Facebook 团队提出的一个语法方案，可以在 JavaScript 的代码直接中使用 HTML 标签来编写 JavaScript 对象。其使用的是 XML-like 语法，这种语法方案需要通过 JSXTransformer 来进行编译转换成真实可用的 JavaScript 代码。 React 是基于组件的开发思想，React 认为一个组件可以是一个完全独立的没有任何其他依赖的模块文件。一个组件中可以有自己的样式（Inline Style）和结构（JSX编写的HTML）。

初探 React 组件

React 的核心思想就是使用组件化的思想来开发出一个个独立的组件，然后将组件再拼装成一个完整的应用，从 MVC 分层思想上来考虑的话，React 专注在 UI 展现层上。在 React 的骨架 JSX 一文中，有详细的讲解过使用 JSX 来开发组件的结构，也提到了使用 Inline Style 可以给组件定义样式，这样能确保组件的独立性。除了结构和样式，一个独立完整的组件还包含一些其他的部分。从一个简单的 Dropdown 组件来开启我们的 React 组件化之路。首先需要说明的是，Demo 的代码都是 ES6 的语法，之后的 React 文章中用到的 JavaScript 代码都将使用 ES6 的语法，如果你还不了解 ES6，建议先了解一下它的语法。另外考虑到 Demo 代码量的问题忽略了组件的样式部分，假设样式是通过外链或 Inline Style 的形式加载进来的。

React Native for Android Windows环境搭建

React Native for Android Windows环境搭建。

ReactJS组件间沟通的一些方法

刚入门React可能会因为React的单向数据流的特性而遇到组件间沟通的麻烦，这篇文章主要就说一说如何解决组件间沟通的问题。

探索react native首屏渲染最佳实践

Rreact native给了我们使用javascript开发原生app的能力，在使用react native完成兴趣部落安卓端发现tab改造后，我们开始对由react native实现的界面进行持续优化。目标只有一个，在享受react native带来的新特性的同时，在体验上无限逼近原生实现。作为一名前端开发，本文会从前端角度，探索react native首屏渲染最佳实践。

React 应用的架构模式 Flux

React 组件之间的数据通信在初探 React 组件有初步接触，父组件可以通过声明 props 来向子组件传递数据，但是子组件无法向父组件传递数据，兄弟组件之间也不能相互传递数据。React 的这种单向数据流的通信模式能确保数据的流动简单可控，非常严谨，React 也一直秉承着简单严谨的设计思想。

React 高效开发环境的搭建

React 是 Facebook 开源出来的目前比较流行和热门的前端框架，因其基于组件的开发符合当下和未来的前端发展趋势。 React 还引入了 JSX 语法，对于初次接触 JSX 的人可能会感觉有点别扭，但是当你用过一遍之后就会发觉已经对其爱不释手了。不得不赞叹 Facebook 的开发者，为了能让开发更简便，而想出来的牛逼的解决方案。当你深入使用 React，你会发觉整个 React 的设计思想都是令人叹为观止的。

一个“三端”开发者眼中的React Native

我拿起React Native的第一次，就被它彻底打动了，抛开他的语法，对于前端来说奇奇怪怪的jsx(后面会讨论)，它的确解决了我作为一个三端工程师在不同技术端切换的时候备受的一些困扰，所以那天晚上，我完全没睡着，翻来覆去的，然后跑到朋友圈发了句：“激动人心的技术，未来的发展方向”。第二天早晨，提前一两个小时就醒过来，继续写了几句RN，那酸爽，那心情。可能作为一个纯粹的前端或者纯粹的ios开发，很难理解，但是对于一个游走在三端的工程师，我看到了一个真正意义上的统一方案，而且，它足够简单。

React初探

这段时间忙着写毕业小论文，但每天依然抽取一点时间研究前端方面的技术。这几天初识了React这门火热的技术，这门技术是前端领域的一次技术革新，它从新的角度来定义前端的开发方式。同时，基于React的React-native跨平台解决方案一天内就在GitHub上赢得5000+星，更是让React备受瞩目！下面，就让我们看看神奇的React吧。

用 Virtual DOM 加速开发

简聊(by Teambition)产品前端中使用了 React，最初开发时使用的 Backbone 搭配 doT.js 模版渲染界面，实践下来效果提升了很多。我们希望能吸引更多同学能够运用 Virtual DOM 改进前端开发，所以这篇文章会主要介绍 React 当中 Virtual DOM 相关的知识。

React入门：关于虚拟DOM（Virtual DOM）

Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI，当组件状态 state 有更改的时候，React 会自动调用组件的 render 方法重新渲染整个组件的 UI。 React 主要的目标是提供一套不同的, 高效的方案来更新 DOM.不是通过直接把 DOM 变成可变的数据, 而是通过构建 “Virtual DOM”, 虚拟的 DOM, 随后 React 处理真实的 DOM 上的更新来进行模拟相应的更新。