<!DOCTYPE html>
<!-- React 允许将代码封装成组件（component），
然后像插入普通 HTML 标签一样，在网页中插入这个组件。 -->
<html>
<head>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render:function () {
return <h1>hello {this.props.name}</h1>
}
})
ReactDOM.render(
<HelloMessage name="Helen" />,
document.getElementById('example')
);
</script>
</body>
</html>
注意
<HelloMessage name="Helen" />是个半闭合标签，少/会报错
React的props
React中的每一个组件，都包含有一个属性（props），在组件内部，我们可以通过this.props获取属性对象。
组件如下：
React.render(
<HelloWorld name="Jack"/>, //name属性的值是“jack”
document.getElementById('container')
);
属性使用方法：
1.直接调key/value
var HelloWorld = React.createClass({
render:function(){
return {
<div> hello{this.props.name} </div>
}
}
});
2.延展属性
用{...props}方法
<div id="example"></div>
<script type="text/babel">
// 创建组件 React.createClass
var HelloMessage = React.createClass({
render:function () {
return <h1>hello {this.props.name1},{this.props.name2}</h1>
}
})
var props = {
name1:"andy",
name2:"tom"
}
ReactDOM.render(
<HelloMessage {...props}/>,
document.getElementById('example')
);
</script>
3.调用组件的setProps函数来指定属性
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render:function () {
return <h1>hello {this.props.name}</h1>
}
})
var instance = React.render( // 为什么不是ReactDOM.render？？
<hello />,
document.getElementById('example');
)
instance.setProps({name:'jack'});
</script>
自己设置了组件的属性值。