elierotenberg

const client = new FluxClient('http://localhost:8080');
const messageList = client.Store('/messageList');
const postMessage = client.Action('/postMessage');
const MessageList = React.createClass({
  getInitialState() {
    return { messageList: this.props.messageList.head, message: null };
  },

  componentDidMount() {
    messageList.onUpdate(({ head }) => this.setState({ messageList: head }));

elierotenberg

const server = new FluxServer(8080);
const messageList = server.Store('/messageList');
messageList.set('nextId', 0).commit();
const postMessage = server.Action('/postMessage')
.onDispatch(({ nickname, message }) => {
  messageList.set(messageList.get('nextId') + 1, { nickname, message })
  .set('nextId', messageList.get('nextId') + 1)
  .commit()
});

elierotenberg

Full stack flux

^ Actions go up v Updates go down

PostgreSQL (shardable)
  ^ Stored procedures   v NOTIFY
Node PostegreSQL/redis broker (clusterable)
  ^ PUBLISH             v SUBSCRIBE
redis MQ (shardable)
  ^ PUBLISH             v SUBSCRIBE

elierotenberg

function renderToObject(element) {
  const inst = instantiateReactComponent(element);
  inst.state = inst.getInitialState ? inst.getInitialState() : null;
  return Promise.resolve(inst.componentWillMount ? inst.componentWillMount() : null)
  .then(() => {
    const r = inst.render();
    inst.componentWillUnmount();
    return r;
  });
}

elierotenberg

alias git-patch="git add -A && git commit -m"
alias npm-patch="npm version patch && git push && git push --tags && npm publish"
alias npm-minor="npm version minor && git push && git push --tags && npm publish"
alias npm-major="npm version major && git push && git push --tags && npm publish"
alias npm-upgrade="npm cache clear && npm-check-updates -u && npm install"

elierotenberg

var AsyncDependencies = require("react-asyncdependencies");
var request = require("request");

var TodoList = React.createClass({
	mixins: [AsyncDependencies.Mixin],
	getInitialState: function() {
		return {
			todosIds: null,
		};
	},

elierotenberg

.DropDown-backdrop {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 100;
}
.DropDown.open .DropDown-backdrop{

elierotenberg

/** @jsx React.DOM */
var React = require("react");
var AnimateMixin = require("react-animate");
var fromCSS = require("react-css").fromCSS;

var from = fromCSS("{" +
    "transform: rotate(0deg);" +
    "background-color: blue;" +
    "margin: 50px;" +
    "width: 200px;" +

elierotenberg

/** @jsx React.DOM */
var React = require("react");
var AnimateMixin = require("react-animate");
var fromCSS = require("react-css").fromCSS;

var from = fromCSS("{" +
    "transform: rotate(0deg);" +
    "background-color: blue;" +
    "margin: 50px;" +
    "width: 200px;" +

elierotenberg

/** @jsx React.DOM */
var React = require("react");
var fromCSS = require("react-css").fromCSS;

var myStyle = fromCSS("{" +
    "transform: rotate(20deg);" +
    "background-color: red;" +
    "width: 100px;" +
    "margin: 50px;" +
"}");