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/react/0.13.0/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react-with-addons.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div>
    - 1st try:    <div id="try1"></div>
</div>
<div>
    - 2nd try:    <div id="try2"></div>
</div>
<div>
    - 3rd try:    <div id="try3"></div>
</div>

JavaScript 1.7

var HelloWidget = React.createClass({
    render: function() { return <div>Hello {this.props.name}</div>; }
});

var HiWidget = React.createClass({
    render: function() {  return <div>Hi {this.props.name}</div>; }
});

var dataFromDb = {
    type: 'HiWidget',
    name: 'dude'
};

// try 1: harcoded components are ok
React.render(
  <HiWidget name="dude" />,
  document.getElementById('try1')
);

// try 2: using dataFromDb doesn't work
React.render(
  React.createElement(window[dataFromDb.type], {name: dataFromDb.name}),
  document.getElementById('try2')
);

// try 3: what I would like to avoid
switch (dataFromDb.type) {
    case 'HiWidget':
        var component = <HiWidget name={dataFromDb.name} />;
        break;
    case 'HelloWidget':
        var component = <HelloWidget name={dataFromDb.name} />;
        break;
}
React.render(
  component,
  document.getElementById('try3')
);