React表单
首先，我们需要搭建一个React环境，用来实现效果：
先安装React，这里我用的并不是最新版本的，所以需要选择一个版本：
jspm install react@0.14.0-rcl
安装完成后，接着安装一个react-dom：
jspm install react-dom@0.14.0-rcl
semantic-ui，这个插件并不是react必装的，这只是一个样式插件，装不装都可以，但是我这里图个方便就装上了：
jspm install semantic-ui
在这里直接把semantic引入，所以需要安装一个css插件：
jspm install css
然后用browser-sync创建一个服务器，用来监视一些文件的变化：
browser-sync start --server --no-notify --files 'index.html. app/**/*.js'
这里我用了一个System来导入app底下的mian.js：
打开main.js，在里面把css样式引进来：
"use strict";import 'semantic-ui/semantic.min.js!';
下面是一个简单的排版，来看一下css样式：
下面我们就开始正式的编写程序了：
创建一个comment文件，在文件下面创建一个CommentBox.js：
'use strice';import React from 'react'; //导入react；class CommentBox extends React.Component{ constructor(props){ spuer(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:comments => { this.set({data:comments}); }, error:(xhr,status,error) => { console.log(error); } }); } render(){ return ( 评论
); }}export{CommentBox as default}; //作为一个默认的东西导出； 在网页中显示页面需要在main.js里面导入一些文件：
- html：- main.js：'use strict'import 'semantic-ui/semantic.min.css!';import React from 'react';import ReactDOM from 'react-dom';import CommentBox from './comment/CommentBox';ReactDOM.render(, document.getElementById("app"));
接下来我们需要在定义两个组件，来把它们连在一起：
评论列表的组件（CommentList.js）：
'use strict';import React from 'react';import Comment from './Comment';class CommentList extends React.Component{ render(){ let commentNodes = this.props.data.map(comment => { return( {comment.text} ); }) return( {commentNodes} ); }}export {CommentList as default}; 评论表单的组件（CommentForm.js）：
'use strict';import React from 'react';class CommentForm extends React.Component{ handleSubmit(event){ event.preventDefult(); console.log("提交表单。。。。"); let author = this.refs.author.value, text = this.refs.txte.value; console.log(author,text); this.props.onCommentSubmit({author,text,date:"刚刚"}); } render(){ return( ); }}export {CommentForm as default}; 然后定义一个Cmment.js的一个组件，放到CommentList.js里面，然后在从CommentList.js里面传递一些数据到Cmment.js里面：
Cmment.js：
'use strict'import React from 'react';class Comment extends React.Comment{ render (){ return ( {this.props.author} {this.props.date} {this.props.children} ); }}export {Comment as default}; CommentList.js：
'use strict';import React from 'react';import Comment from './Comment'; //引进Comment.js；class CommentList extends React.Component{ render(){ let commentNodes = this.props.data.map(comment => { return( {comment.text} ); }) return( {commentNodes} ); }}export {CommentList as default}; 注释：这事浏览器会显示一些内容，这些内容就是从render这个方法里面传递给CommentBox.js这个组件，然后再从CommentBox.js传递给CommentList.js，在CommentList.js这个组件里面循环的处理了一下每一条评论的内容，每一次都会用一次Comment这个组件，然后把评论的内容传递给Comment；
从服务端请求数据：
创建一个Comments.json文件：
[ {"author":"姜姜","date":"5 分钟前","text":"天气不错啊！！！"}, {"author":"筱妍","date":"3 分钟前","text":"出去玩啊！！！"}, {"author":"吴建","date":"1 分钟前","text":"去哪玩啊！！！"}] 从服务端请求数据：
$.ajax({ url:this.props.url, dataType:'json', cache:false, success:comments => { this.set({data:comments}); }, error:(xhr,status,error) => { console.log(error); }}); 为了页面的数据和服务端的保持联系，设置每隔五秒向服务端发生一次请求：
constructor(props){ spuer(props); this.state = {data:[]}; this.getComments(); setInterval(() => this.getComments(),5000); }getComments(){ $.ajax({ url:this.props.url, dataType:'json', cache:false, success:comments => { this.set({data:comments}); }, error:(xhr,status,error) => { console.log(error); } }); } 在CommentForm.js帮顶一下事件：
class CommentForm extends React.Component{ handleSubmit(event){ event.preventDefult(); console.log("提交表单。。。。"); let author = this.refs.author.value, text = this.refs.txte.value; console.log(author,text); this.props.onCommentSubmit({author,text,date:"刚刚"}); } render(){ return( ); }} 接下来我们可以把写的内容输出到控制台上：
把提交的内容交给服务端处理：
在CommentBox.js上面添加一个方法：
handleCommentSubmit(comment){ let comments = this.state.data, newComments = comments.concat(comment); this.setState({data:newComments}); }//这个方法就是告诉CommentBox.js，有人提交数据，就把这条数据放在这个方法里面执行一次；