Pete Hunt petehunt

## gist:5687230
/** @jsx React.DOM */
var MyComponent = React.createClass({
  getInitialState: function() {
    // set up the initial state. used for "logical" initialization code
    return {perMinute: '-', perDay: '-'};
  },
  componentDidMount: function() {
    // fired only once, when the component is added to the DOM
    // used for initialization code that has "side effects" i.e. i/o, jquery plugins, etc
    var socket = io.connect(this.props.url);

## gist:5687276
/** @jsx React.DOM */
var MyRootComponent = React.createClass({
  getInitialState: function() {
    return {perMinute: '-', perDay: '-'};
  },
  componentDidMount: function() {
    var socket = io.connect(this.props.url);
    socket.on('business.clickout', this.setState.bind(this));
  },
  render: function() {

## gist:5920306
import os
import json
import subprocess
import sys

def relativize(path):
    return os.path.relpath(os.path.abspath(path), os.path.abspath('.'))[:-3]

DEPS_MEMO = {}

## gist:5924025
var visitors = require('react-tools/vendor/fbtransform/visitors').transformVisitors;
var transform = require('react-tools/vendor/fbtransform/lib/transform').transform;
console.log(transform(visitors.react, '/** @jsx React.DOM */<p />').code);

## gist:5962128
function resetBrowserify(cb) {
  window.require = null;
  // TODO: somehow identify all browserified script tags
  var scripts = Array.prototype.slice.call(document.querySelectorAll("script[src='build/browserified.js']"));
  scripts.map(function(script) {
    script.remove();
    var	newScript = document.createElement('script');
    newScript.src = script.src;
    document.head.appendChild(newScript);
  });

## gist:6601468
<html>
  <head>
    <title>wtf</title>
  </head>
  <body>
    yolo
    <script>
      window.addEventListener('mousemove', function() {}, false);
    </script>
  </body>

## gist:6601475
<html>
  <head>
    <title>wtf</title>
  </head>
  <body>
    yolo
    <script>
      window.addEventListener('mousemove', function() {}, false);
    </script>
  </body>

## gist:6689857
/** @jsx React.DOM */

var Hello = React.createClass({
    mixins: [LinkedStateMixin],
    getInitialState: function() {
        return {name: 'phunt'};
    },
    render: function() {
        return (
          <div>

## gist:6789788
// component with layout
var Link = React.createClass({
  mixins: [LayoutMixin]

  render: function () {
    <span>
      {this.props.children[0]}
      {this.transferPropsTo(<a>{this.props.children[1]}</a>)}
      {this.props.children[2]}
    </span>

## gist:7618353
First of all, I have an experimental branch with React that lets you use compile CSS animations just-in-time with our reconciliation system and use those instead of pure JS. So I recognize that they should be supported.

In my experience CSS transitions and animations work fine for things that will always animate fully and will never have the animation changed. A good example is a fade out when deleting a list item.

I've just found that in my own work most animations are tied with direct user touch manipulation (like animating out the left nav w/ parallax and opacity) which requires frame-by-frame responsiveness to touch events and inertia calculations based on the user's touch velocity. It's impossible to do this without doing frame-by-frame.

Your skepticism is definitely warranted and I complain to browser vendors whenever I see them about this. In my experience, modern (1 year old) phones can do this with minimal jank but there can still be issues. Assuming you're already avoiding reflows, here are the
	/** @jsx React.DOM */
	var MyComponent = React.createClass({
	getInitialState: function() {
	// set up the initial state. used for "logical" initialization code
	return {perMinute: '-', perDay: '-'};
	},
	componentDidMount: function() {
	// fired only once, when the component is added to the DOM
	// used for initialization code that has "side effects" i.e. i/o, jquery plugins, etc
	var socket = io.connect(this.props.url);
	/** @jsx React.DOM */
	var MyRootComponent = React.createClass({
	getInitialState: function() {
	return {perMinute: '-', perDay: '-'};
	},
	componentDidMount: function() {
	var socket = io.connect(this.props.url);
	socket.on('business.clickout', this.setState.bind(this));
	},
	render: function() {
	import os
	import json
	import subprocess
	import sys

	def relativize(path):
	return os.path.relpath(os.path.abspath(path), os.path.abspath('.'))[:-3]

	DEPS_MEMO = {}
	var visitors = require('react-tools/vendor/fbtransform/visitors').transformVisitors;
	var transform = require('react-tools/vendor/fbtransform/lib/transform').transform;
	console.log(transform(visitors.react, '/** @jsx React.DOM */<p />').code);
	function resetBrowserify(cb) {
	window.require = null;
	// TODO: somehow identify all browserified script tags
	var scripts = Array.prototype.slice.call(document.querySelectorAll("script[src='build/browserified.js']"));
	scripts.map(function(script) {
	script.remove();
	var newScript = document.createElement('script');
	newScript.src = script.src;
	document.head.appendChild(newScript);
	});
	<html>
	<head>
	<title>wtf</title>
	</head>
	<body>
	yolo
	<script>
	window.addEventListener('mousemove', function() {}, false);
	</script>
	</body>
	/** @jsx React.DOM */

	var Hello = React.createClass({
	mixins: [LinkedStateMixin],
	getInitialState: function() {
	return {name: 'phunt'};
	},
	render: function() {
	return (
	<div>
	// component with layout
	var Link = React.createClass({
	mixins: [LayoutMixin]

	render: function () {
	<span>
	{this.props.children[0]}
	{this.transferPropsTo(<a>{this.props.children[1]}</a>)}
	{this.props.children[2]}
	</span>
	First of all, I have an experimental branch with React that lets you use compile CSS animations just-in-time with our reconciliation system and use those instead of pure JS. So I recognize that they should be supported.

	In my experience CSS transitions and animations work fine for things that will always animate fully and will never have the animation changed. A good example is a fade out when deleting a list item.

	I've just found that in my own work most animations are tied with direct user touch manipulation (like animating out the left nav w/ parallax and opacity) which requires frame-by-frame responsiveness to touch events and inertia calculations based on the user's touch velocity. It's impossible to do this without doing frame-by-frame.

	Your skepticism is definitely warranted and I complain to browser vendors whenever I see them about this. In my experience, modern (1 year old) phones can do this with minimal jank but there can still be issues. Assuming you're already avoiding reflows, here are the