先放一個hello組件：

var MyCom = React.createClass({
    render:function(){
        return( 
            <div>
                <h1>HELLO,我是組件</h1>
                <p>我是段落</p>
            </div>
        );
    }
});
ReactDOM.render(
    <MyCom/>,
    document.getElementById('demo')
);

React.createClass({...}) 方法用于生成一個組件類 HelloMessage。
調(diào)用的時候千萬不能忘了那個‘/’，調(diào)用用的時候閉合的標(biāo)簽<MyCom/>。
原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，比如 MyCom 不能寫成 myCom 。除此之外還需要注意組件類只能包含一個頂層標(biāo)簽例如上面栗子的（div），否則會報錯。

上面的栗子如果想要動態(tài)傳參數(shù)的話可以通過this.props

var MyCom = React.createClass({
    render:function(){
        return( 
            <div>
                {/*<h1>HELLO,我是組件</h1>
                <p>我是段落</p>*/}
                親親的{this.props.name}
            </div>
        );
    }
});
ReactDOM.render(
    <MyCom name="我的寶貝"/>,
    document.getElementById('demo')
);

輸出：親親的我的寶貝

注意：在添加屬性時， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。

最后來一個復(fù)雜的復(fù)合組件結(jié)尾，把很多個不同功能的功能組件組合成一個組件。

var Song = React.createClass({
    render:function(){
        return( 
            <div>
                <span>{this.props.song}</span>-<span>來自XX專輯</span>
            </div>
        );
    }
});
var Name = React.createClass({
    render:function(){
        return <p>{this.props.name}</p>
    }
});
var Info = React.createClass({
    render:function(){
        return(
            <div>
                <Song song={this.props.song}/>
                <Name name={this.props.name}/>
            </div>
        );
    }
});

ReactDOM.render(
    <Info  name="周華健" song="親親的我的寶貝"/>,
    document.getElementById('demo')
);

輸出效果：

復(fù)合組件.PNG

注意React類名首字母大寫（Name ,Song ,Info)。
在Info組件調(diào)用其他組件的時候，要注意將屬性名（song , name）也寫進(jìn)去（<Song song={this.props.song}/>）。這里的song和name屬性，對應(yīng)最后調(diào)用的render里的Info提供的屬性名（<Info name="周華健" song="親親的我的寶貝"/>,）。