diff --git a/README.md b/README.md index b008550..b0ee6b6 100644 --- a/README.md +++ b/README.md @@ -7,27 +7,28 @@ [ReactJS](http://facebook.github.io/react/) is a framework for building large, complex user interfaces. [Firebase](http://www.firebase.com/?utm_source=reactfire) 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 into React apps via -the `ReactFireMixin`. +With [ReactFire](https://www.firebase.com/docs/web/libraries/react/), it only takes a few lines of +JavaScript to integrate Firebase into React apps via the `ReactFireMixin`. -[Read our blog post](https://firebase.com/blog/2014-05-01-using-firebase-with-react.html?utm_source=reactfire) -on using Firebase with React and [check out our live Todo app demo](https://reactfiretodoapp.firebaseapp.com/) +[Read through our documentation](https://www.firebase.com/docs/web/libraries/react/) on using +Firebase with React and [check out our live Todo app demo](https://reactfiretodoapp.firebaseapp.com/) to get started! + ## Downloading ReactFire -In order to use the `ReactFireMixin` in your project, you need to include the following files in your HTML: +In order to use ReactFire in your project, you need to include the following files in your HTML: ```html - - + + - + ``` Use the URL above to download both the minified and non-minified versions of ReactFire from the @@ -37,7 +38,8 @@ Firebase CDN. You can also download them from the [React](http://facebook.github.io/react/downloads.html) can be downloaded directly from their respective websites. -You can also install ReactFire via npm or Bower and its dependencies will be downloaded automatically: +You can also install ReactFire via npm or Bower and its dependencies will be downloaded +automatically: ```bash $ npm install reactfire --save @@ -47,14 +49,16 @@ $ npm install reactfire --save $ bower install reactfire --save ``` + ## Getting Started with Firebase ReactFire requires Firebase in order to store data. You can [sign up here](https://www.firebase.com/signup/?utm_source=reactfire) for a free account. + ## Usage -To use the `ReactFireMixin` in a React component, add it to the component's mixins property: +To use the `ReactFireMixin` in a React component, add it to the component's `mixins` property: ```javascript var ExampleComponent = React.createClass({ @@ -63,39 +67,17 @@ var ExampleComponent = React.createClass({ }); ``` -The following APIs will then be available from the `this` object inside of `ExampleComponent`. +The ReactFire APIs will then be available from the `this` object inside of `ExampleComponent`. -## API Reference -### bindAsArray(firebaseRef, bindVar) +## Documentation and API Reference -Creates a binding between Firebase and the inputted bind variable as an array. The Firebase -reference will be stored in `this.firebaseRefs[bindVar]`. +The [ReactFire quickstart](https://www.firebase.com/docs/web/libraries/react/quickstart.html) is a +great place to get started. There is a walkthrough on how to create the +[Todo app demo](https://reactfiretodoapp.firebaseapp.com/) in the +[ReactFire guide](https://www.firebase.com/docs/web/libraries/react/guide.html). Finally, there is +a [full API reference](https://www.firebase.com/docs/web/libraries/react/api.html) as well. -```javascript -var firebaseRef = new Firebase("https:///"); -this.bindAsArray(firebaseRef, "items"); -``` - -### bindAsObject(firebaseRef, bindVar) - -Creates a binding between Firebase and the inputted bind variable as an object. The Firebase -reference will be stored in `this.firebaseRefs[bindVar]`. - -```javascript -var firebaseRef = new Firebase("https:///"); -this.bindAsObject(firebaseRef, "items"); -``` - -### unbind(bindVar) - -Removes the binding between Firebase and the inputted bind variable. This removes the stored -Firebase reference in `this.firebaseRefs[bindVar]` and cleans up any event handlers associated -with that Firebase reference. - -```javascript -this.unbind("items"); -``` ## Contributing