React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by lobos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@15.0.2/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.0.2/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/react-language@0.1.3/dist/ReactLanguage.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

html {
  line-height: 30px;
}

a {
  margin-right: 10px;
}

button {
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #ccc;
}

.green {
  color: green;
}

JavaScript 1.7

var Ja = ReactLanguage.create('ja');
var Cn = ReactLanguage.create(function (lang) {
  return lang.toLowerCase().indexOf('zh-') === 0;
});
var En = ReactLanguage.create(true);

var Demo = React.createClass({
  handleClick: function (lang) {
    ReactLanguage.setLanguage(lang);
    this.forceUpdate();
  },

  render: function () {
    return (
      <div>
        <Cn>你好，世界<br /></Cn>
        <En tag="div">Hello world.</En>
        <Ja>こんにちは世界<br /></Ja>
				<button>
        	<Cn>提交</Cn>
        	<En><span className="green">Submit</span></En>
        	<Ja>提出します</Ja>
        </button>
        <div>
          <a href="javascript:;" onClick={this.handleClick.bind(this, 'en-us')}>English</a>
          <a href="javascript:;" onClick={this.handleClick.bind(this, 'zh-cn')}>中文</a>
          <a href="javascript:;" onClick={this.handleClick.bind(this, 'ja')}>日本語</a>
          <a href="javascript:;" onClick={this.handleClick.bind(this, 'fr')}>Français</a>
        </div>
      </div>
    );
  }
})

ReactDOM.render(
  <Demo />,
  document.querySelector('#container')
);