View Animate.js
var _ = require("lodash"); | |
var d3 = require("d3"); | |
var raf = require("raf"); | |
var getInterpolator = function getInterpolator(from, to) { | |
return d3.interpolate(from, to); | |
}; | |
var startInterpolation = function startInterpolation(properties, easing, duration, onTick, onComplete) { | |
var aborted = false; |
View SimpleAnimation.jsx
/** @jsx React.DOM */ | |
var React = require("react"); | |
var AnimateMixin = require("react-animate"); | |
var SimpleAnimation = React.createClass({ | |
mixins: [AnimateMixin], | |
getInitialState: function getInitialState() { | |
return { | |
showoff: false, | |
}; |
View SimpleCSS.jsx
/** @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;" + | |
"}"); |
View SimpleAnimationWithCSS.jsx
/** @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;" + |
View SpinWheel.jsx
/** @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;" + |
View AsyncDependenciesExample.js
var AsyncDependencies = require("react-asyncdependencies"); | |
var request = require("request"); | |
var TodoList = React.createClass({ | |
mixins: [AsyncDependencies.Mixin], | |
getInitialState: function() { | |
return { | |
todosIds: null, | |
}; | |
}, |
View .bashrc
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" |
View gist:6da11c21ce0a1c5420d8
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; | |
}); | |
} |
View gist:927e55630d16e1f5e266
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 |
View client.jsx
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 })); |
OlderNewer