【React js】 笔记

一：开发工具：atom

开发工具的插件：linter,atom-jade,color-picker,javascript-snippets,linter-eslint,minimap,react

二.组件，复合组件：

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 ? 'click' : 'haven\'t click';
return (
<p onClick={this.handleClick}>
xxx {text} xxx
</p>
);
}
});

var ReactLocalObj = React.createClass({

render: function() {
return (
<div>
<div className="reactList">
<img src="/public/yade.jpg"/><br/>
<img src="http://ww1.sinaimg.cn/mw600/bce7ca57gw1e4rg0coeqqj20dw099myu.jpg" width="80" height="80"/><br/>
<p>杨帆</p>
<p>464715077@qq.com</p>

</div>
</div>
);
}
});

//复合组件
var MySelfcontent = React.createClass({

render: function() {
return (
<div>
<ReactLocalObj username={this.props.username}/>
<LikeButton />
<LikeButton />
</div>
);
}
});

class ContentPage extends Component {

render() {
this.context.onSetTitle(this.props.title);
return (
<MySelfcontent />,
);
}

}

export default withStyles(ContentPage, s);

三.组件通信：

http://reactjs.cn/react/tips/communicate-between-components.html

/article/2733658.html