‘use strict‘;
import ‘semantic-ui/semantic.min.css!‘;
import React from ‘react‘;
import ReactDom from ‘react-dom‘;
import CommentBox from ‘./Comment/CommentBox‘;
import $ from ‘jquery‘;
ReactDOM.render(
<CommentBox url="app/comments.json" />
document.getElementById(‘app‘)
);
状态属于组件私有的东西
this.state
this.setState();
constructor(props) {
super(props);
this.state = {
data:[]
;
this.getComments();
setInterval() => this.getComment,500;
}
handleCommnetSubmit(comment) {
let comments = this.state.dta,
newComments = comments.concat(comment);
this.setState({data:newComment});
}
getComments() {
｝
$.ajx({
url:this.props.url,
dataType:‘json‘,
cache: false,
success:comments => {
this.setState(data:comments);
},
error:(xhr,status, error) =>{
}
})
}
render() {
<div className="ui comments">
<h1>评论</h1>
<div className="ui divider">
<CommentList data={this.state.data} />
<CommentForm onCommentSubmit={this.handleCommentSubmit.bind(this)}/>
</div>
</div>
}
}
jspm install jquery
handleSubmit(event) {
let author = this.refs.author.value,
text = this.refs.text.value;
this.props.onCommentSubmit({author,text,date:‘刚刚‘});
}
<form className="ui replay form" onSubmit={this.handleSubmit.bind(this)}>
<input type="text" ref="author" />
<textarea ref="text">
上交给爸爸
ninghao-react
jspm SystemJs Babel 编译 JSX->JavaScript
jspm instll react@0.14-rc1
jspm install react-dom@0.14.0-rc1
jspm install sematic-ui
jspm install css
browser-sync start --server --no-notify --files ‘index.html, app/**/*.js‘
atom ./
原文：http://www.cnblogs.com/yushunwu/p/5156241.html