使用React开发混搭移动应用：Reapp
原文 http://www.infoq.com/cn/news/2015/02/reapp-launched
过去的两周时间里，围绕非死book发布React Native（一个能够借助JavaScript开发原生移动应用的React.js扩展）的相关热点铺天盖地。而其中的热点之一就是Reapp向React爱好者们 推出 的一个移动应用开发的替代方案。
React是一个构建用户界面的客户端JavaScript框架，由非死book最初开发并开源。React使用一个称为 JSX 的声明式语法和JavaScript语法扩展来描述HTML布局。每个React组件都通过属性和状态得以支持和配置，对它们的改变将通过单向数据流触发更新。这些更新是通过 虚拟DOM 优化的，它区别对待不同的组件，确保只有状态变换导致的那些修改才得到刷新。
表面上，Reapp与React Native有着惊人的相似之处，二者都使用React来创建应用程序用户界面的框架。然而，在底层机制上这两个框架之间却具有明显的哲学差异。 React Native 将React组件绑定到原生UI控件中，构建与设备操作系统匹配的界面。而Reapp却是将React组件绑定到一个跨平台的UI-Kit来创建混搭应用。
读者可通过该项目的 Kitchen Sink 样例应用来感受Reapp UI-Kit的表现力与强大。特别是该应用的“Mailbox”效果，它展示了基于UI-Kit的Reapp及其React如何用于快速定义邮箱风格的用户界面：
var Mailbox = React.createClass({ render() { return ( <div> <SearchBar defaultValue="" /> <List styles={{ self: { paddingLeft: 25 } }}> <ListItem title="Erinn Silsby" titleAfter="8:45 PM" titleSub="New messages from Jane Doe really long title should ellipse" > Lorem ipsume dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentium, ursula major sagittis. </ListItem> <ListItem title="Phebe Matz" titleAfter="8:45 PM" titleSub="New messages from Jane Doe really long title should ellipse" > Lorem ipsume dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentium, ursula major sagittis. </ListItem> <ListItem title="Derek Boulware" titleAfter="8:45 PM" titleSub="New messages from Jane Doe really long title should ellipse" > Lorem ipsume dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentium, ursula major sagittis. </ListItem> <ListItem title="Samantha Canor" titleAfter="8:45 PM" titleSub="New messages from Jane Doe really long title should ellipse" > // ... truncated for readability ... // ... complete code sample available at https://github.com/reapp/kitchen-sink/blob/master/app/components/kitchen/Mailbox.jsx </List> </div> ); } });上述代码片段举例说明了一个自定义邮箱组件如何通过三个Reapp UI-Kit组件——List、ListItem以及SearchBar——快速搭建而成。通过Kitchen Sink样例应用的在线版本可 查看 生成的用户界面。
然而Reapp并非只是一个带有React编程接口的UI工具套件，它还提供了其他处理非UI关注功能的组合包：
- reapp-routes ——用来生成对象树的模块，这些对象代表路由或文件路径；
- reapp-component ——支持装饰模式和工厂模式的依赖注入模块；
- reapp-ui ——包含UI-Kit；UI-Kit是一整套React组件，通过主题支持动画和换肤，以允许平台特定风格。所有可用的UI组件都在Reapp站点 列出 。
Reapp的目标是通过合并大量主流JavaScript库来最大化开发者的生产效率。为了简化依赖管理，Reapp包含了 Webpack 模块绑定器，其使用“代码拆分”来优化在运行时要加载的依赖。另外，Reapp还捆绑了日益流行的 6To5 转译器，其允许开发者用ES6语法编写JavaScript代码，但转译成ES5语法，保持兼容性的同时最大限度提高开发效率。
Reapp框架的alpha版本已提供使用，并可通过npm 安装 。其同时是一个开源项目，源代码放在 GitHub 上。
随着该项目发布alpha版本，开发人员也发布了两个样例项目，以演示其功能和用法。Hacker News 样例程序 是一个功能完整的HackerNews软件新闻网站客户端应用， Kitchen Sink 样例程序演示了Reapp UI-Kit的功能。这两个样例程序的源代码都可以通过Reapp Github 仓库 获取。