安装
jspm bable gulp github jspm install react@0.14.0-rcl jspm install react-dom@0.14.0-rcl jspm install semantic-ui 引用插件 jspm install css
html文件
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8" />
<title>react</title>
</head>
<body>
<div class="ui containe" style="padding:30px">
<div id="app">
</div>
</div>
<script type="text/bable" src="js/main.js"></script>
<script src="config.js">
</script>
<script>
System.improt('app/main');
</script>
</body>
</html>
comments.json
写数据
[
{"author":"师师","data":"5分钟前","text":"是啊是撒"},{"author":"44","data":"3分钟前","text":"是啊是撒"}
]
comment.js
'uae strict'
import React from 'react';
class Comment extends React.Component{
render(){
return(
<div className="comment">
<div className="content">
<span className="author">{this.props.author}</span>
<div className="Metadata">
<span className="data">{this.props.data}</span>
</div>
<div className="text">{this.props.children}</div>
</div>
</div>
);
}
}
export { comment as default};
commentBox.js
'use strict'
import Resct from 'react'
import commentlist from './commentlist';
import commentfrom from './commentfrom';
import $ from 'jquery';
class CommentBox extends React.Component{
constructor(props){
super(props);
this.state={data:[]};
this.getComments();
//setInterval(()=>this.getComments(),5000);
}
handleCommentSubmit(comment){
let comments = this.state.data,newComments = comments.concat(comment);
this.setState({data:newComments});
}
getComments(){
$.ajax({
url:this.props.url,dataType:'json',cache:false,success:comment=>{
this.setState({data: comments});
},error:(xhr,status,error)=>{
console.log(error);
}
});
}
render(){
return(
<div className="ui comments">
<h1>
评论
</h1>
<div className="ui divider">
<commentlist data={this.state.data}/>
<commentfrom onCommentSubmit={this.handleCommentSubmit.bind(this)}/>
</div>
</div>
);
}
}
export {CommentBox as default}
commentform.js
'use strict'；
import React from 'react';
class commentfrom extends React.Component{
handlesubmit(event){
event.preventDefault();
console.log('提交表单');
let author=this.refs.text.value;
text=this.refs.text.value;
console.log(anthor,text);
this.props.onCommentSubmit({author,text,data:'刚刚'});
}
render(){
return(
<from className="ui reply from" onSubmit={this.handlesubmit.bind(this)}>
<div className="field">
<input type="text" placeholder="姓名" ref="author">
</div>
<div class="field">
<textarea placeholder="评论" ref="text"></textarea>
</div>
<button type="submit" class="ui blue button">
添加评论
</button>
</from>
)
}
}
export { Commentfrom as default};
commentlist.js
'use strict'；
import React from 'react';
import comment from './comment'
class commentlist extends React.Component{
render(){
let commentsNode=this.props.data.map(comment=>{
return(
<Comment author={comment.author} data={comment.data}>
{comment.text}
</Comment>
);
})
return(
<div>
{commentNodes}
</div>
)
}
}
export { Commentfrom as default};
main.js
'uae strict' improt 'semantic-ui/semantic.min.css!'; improt React from 'react'; improt React from 'react-dom'; improt CommentBox from './comment/commentBox.js'; ReactDom.render( <CommentBox url="app/comments.json"/>,document.getElementById('app') )
