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://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.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>

JavaScript 1.7

var container = document.getElementById('container');
var items = ["A", "B", "C"];
var groups = Array(2).fill(items);

function render (element) {
  ReactDOM.render(
    element,
    container
  );
}

console.log("literal, no key warning");

var element = <div>
  <div class="items">
    <div>{items[0]}</div>
    <div>{items[1]}</div>
    <div>{items[2]}</div>
  </div>

  <div class="items">
    <div>{items[0]}</div>
    <div>{items[1]}</div>
    <div>{items[2]}</div>
  </div>
</div>;

render(element);


console.log("scripted, no key warning");

var element = <div>
  {groups.map((items, i) =>
    <div class="items" key={i}>
      {items.map((item, j) =>
        <div key={j}>{item}</div>
      )}
    </div>
  )}
</div>;

render(element);


console.log("scripted, with key warning");

var element = <div>
  {groups.map((items, i) =>
    <div class="items">
      {items.map(item =>
        <div>{item}</div>
      )}
    </div>
  )}
</div>;

render(element);