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

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

var arr = [
        
你好,react
,
        
很高兴能和你做朋友
    ]
ReactDOM.render(
    

        {arr}
    
,
    document.getElementById('demo')
);

输出效果：

循环输出数组.PNG

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

var arr = [
        
你好,react
,
        
很高兴能和你做朋友
,
        
希望我们玩的愉快
    ]
ReactDOM.render(
    

        
循环输出数组:{arr}

        
数组长度:{arr.length}

        
输出数组下标为0的元素:{arr[0]}

        
输出数组最后一个元素:{arr[arr.length-1]}
    
,
    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 = 
;
ReactDOM.render(
    myHtml,
    document.getElementById('demo')
);

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

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

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