node package manager

reactfire

ReactFire Build Status Coverage Status GitHub version

ReactJS is a framework for building large, complex user interfaces. Firebase complements it perfectly by providing an easy-to-use, realtime data source for populating the state of React components. With ReactFire, it only takes a few lines of JavaScript to integrate Firebase data into React apps via the ReactFireMixin.

Table of Contents

Getting Started With Firebase

ReactFire requires Firebase in order to sync and store data. Firebase is a suite of integrated products designed to help you develop your app, grow your user base, and earn money. You can sign up here for a free account.

Downloading ReactFire

In order to use ReactFire in your project, you need to include the following files in your HTML:

<!-- React -->
<script src="https://fb.me/react-15.0.1.min.js"></script>
<script src="https://fb.me/react-dom-15.0.1.min.js"></script>
 
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase.js"></script>
 
<!-- ReactFire -->
<script src="https://cdn.firebase.com/libs/reactfire/1.0.0/reactfire.min.js"></script>

You can also install ReactFire via npm or Bower. If downloading via npm, you will have to install React and Firebase separately (that is, they are peerDependencies):

$ npm install reactfire react firebase --save

On Bower, the React and Firebase dependencies will be downloaded automatically alongside ReactFire:

$ bower install reactfire --save

Documentation

Examples

Migration Guides

Contributing

If you'd like to contribute to ReactFire, you'll need to run the following commands to get your environment set up:

$ git clone https://github.com/firebase/reactfire.git
$ cd reactfire          # go to the reactfire directory
$ npm install -g gulp   # globally install gulp task runner
$ npm install -g bower  # globally install Bower package manager
$ npm install           # install local npm build / test dependencies
$ bower install         # install local JavaScript dependencies
$ gulp watch            # watch for source file changes

gulp watch will watch for changes in the /src/ directory and lint, concatenate, and minify the source files when a change occurs. The output files - reactfire.js and reactfire.min.js - are written to the /dist/ directory.

You can run the test suite by navigating to file:///path/to/reactfire/tests/index.html or via the command line using gulp test.