不用jsx写react class的问题

我不用jsx写react出现了问题:

<div id='example></div>
<script>
var HelloBox = React.createClass({
            render:function(){
                return React.createElement('tagName',null,'asdfasfas')
            }
        })
        var cc = React.createElement('tagName',null,HelloBox)
        ReactDOM.render(cc,document.getElementById('example'))
</script>

为什么这样不能正常运行
但是下面的这个就可以

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

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

.....

---

没有jsx就不要使用 React.createClass

createClass 你可以理解为 ES6 中的 Class. JSX 根据语法将其转换成 ES5的语法,以供浏览器识别.

var HelloBox = React.createElement('h1',null,'HelloBox');

var cc = React.createElement('div', null, HelloBox );

React.render(
    cc,
    document.getElementById('app')
);

最后渲染

<div id="app">
    <div data-reactid=".0">
        <h1 data-reactid=".0.0">HelloBox</h1>
    </div>
</div>

JSX 组件名称 需要大写开头 而且名称(组件标签必须是闭合的 <DemoBox /> ),

而非jsx语法 就跟正常的js一样, 不要求非要大写, 组件使用的时候 直接使用 变量