Fluxo sample app

https://github.com/fluxo-js/fluxo/wiki/Getting-Started

by Samuel Simões

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/fluxo-js@0.0.22/dist/fluxo.js"></script>
<script src="https://npmcdn.com/fluxo-react-connect-stores@0.0.6/dist/fluxo_react_connect_stores.js"></script>
<div id="app-container"></div>

CSS

body {
  font-family: sans-serif;
}

#app-container {
  border: 1px dashed black;
  display: inline-block;
  padding: 20px;
}

#app-container p {
  margin-top: 0;
}

Babel + JSX

var PersonComponent = React.createClass({
  onClick: function () {
    PersonActionHandler.giveNewName("A new name! " + new Date().toString());
  },

  render: function() {
    return (
      <div>
        <p><strong>Name:</strong> {this.props.person.name}</p>
        <button onClick={this.onClick}>Give new name!</button>
      </div>
    );
  }
});

var personStore = new Fluxo.ObjectStore({ name: "Samuel" });

var PersonActionHandler = {
  initialize: function (personStore) {
    this.personStore = personStore;
  },

  giveNewName: function (newName) {
    this.personStore.setAttribute("name", newName);
  }
};

PersonActionHandler.initialize(personStore);

var PersonComponentConnected = 
	FluxoReactConnectStores(PersonComponent, { person: personStore });

React.render(
	<PersonComponentConnected/>, 
  document.getElementById("app-container")
);