JSFiddle - React, Tailwind, and code Playground

by insin

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

#demo {
    font-family:'Helvetica', Arial, sans-serif;
    font-size: 13px;
    padding-left: 15px;
}
a {
    text-decoration: none;
    color: #f66;
}
label.radio {
    display: block;
}
li {
    line-height: 1.5em;
    margin-bottom: 20px;
}
.author, .date {
    font-weight: bold;
}

JavaScript 1.7

/**
 * A React version of the Vue.js Github commits example (http://jsfiddle.net/yyx990803/KupQL/light/)
 * Added the e2e branch too as it has different commits at the time of typing.
 * @jsx React.DOM
 */

'use strict';

function truncate(v) {
  var newline = v.indexOf('\n')
  return newline > 0 ? v.slice(0, newline) : v
}

function formatDate(v) {
  return v.replace(/T|Z/g, ' ')
}

var VueDemo = React.createClass({
  getInitialState: function() {
    return {branch: 'master', commits: []}
  }

, componentDidMount: function() { this.fetchData() }

, fetchData: function () {
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'https://api.github.com/repos/yyx990803/vue/commits?per_page=3&sha=' + this.state.branch)
    xhr.onload = function() {
      this.setState({commits: JSON.parse(xhr.responseText)})
    }.bind(this)
    xhr.send()
  }

, changeBranch: function(branch) {
    if (branch !== this.state.branch) {
      this.setState({branch: branch}, this.fetchData)
    }
  }

, render: function() {
    return <div id="demo">
      <h1>Latest Vue.js Commits</h1>
      {this.props.branches.map(this.renderBranch)}
      <ul>{this.state.commits.map(this.renderCommit)}</ul>
    </div>
  }

, renderBranch: function(branch) {
    return <label className="radio" key={branch}>
      <input type="radio" name="branch" value={branch}
        defaultChecked={this.state.branch === branch}
        onClick={this.changeBranch.bind(null, branch)} />
      {branch}
    </label>
  }

, renderCommit: function(commit) {
    return <li key={commit.sha}>
      <a href={commit.html_url} target="_blank">{commit.sha.substring(0, 7)}</a>
      - <span className="message">{truncate(commit.commit.message)}</span>
      <br/>
      by <span className="author">{commit.commit.author.name}</span>
      at <span className="date">{formatDate(commit.commit.author.date)}</span>
    </li>
  }
})

React.renderComponent(<VueDemo branches={['master', 'dev', 'e2e']}/>, document.body);