Reapp was recently released on React. It's a mobile app platform designed for performance and productivity. Think of it as a well-optimized UI kit, along with a build system and a bunch of helpers that let you build apps easily.

Reapp gives us some nice things out of the box:

A complete UI kit for mobile

"reapp new" to generate a working app

"reapp run" to serve our app with ES6 and hot reloading

Themes and animations

Routing and requests packages

Building our app to Cordova

What we'll be building

To explore using Reapp we're going to build an app that lets you search with the Flickr API and view the results in a photo gallery. This tutorial should take you less than half an hour to follow along with!

Starting out

With node installed, lets run sudo npm install -g reapp to install the Reapp CLI. Once that installs, run reapp new flickrapp. Finally, cd flickrapp and reapp run.

Reapp scaffolded us some demonstration stuff here, which is what you see in . app/components. The rest is just setting up our app. ./app/app.js is the entry to our app, it loads Reapp and runs our routes, which are found in ./app/routes.js.

Start Our View

We have our app generated, but Reapp generates us a full demo app showing nested views, and we won't need much more than a single page. Lets simplify things. In routes.js we can swap it out to just look like this:

If you refresh, you should see an empty view with your new title "Flickr Search" at top.

Fetch Data from Flickr

Now we have an interface with no logic. Before we can link together the Button to the display of photos, we need to grab the photos from Flickr using React conventions. First, get yourself a Flickr account and API key using their quick sign up form.

After filling it out (and signing up if necessary) copy the Public Key they give you and add it as a constant to App.jsx. You'll also need the URL that's used for searching for photos, which I found by using their [API explorer](https://www.flickr.com/services/api explore/flickr.photos.search).

Note: const is a new feature in the next version of JavaScript, called ES6. It's just like a variable, but one that can never be changed once it's set. How can we use this in our app now? Reapp has a Webpack build system built in that gives you all sorts of features, including ES6 support!

Next, define getInitialState() on our React class, so our component can track the photos we'll be fetching. We add this as the first property after React.createClass. Because we're storing photos in a list, add an array:

getInitialState() {
return {
photos: []
}
},

This will give us access to this.state.photos in our render function. In the UI we'll need a Button and Input to use for searching:

Pretty easy! There's a few things to note here. First, notice the ref property on the Input? Ref is short for reference, and lets us track DOM elements in our class. We'll use that in the future for getting the value of the field.

Also, note className="verticalCenter" on the div. Two things: Because we're using JSX that compiles to JS objects ([more reading here](http://facebook.github.io react/docs/jsx-in-depth.html)), we can't use the normal class attribute, so instead use use the JavaScript convention of className to set the class. The verticalCenter property is given to us by Reapp, that will align things centered on our page.

Finally, the onTap property on Button? It's pointing to this.handleSearch. But, we don't have any handleSearch function. React will expect that function defined on the class, so lets wire it up. First, npm install --save superagent which gives us the excellent Superagent request library. Then, import it:

The Gallery widget takes these three properties and outputs fullscreen images that you can swipe between. With this in place, we have completed the flow of our app. Check out your browser and see it in action.

Note: Why window.innerHeigth - 44? We're adjusting for the TitleBar height in our app. There are better ways we could do this, but for now this is simple and works well

Final touches

We're just about good, but there's a couple tweaks we can do. The gallery never lets us close it as it is now. If we add an onClose property to gallery though, it will let us. But, we'll also need to update the state to reflect the gallery being closed. It's actually pretty easy. Just add this to Gallery:

Next steps

We could keep going from here. We could display a list of images before, and link them to the gallery. Reapp also has docs on it's components, so you can browse and add them as you need. Good examples of Reapp code include the Kitchen Sink demo and the Hacker News App they built.

Check out the code

If you'd like to see this application's code you can clone this repo. It includes everything you need except a Flickr API key, which you'll want to sign up for and insert before testing it out.