<a target="_blank" href="http://reapp.io">Reapp 混合應用 - 幫助建構前所未有的強大應用</a>
（Reapp Hybrid apps - help you build powerful apps like never before）
<a target="_blank" href="http://blog.csdn.net/opengl_es">轉載請保留此句：太陽火神的美麗人生 - 本部落格專注于 靈活開發及移動和物聯裝置研究：iOS、Android、Html5、Arduino、pcDuino，否則，出自本部落格的文章拒絕轉載或再轉載，謝謝合作。</a>
<a target="_blank" href="https://github.com/reapp/reapp">Git 托管</a>
React, Webpack, ES6 and our platform help you build powerful apps like never before.
npm install -g reapp
reapp new app
cd app && reapp run
Kitchen SinkHacker News
Try it live
React UI Kit
npm Modules
Webpack Build System
Easy CLI
Reapp
Ionic
Touchstone
Supersonic
Platform
React
Angular
Routing
react-router
CLI
Docs
Animations
Interactive JS
CSS
Build System
Webpack
Gulp
Hot Reload
Themes
Customizable JS
Layout
Flexbox
Block
Icons
SVG
Icon Font
Views
Interactive
Customizable
Dynamic & fully interactive JavaScript-powered animations.
JavaScript + Flexbox. Composable, dynamic, with a declarative interface.
Constants, styles and animations. Mix and match them all to make your theme.
Views, ViewLists, even nested ViewLists. Build your own!
Load individually for optimal load & build times.
Use all our animation and styling mixins externally.
DottedViewLists show Views side-by-side with a dot indicator, just like the Twitter app.
Reapp has NestedViewList and DottedViewList, but you can use the ViewListMixin to make your own.
Lists can automatically wrap an array of items with ListItem components using the wrap property.
<a target="_blank" href="http://reapp.io/start.html">Read the docs</a>
A set of optional packages. Once generated, mix and match them as you like.
<a target="_blank" href="https://github.com/reapp/reapp-component"></a>
A decorator and dependency injector
<a target="_blank" href="https://github.com/reapp/reapp-ui"></a>
Generate & run webpack configs
<a target="_blank" href="https://github.com/reapp/reapp-platform"></a>
Some mixins and helpers for React apps
<a target="_blank" href="https://github.com/reapp/reapp-reducer"></a>
A tiny reducer for use with flux apps
<a target="_blank" href="https://github.com/reapp/reapp-request"></a>
Superagent + bluebird + promises
<a target="_blank" href="https://github.com/reapp/reapp-routes"></a>
DRY route to require w/react-router
<a target="_blank" href="https://github.com/reapp/reapp-server"></a>
Express assets for Reapp-structured apps
<a target="_blank" href="https://github.com/reapp/reapp-object-assign"></a>
A polyfill, for Object.assign
React enables incredible boosts of both productivity and performance. It's declarative components with lifecycles are the future of making apps.
We want to get you running without locking you into a framework. So we built a simple CLI that bootstraps you in minutes. It even runs your server and builds out of the box.
Enjoy flexibility without needing all the glue. We're making hybrid apps, fast.
Reapp is everything you need to build amazing hybrid apps with React: a collection of modules that work together, a UI kit, and our CLI that bootstraps your app and has a pre-configured build server.
We have two example apps you can check the source to:
Installation is done through npm, though you can pick and choose any pieces you'd like and roll your own stack. To get the reapp CLI:
Once that's done you can generate a new base reapp stack with:
Where [name] is the name you'd like to give your new stack.
The CLI has two main functions that it helps you with. The first is creating new apps. For now, it simply makes a bare clone of a repo we keep updated with the current best-practice. The goal is eventually to have a variety of baseline repo's to choose from.
CLI Usage:
The <code>run</code> command has a few options to help you out. You can do:
<code>reapp run -d</code> (debug) to output information on how it's running your app
<code>reapp run -e production</code> (env=production) to run your app in production mode, which is much faster
<code>reapp run -t source-map</code> (tool=source-map) to have full sourcemaps rather than the "eval" style sourcemaps we default to
The <code>build</code> command is used once you're ready to deploy your app (to either the web or to cordova). For now, we provide two types of builds:
<code>reapp build</code> targets the web for mobile sites.
<code>reapp build ios</code> targets cordova ios devices.
You also have the same flags available as the run commands, to adjust tools and envs.
When you run <code>reapp build</code> you'll notice a new <code>./build</code> folder where your assets have been copied to. We're working on adding more documentation soon on how to get those assets into a Cordova/Phonegap app.
<code>/app/app.js</code> is your entry point. Everything in the app folder should be pretty self-explanatory. <code>/assets</code> contains static assets, with a <code>layout.html</code> that is used to serve your app within. In general, you should't have to touch the layout, even for adding styles.
There are a number of pieces we've included in a reapp. Let's explore a few of them in order of when you'll encounter them in your codebase. Think of this as a tour of a reapp app, giving an introduction to packages as we encounter them.
To start, you'll want to open <code>./package.json</code>. Notice we have the following packages:
You also have an entry point defined as <code>app/app.js</code>. This starts your app. The most important part here is the routing. Lets start there.
reapp-routes is a DRY nested route-to-directory mapping system. As long as your routes map to your component file structure, you can save lots of time and enforce consistency in your app, a win-win.
Notice how the import looks for <code>reapp-routes/react-router</code>. The first import in app.js is your router. We love react-router, so we included a reapp-routes generator for that by default, but you could write your own.
You'll notice that the pre-defined routes all perfectly map to the structure of <code>./app/components</code>. To see more about how this works, check out reapp-routes.
This is the reapp-routes syntax. The key to note here is the <code>require</code> that is passed to the routes function at the top level, which is how it dynamically requires your components based on the route tree.
The next theme we require is the <code>./app/theme.js</code> file. reapp-ui has it's own documentation, but themes are the core of reapp-ui. They have three things they need: constants, styles, and animations. You can just use the included iOS theme, but we've included the <code>./app/theme</code> folder as an example of how you can easily customize themes.
Reapp wasn't built purposefully to be a framework. Instead, it started as a UI kit. From that kit, two apps were built. While this isn't a lot, it was enough to see repetition between the two that could be extracted.
From those two apps, over a period of months, we extracted a set of packages, ensuring to keep each of them completely independent. It was an experiment in seeing if a framework was necessary.
What we found was this: if you can subscribe to a certain file structure, you can avoid the framework. With that file structure, we can provide helpers via a CLI. Bootstrap your app in one command and you have a mature build system built in, without having to do anything.
Really, Reapp is simple. You could even just use the UI kit and roll your own app. We just went through that headache, and decided to make it easier to avoid it if you like how we make apps.
Our initial goals are simple: focus on completeness, consistency, and performance. Also, a theme for Android.
Down the road we'd like to achieve the following:
Isomorphic - Render first on server, pass data over to client to continue from there (easily achievable).
Responsive - Support for tablet style interfaces and JS-powered responsive styling.
Physics - A spring based physics library into the animation library with an easy syntax.
Interaction - A simple, declarative interaction library that can be composed well with reapp
Sublime users, some helpful plugins for you to install:
<a target="_blank" href="https://github.com/SublimeLinter/SublimeLinter3">SublimeLinter</a>
<a target="_blank" href="https://github.com/babel/babel-sublime">babel-sublime</a>