- JSX 语法
JSX就是Javascript和XML结合的一种格式。允许 HTML 与 JavaScript 的混写
2.ReactDOM.render()
将模板转为 HTML 语言,并插入指定的DOM 节点
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
3.组件
创建一个组件就是创建一个class
var HelloMessage = React.createClass({ //创建一个组件
render: function() {
return <h1>Hello {this.props.name}</h1>; //this.props获取组件上的属性(注意:class写成className,for写成htmlFor。特例:this.props.children为组件的所有子节点)
}
});
ReactDOM.render(
<HelloMessage name="John" />, //渲染组件
document.getElementById('example')
);
4.PropTypes属性:指定属性类型;ref属性:获取真实DOM;
5.状态机获取值
var LikeButton = React.createClass({
getInitialState: function() { //设置初始状态
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked}); //设置改变状态
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked'; //获取状态
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
6.生命周期
Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM
will 函数:进入状态之前;did 函数:进入状态之后;
7.react-router路由
npm install -S react-router //安装路由
import { Router } from 'react-router';
render(<Router history={hashHistory}> //该属性监听浏览器地址变化
<Route path="/xx" component={App}> //路由嵌套
<IndexRoute component={Home}/> //默认子路由
<Route path="/repos" component={Repos}/> //子路由
<Route path="/about" component={About}/>
{/* 从 /xx/messages/:id 跳转到 /messages/:id */}
<Redirect from="messages/:id" to="/messages/:id" /> //重定向
</Route>
</Router>, document.getElementById('app'));
类似的Link、IndexLink组件,类似a标签。
钩子事件有onEnter和onLeave
8.Flux架构,Redux架构(不太懂,脚手架?通信工具?)