JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://fooo.fr/~vjeux/fb/react.js/build/JSFiddleHacks.js"></script>
<script src="http://fooo.fr/~vjeux/fb/react.js/build/React-global.js"></script>
<script src="http://fooo.fr/~vjeux/fb/react.js/build/JSXTransformer.js"></script>

CSS

div { -webkit-transform: transformZ(0); }

JavaScript 1.7

var Ball = React.createClass({
  getInitialState: function() {
    return {x: this.props.initialX, y: this.props.initialY, vx: this.props.initialVX, vy: this.props.initialVY, time: performance.now()};
  },
  componentDidMount: function() {
    window.requestAnimationFrame(this.tick);
  },
  tick: React.autoBind(function() {
    window.requestAnimationFrame(this.tick);
    var newState = {
      x: this.state.x,
      y: this.state.y,
      vx: this.state.vx,
      vy: this.state.vy,
      time: performance.now()
    };
    if (this.state.x >= 80) {
      newState.vx = -Math.abs(newState.vx);
    }
    if (this.state.x <= 10) {
      newState.vx = Math.abs(newState.vx);
    }
    if (this.state.y >= 80) {
      newState.vy = -Math.abs(newState.vy);
    }
    if (this.state.y <= 10) {
      newState.vy = Math.abs(newState.vy);
    }

    var elapsed = newState.time - this.state.time;

    newState.x += newState.vx * elapsed / 10;
    newState.y += newState.vy * elapsed / 10;
    this.setState(newState);
  }),
  render: function() {
    var style = {
      width: 40,
      height: 40,
      border: '1px solid black',
      borderRadius: 40,
      background: 'rgba(255, 0, 0, 0.5)',
      position: 'absolute',
      left: this.state.x + '%',
      top: this.state.y + '%',
      zIndex: 10
    };
    return <div style={style} />;
  }
});
var Balls = React.createClass({
  render: function() {
    var balls = [];
    for (var i = 0; i < this.props.count; i++) {
      balls.push(
        <Ball
          initialX={20  + Math.random() * 60}
          initialY={20 + Math.random() * 60}
          initialVX={0.5 + Math.random()}
          initialVY={0.5 + Math.random()}
        />
      );
    }
    return <div>{balls}</div>;
  }
});
 
React.renderComponent(<Balls count={10} />, document.body);