Developer Docs

ReactFly

Create an account

The first thing you need to do to get started with Flybase is sign up for a free account.

Once you sign up, create your first app and make a note of your API Key, and the name of your app. We'll use this URL to store and sync data.

Install Flybase and ReactFly

To include the Flybase client library in your website, add a script tag to the <head> section of your HTML file. We recommend including the library directly from our CDN:


<!-- React JS -->
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>

<!-- Flybase -->
<script src="https://cdn.flybase.io/flybase.js"></script>

<!-- ReactFly -->
<script src="https://cdn.flybase.io/reactfly.min.js"></script>
	
			

You can also install Flybase as a Bower dependency by typing bower install flybase and bower install reactfly.

Initialize the Flybase library

Before we can use Flybase or ReactFly, we'll need to initialize the Flybase library before we can use it.

This should happen one time, outside of your React component. You can find more details on the [web](https://docs.flybase.io/web/setup) setup guide.

In this case, we want to create a flybase Reference to a collection called todos in our database.:


<script>
	var flybaseTodoRef = new Flybase("YOUR-API-KEY", "sample", "todos");
</script>
			

Inject the ReactFlyMixin

ReactFly uses the ReactFlyMixin which extends the functionality of a React component, adding additional Flybase-specific methods to it. These methods allow us to create a one-way data binding from our Flybase database to our component's this.state variable. Add the ReactFlyMixin to our component's mixins list:


var MyReactComponent = React.createClass({
  mixins: [ReactFlyMixin],
  // ...
});

Bind to Flybase

As a result of the data binding provided by ReactFly, any changes to our remote database will be reflected in real-time to this.state. The data binding does not work in the other way - changes made to the this.state have no effect on our database. Any changes which we want to make to this.state should instead be changed in our database directly by using the Flybase client library. ReactFly will handle the work of then updating this.state.

Just remember that ReactFly creates a one-way data binding from our database to our component, not the other way around.

Taking MyReactComponent above, we can keep this.state.todos in sync with any changes to an todos collection in the database by using ReactFly in the component's componentWillMount() method:


componentWillMount: function() {
	this.bindAsArray(flybaseTodoRef, 'todos');
}

Now, if we add an item to the todos collection in the database, that change will be automatically reflected in this.state.todos. We have the option of binding the data from the database as a JavaScript array (via bindAsArray()) or object (via bindAsObject()).

If you want to add other collections to be used, then you would create a new Flybase object and bind that as well.