React Base Fiddle (JSX)

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

by Tahir Ahmed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container"></div>

JavaScript 1.7

var Navigation = React.createClass({
  getDefaultProps: function() {
    return {
      navigationItems: [
        { 'id': 1, 'name': 'Home', 'url': '/home' },
        { 'id': 2, 'name': 'About', 'url': '/about' },
        { 'id': 3, 'name': 'Contact', 'url': '/contact' }
      ]
    };
  },
  render: function() {
      var navItems = [];
      var length = this.props.navigationItems.length;
      var id = null;
      var url = null;
      var name = null;
      for(var i=0; i<length; i+=1) {
        id = this.props.navigationItems[i].id;
        url = this.props.navigationItems[i].url;
        name = this.props.navigationItems[i].name;
        navItems[i] = <li key={id}><a href={url}>{name}</a></li>;
      }
      return (
        <nav>
          <ul>
            {navItems}
          </ul>
        </nav>
      );
  }
});
React.render(<Navigation />, document.getElementById('container'));