JXS数组以及声明组件和HTML标签

JSX 允许在模板中插入数组，数组会自动展开所有成员：

var arr = [
        <h1>你好,react</h1>,
        <p>很高兴能和你做朋友</p>
    ]
ReactDOM.render(
    <div>
        {arr}
    </div>,
    document.getElementById('demo')
);

输出效果：

循环输出数组.PNG

JSX也支持原生js的数组方法

var arr = [
        <h1>你好,react</h1>,
        <p>很高兴能和你做朋友</p>,
        <p>希望我们玩的愉快</p>
    ]
ReactDOM.render(
    <div>
        <p>循环输出数组:{arr}</p><br/>
        <p>数组长度:{arr.length}</p><br/>
        <p>输出数组下标为0的元素:{arr[0]}</p><br/>
        <p>输出数组最后一个元素:{arr[arr.length-1]}</p>
    </div>,
    document.getElementById('demo')
);

输出效果：

数组方法.PNG

菜鸟的话：
HTML 标签 vs. React 组件
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。
PS:我试验了一下，好像首字母大写也可以显示，但是组件的首字母小写就不行，所以是不是我下面这段代码渲染的跟所说的不一样呢？如果有大神看到，求提点一下。

var foo = {
    width:200,
    height:300,
    background:'#000'
};
var myHtml = <div style={foo}/>;
ReactDOM.render(
    myHtml,
    document.getElementById('demo')
);

要渲染 React 组件，只需创建一个大写字母开头的本地变量。
PS：我又试验了一下，首字母小写的话就不显示了。

var MyCom = React.createClass({
    render:function(){
        return <h1>我是渲染组件</h1>;
    }
});
ReactDOM.render(
    <MyCom/>,
    document.getElementById('demo')
);

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
注意:
由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。