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>

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};
  },
  componentDidMount: function() {
    setInterval(this.tick, 100);
  },
  tick: React.autoBind(function() {
    var newState = {
      x: this.state.x,
      y: this.state.y,
      vx: this.state.vx,
      vy: this.state.vy
    };
    if (this.state.x >= 90 || this.state.x <= 10) {
      newState.vx *= -1;
    } else if (this.state.y >= 90 || this.state.y <= 10) {
      newState.vy *= -1;
    }
    newState.x += newState.vx;
    newState.y += newState.vy;
    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={Math.random() * 100}
          initialY={Math.random() * 100}
          initialVX={Math.random() >= .5 ? 1 : -1}
          initialVY={Math.random() >= .5 ? 1 : -1}
        />
      );
    }
    return <div>{balls}</div>;
  }
});
 
React.renderComponent(<Balls count={10} />, document.body);