React Base Fiddle (JSX)

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

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="app">
</div>

JavaScript 1.7

class OtherPage extends React.Component {
 constructor(props) {
 super(props);
 this.handleOtherClick = this.handleOtherClick.bind(this);
 this.state = {isOther: false};
 }

 handleOtherClick() {
 this.setState({isOther: true});
 }

 render() {
 const isOther = this.state.isOther;
 
 if (isOther) {
 return <ContentOtherPage />;
 } else {
 return <Link onClick={this.handleOtherClick} />;
 }
 }
}
var H1 = React.createClass({
 render: function() {
 return <h1>Website của tôi< /h1>;
 }
});
var Content = React.createClass({
 render: function() {
 return <p>Một ví dụ về trang web của tôi< /p>;
 }
});
var Link = React.createClass({
 render: function() {
 return <a href='#' onClick={this.props.onClick}>Trang khác< /a>;
 }
});

var ContentOtherPage = React.createClass({
 render: function() {
 return <p>Nội dung khác từ trang other.html< /p>;
 }
});
var Body = React.createClass({
 render: function() {
 return <div>
 <H1 />
 <Content />
 <OtherPage />
 < /div>;
 }
});

ReactDOM.render(
 <Body />,
 document.getElementById('app')
);