var store = new JSData.DS();

  store.registerAdapter(
    'firebase',
    new DSFirebaseAdapter({
      basePath: 'https://js-data-firebase.firebaseio.com'
    }),
    { default: true }
  );

  // Flux pattern
  var UserStore = store.defineResource({
    name: 'user',
    afterInject: function () {
      UserStore.emit('change');
    },
    afterEject: function () {
      UserStore.emit('change');
    }
  });

  var UserItem = React.createClass({
    remove: function () {
      UserStore.destroy(this.props.user.id);
    },
    render: function () {
      var user = this.props.user;
      return <div className="list-group-item" key={user.id}>
        <div className="pull-right">
          <button className="btn btn-xs btn-danger" onClick={this.remove}>
            Delete
          </button>
        </div>
        {user.name}
      </div>;
    }
  });

  var UserApp = React.createClass({
    getInitialState: function () {
    // Pull the initial list of users
    // from Firebase
    UserStore.findAll();

      return { users: UserStore.getAll(), name: '' };
    },
    onChange: function () {
      this.setState({ users: UserStore.getAll(), name: this.props.name || '' });
    },
    onInput: function (event) {
      this.setState({ users: this.state.users, name: event.target.value });
    },
    componentDidMount: function () {
      UserStore.on('change', this.onChange);
    },
    componentWillUnmount: function () {
      UserStore.off('change', this.onChange);
    },
    createUser: function (e) {
      e.preventDefault();
      UserStore.create({
        name: this.state.name
      });
      this.setState({ users: UserStore.getAll(), name: '' });
    },
    render: function () {
      var users = this.state.users;
      var _userItems = [];

      users.forEach(function (user, i) {
        _userItems.push(<UserItem key={i} user={users[i]} />);
      });

      return (
        <div className="panel panel-primary">
          <div className="panel-heading">
            <h3 className="panel-title">Users</h3>
          </div>
          <div className="list-group">
            {_userItems}
            <div className="list-group-item">
              <form id="user-form" name="user-form" className="list-group-item" onSubmit={this.createUser}>
                <input className="form-control" type="text" id="name" name="name" value={this.state.name} onChange={this.onInput} placeholder="Enter a name and press enter" />
                <input type="submit" className="hidden"/>
              </form>
            </div>
          </div>
        </div>
      );
    }
  });

  React.render(, document.getElementById('example'));