ReactDOM.render()
ReactDOM.render(
<h1>Hello,world</h1>,
document.getElementById('example')
);
取到某一个dom，然后把上面的html放至dom中
JSX语法
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}</div>
});
}
<div>,
document.getElementById('example')
);
JSX允许直接在模板中插入JS变量，如果这个变量是一个数组，则会展开这个数组的所有成员
var arr = [
<h1>Hello world</h1>
<h2>React is awesome</h2>
];
ReactDOM.render(
<div>{arr}</div>
document.getElementById('example');
);
组件
React允许将代码封装成组件(componet), 像插入普通的HTML标签一样，在网页中插入这个组件，React.createClass 方法就用于生成一个组件类
var HelloMessage = React.createClass({
render: function () {
return <h1>Hello {this.props.name}</h1>
}
});
ReactDOM.render(
<HelloMessage name="John" />
document.getElementById('example')
);
注意： 组件一个字母必须大写，组件只能包含一个顶层标签
组件的属性可以再组件类的this.props对象上获取，比如name属性就可以通过this.props.name 读取。
注意
添加属性的时候
class属性需要改成 className
for属性要改成 htmlFor
this.props.children
this.props对象的属性与组件的属性一一对应，但是有个例外，就是this.props.children 属性，他表示组件的所有子节点
var NoteList = React.createClass({
render: function () {
return (
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>
})
);
}
});
ReactDOM.render(
<NoteList>
<span>HELLO</span>
<span>world</span>
</NoteList>
);
this.props.children 的值有三种可能：
1、当前组件没有节点 就是 undefined
2、当前组件只有一个节点，数据类型就是 object
3、如果有多个子节点， 数据类型就是array
对于这种情况，React提供了一个方法， React.Children 来处理 this.props.children => 可以用React.Children.map来遍历子节点，不需要担心 this.props.children 的数据类型是哪种
PropTypes
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function () {
return <h1>{this.props.title}</h1>
}
});
组件类的propTypes属性，就是用来验证组件实例的属性是否符合要求
var data = 123;
ReactDOM.render(
<MyTitle title={data} />
document.body
);
getDefaultProps 可以设置组件属性的默认值
获取真正的DOM节点
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
React.Component
ES6
class Greeting extends React.component {
render () {
return <h1>Hello, {this.props.name}</h1>
}
}
var CommentList = React.createClass({
render: function () {
return (
<div className="commentList">
Hello
</div>
);
}
});
HTML组件是正常的React组件，就和定义的一样，JSX编译器会自动重写HTML标签为 React.createElement(tagName);
