1.html模版
引入react.js,react-dom.js,browser.min.js
注意:script标签的type属性为text/babel(因为react独有的jsx语法,和js不兼容;使用jsx语法的地方都要加type=“text/babel”)。
react.js:react核心库
react-dom.js :提供与dom相关的功能
browser.js :将jsx语法转为js语法,最好放在服务器。
$babel src --out-dir build
将src下的js进行语法转换,转码后放在build子目录中。
2.ReactDOM.render(),用于将模版转化为html,并插入到制定节点的DOM 中。
ReactDOM.render(<h1>hello</h1>);
document.getElementById('example');
将h1标题插入example节点
3. JSX语法
html直接写在js中,不需要加任何符号----jsx语法。
var name = ['aa','bb','cc'];
ReactDOM.render(
<div>
{
names.map(function(name){
return <div>hello ,{name}</div>
});
}
</div>,
);
遇见html以中<开头,代码块以{开头。
jsx允许在模版插入js变量。
4.组件
react允许将代码封装成组件,然后在网页中插入组件。
生成组件类的方法:React.createClass.
var HelloMessage = React.createClass({
render:function(){
return <h1>hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="lily"/>
document.getElementById('example');
);
注意:1.所有组件类必须有render方法,用于输出组件,组件类第一个字母必须大写。
组件类指南包含一个顶层标签。
2.class属性需要写成className,for属性需要写成htmlFor ,因为class和for是JavaScript保留字。
5.this.props.children
this.props对象的属性和组件属性一一对应,除了this.props.children属性。
它表示组件的所有子节点。
this.props.children 的值有三种可能:
(1)当前组件没有子节点,它就是undefined。
(2)有一个子节点,数据类型object。
(3)有多个子节点,数据类型 array。
React提供了一个工具方法React.Children来处理this.props.children,可以使用React.Children.map来遍历子节点。
var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(this.props.children, function (child) { return <li>{child}</li>; }) } </ol> ); } }); ReactDOM.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.body );
6.PropTypes
组件类的PropTypes属性,用来验证组件市里的属性是否符合要求
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
var data = 'string';
ReactDOM.render(
<MyTitle title={data} />,
document.body
);
更多的PropTypes
设置,可以查看官方文档。
getDefaultProps
方法可以用来设置组件属性的默认值。
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle />,
document.body
);
7.获取真实DOM节点
组件不是真正的DOM,react的操作通常是在虚拟的节点上,只有插入文档后才变成真正的DOM了,极大的提高了网页性能。
那么,如果从组件中获取真正的DOM节点,需要使用ref属性。
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')
);