Reactfire – kjapp moro med React og Firebase!

Firebase har i lang tid vært en av favoritt-tjenestene mine. Fantastisk real-time funksjonalitet, godt API, og en glimrende hacker-plan. reactfire

Jeg har skrevet om Firebase i en tidligere artikkelserie. Den gang med utgangspunkt i en vanlig HTML5-app med litt jQuery-assistanse, men jeg har også laget et par AngularJS-baserte prosjekter hvor jeg har benyttet AngularFire.

Jeg har i den senere tid vært engasjert i et prosjekt hvor vi benytter Facebooks React med Flux/ReFlux og et Java-basert REST-API som backend. Men du trenger ikke alltid en kompleks applikasjonsarkitektur og en tung databaseløsning, her skal jeg vise hvor fantastisk lett det er å lage en applikasjon basert på React og ReactFire.

Du er strengt tatt ikke nødt til å bruke ReactFire, Firebase kommer med et glimrende API for JavaScript og React er i hovedsak ren JavaScript, men det gjør det hele litt enklere.

Dersom du ikke har kjennskap til React, ta en kikk på min kollega Sven Anders Robbestads glimrende React-tutorial, med demo her. På menyen finner du linken ReactFire som jeg har laget som utgangspunkt for denne artikkelen.

Kort fortalt er React et bibliotek for konstruksjon av ui-komponenter. React oppretter og rendrer en virtuell DOM, basert på en gitt tilstand (state). Ved endring i tilstand diffes endringene mot den eksisterende tilstanden, og deretter blir kun de elementene som har endret tilstand re-rendret. React baserer seg på ensrettet dataflyt, og ReactFire tilbyr, i motsetning til AngularFire, enveis databinding.

Du trenger Firebase og ReactFire, inkludér disse i din HTML:

 <!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"></script>

<!-- ReactFire -->
<script src="https://cdn.firebase.com/libs/reactfire/0.4.0/reactfire.min.js"></script>

Alternativt, installér med npm eller Bower

<span class="html-pre">npm install firebase reactfire --save</span>
<span class="html-pre">Bower install firebase reactfire --save</span>

Ved å bruke ReactFires ReactFireMixin får du en enveis databinding til en array eller et objekt på ditt komponents state-objekt (tilstand).

Eksempelet nedenfor er en forenklet versjon av index.js hentet fra demoen som det er linket til i bånn av artikkelen, og inneholder en funksjon som initielt setter en tom array kalt «strings» på komponentets state-objekt, en enkelt knytning til en Firebase-node som også, tilfeldigvis, heter «strings»; new Firebase(‘https://somefirebase.firebaseio.com/strings’). Denne blir deretter bundet til komponentets state-objekt ved this.bindAsArray(stringsRef, ‘strings’). Dermed vil alle referanser til {this.state.strings} alltid vise innholdet av strings-noden på Firebase.

Videre er det et input-felt og en knapp som på klikk-eventet henter verdien i feltet, og pusher denne til en ny node på Firebase-objektet, Suksessive klikk på «Legg til» -knappen vil, via ReactFire, legge til ytterligere elementer i «strings» array’en.


var React = require('react'),
    Firebase = require('firebase'),
    ReactFireMixin = require('reactfire');
var ReactfireDemo = React.createClass({

    displayName: 'Firebase and Reactfire Example',

    mixins: [ReactFireMixin],

    getInitialState : function() {
        //set the initial state attributes
        return {
            strings: []
        }
    },

    componentWillMount : function() {
        //create the Firebase refs and set the state strings array
        let stringsRef = new Firebase('https://somefirebase.firebaseio.com/strings');
        this.bindAsArray(stringsRef, 'strings');
    },

    addInputString : function() {
        //called on click of add-button,
        // gets the text from the input field,
        // pushes it to the Firebase
        // clears the input field after successfutl push
        let input = this.refs.theInput.getDOMNode();
        let inputVal = input.value;
        if ('' != inputVal) {
            let stringsRef = new Firebase('https://somefirebase.firebaseio.com/strings');
            stringsRef.push({'text': inputVal}, function () {
                input.value = '';
            });
        }
    },

    render : function() {
        return <div>
            <div>
                <input ref="theInput" type="text" />
                <span>&nbsp;</span>
                <Button onClick={this.addInputString}>
                            Legg til
                </Button>
            </div>

            <div>
                <ul>
                        {this.state.strings.map(function (string, key) {
                            return (
                                <li key={key}>{string}</li>
                            )
                        })}
                </ul>
            </div>
        </div>
    }
});
module.exports = ReactfireDemo;

Enklere blir det ikke!

demo: https://reactboiler.herokuapp.com/#/reactfire
git-repo: git@github.com:svenanders/react-tutorial.git