reapp之用React开发hybrid app

什么是Reapp

用了这么久Ionic,是不是发现很多问题。我们来介绍一下Reapp吧。如果Ionic框架可以看成Angular与cordova的结合,那么Reapp可以看成是reactjs与cordova的结合。Reapp是一款使用React来开发混合应用的开源框架,为开发者提供了他们开发所需的一切,其中包括各式模块的集合、UI工具包、引导应用的CLI,以及一个预配置的构建服务器,支持Android、iOS。起先,Reapp的构建并不是以成为一个框架为目的,相反,它是作为一个UI工具包开始的。Reapp很简单,你甚至可以只是用其中的UI工具包就能构建出一款应用。首先,我们通过一张图表来看一下Reapp与其他几款框架的区别:

教程索引:(持续更新)
Reapp中文教程

皓眸大前端开发学习

转载请注明出处:http://www.haomou.net/2015/05/31/2015_reapp/

React与Reapp

React是一个构建用户界面的客户端JavaScript框架,由Facebook最初开发并开源。React使用一个称为JSX的声明式语法和JavaScript语法扩展来描述HTML布局。每个React组件都通过属性和状态得以支持和配置,对它们的改变将通过单向数据流触发更新。这些更新是通过虚拟DOM优化的,它区别对待不同的组件,确保只有状态变换导致的那些修改才得到刷新。

表面上,Reapp与React Native有着惊人的相似之处,二者都使用React来创建应用程序用户界面的框架。然而,在底层机制上这两个框架之间却具有明显的哲学差异。React Native 将React组件绑定到原生UI控件中,构建与设备操作系统匹配的界面。而Reapp却是将React组件绑定到一个跨平台的UI-Kit来创建混搭应用。

接下来,我们详细了解一下Reapp的各个部分及功能。

Reapp功能

CLI组件

CLI拥有两个主要功能:首先是构建新的应用;其次是可以运行你的应用。Reapp服务器是一个可以与默认应用结构工作默契的简单的express服务器。
CLI的使用:

1
2
3
4
5
6
7
Usage: reapp [options] [command]
Commands:
new [name] creates a directory with a new reapp-starter scaffold
run runs a reapp application with express/webpack-dev-server
build builds a reapp application to a bundle in ./build
debug use this to for opening issues!
help [cmd] display help for [cmd]

UI Kit

动画:动态和完全交互式的JavaScript编写的动画。
样式:JavaScript + Flexbox,可组合、动态、可声明接口。
主题:混合匹配物理场数、风格样式和动画来制作自己的主题。
视图:使用Views、ViewLists甚至是嵌套的ViewLists来构建视图。
多态:所有的动画和样式都可以混合使用,让设计多样化。

具体模块

reapp-ui

reapp-ui是React组件的一个合集,用于构建应用的UI:

能够很好的协同工作
具有极少依赖性的轻量级代码
主题化
适应众多平台

reapp-pack

生成webpack配置的一个辅助,还带有其他一些小的辅助功能。包括能够简单使用webpack开发服务器的./webpackServer。

使用:

1
2
3
4
5
6
7
var config = require('./config/webpack.run.js');
var webpackServer = require('reapp-pack/webpackServer');
webpackServer(config, {
port: 3011,
debug: true,
hot: true
});

reapp-routes

reapp-routes是一个生成表示路线树的小型库,同时映射到路径。它最主要的作用就是节省代码和执行的一致性。

使用前:

1
2
3
4
5
6
7
8
var App = require('./components/App');
var Sub = require('./components/app/Sub');
var OtherSub = require('./components/app/OtherSub');
module.exports =
<Route handler={App} path="/">
<Route name="sub" handler={Sub} />
<Route name="otherSub" handler={OtherSub} />
</Route>

使用后:

1
2
3
4
5
6
module.exports = routes(require,
route('app',
route('sub'),
route('otherSub')
)
)

更多模块具体细节可以点击查看。

Reapp提供了两个示例应用,并将代码托管至Github上。

Kitchen_Sink
皓眸大前端开发学习

Hacker News Reader
皓眸大前端开发学习

谢谢!

转载请注明出处:http://www.haomou.net/2015/05/31/2015_reapp/

欢迎关注皓眸学问公众号(扫描左侧二维码),每天好文、新技术!任何学习疑问或者工作问题都可以给我留言、互动。T_T 皓眸大前端开发学习 T_T