一步一步写web之react实战（四-评论框）

昨天完成了初始化，顺便看了下源代码，今天预计写出一个示例评论框的，可惜最后卡在与服务端交互这里，是时候学习一波服务端知识了，知识这个节骨点有点不好合适，只能想着折中的办法吧，其实就差一个webapp没搞过了，好可惜，不然自己搞他一套完整的出来。争取react系列写完了学习后端，以后写分享就是前后通吃，哈哈！

还是开始吧，附上教程：http://reactjs.cn/react/docs/tutorial-zh-CN.html。因为教程下载的代码可以直接运行，我就没有用他的。在昨天的初始化项目里修改。教程里的代码都是ES5的语法，我有点不习惯，就只做参考，我这里就都转化成ES6了，大家想了解的话可以和教程作对比。

首先教程在body中引用script，在example.js里修改代码。而我们初始化的入口在App.js。我们就从这里入手。第一步先建一个CommentBox.js。在里面定义一个类

import React, {Component} from 'react';export default class CommentBox extends Component {    render() {        return (            <div className="commentBox">                <h1>我是CommentBox</h1>            </div>        );    }}

然后在App.js里引用，引用也很简单，就是在头部用import导入，在render的return中把他当成普通的自闭合标签一样找个地方放一下就行。不会的去git上看代码吧，看一次就会。下面接着写，教程从“你的第一个组件”开始每个code头都加了

// tutorial1.js

很多这种注释，只是数字在变。然而，这并不是我们需要建的文件名，不是说一个tuorial.js就是一个文件，写文章的都是大牛，这点小问题在他们看了就像吃饭需要筷子一样，不需要说的，也或者他们自己认为都在一个文件里，我只是用注释分区下方便你们阅读而已。我的代码呢就争取一个模块一个文件把它们区分开。

按照教程，我的代码最终分在这四个文件里。文章中都是React.creatClass创建类，而我用的是下面这种形式

import React, {Component} from 'react';import Comment from './Comment';export default class CommentList extends Component {    render() {        let commentNodes = this.props.data.map((comment)=>{            return (                <Comment author={comment.author} key={comment.id}>                    {comment.text}                </Comment>            );        });        return <div className="CommentList">            {commentNodes}        </div>;    }}

这种创建类的方式默认就导出了，一个类一个文件，我觉得这样比较好。当然，定义变量我也尽量都用let而不是var。其实大家也可以把它们写在一个文件里，我也试了下可行，只是我还是喜欢分开，在一起的代码我注释了没有删

import React, {Component} from 'react';import Comment from './Comment';export default class CommentList extends Component {    render() {        let commentNodes = this.props.data.map((comment)=>{            return (                <Comment author={comment.author} key={comment.id}>                    {comment.text}                </Comment>            );        });        return <div className="CommentList">            {commentNodes}        </div>;    }}// class CommentForm extends Component{//     constructor(props){//         super(props);//     }////     render(){//         return <div className="commentForm">//             Hello, world! I am a CommentForm.//         </div>;//     }// }//// class CommentBox extends Component{//     constructor(props){//         super(props);//         this.state={//             displayName: 'CommentBox',//         }//     }////     render(){//         return (//             React.createElement('div', {className: 'commentBox'},//                 "Hello, world! I am a CommentBox."//             )//         );//     }// }// export {CommentList, CommentForm, CommentBox};

这就是没分开的情况，把export default去掉，在最后统一export即可。

每个类一个文件的形式，这样对照教程就明朗了，教程中修改了什么我们就去对应的文件里改什么。还有一点，我的每个函数都进行了绑定，有两种方法

export default class Comment extends Component{    constructor(props){        super(props);        this.rawMarkup=this.rawMarkup.bind(this); //这种绑定方式对应下面 11-15行    }    rawMarkup() {        let md = new Remarkable();        let rawMarkup = md.render(this.props.children.toString());        return { __html: rawMarkup};    }    // //下面的箭头函数等同于第( 8 + 11-15 )行的效果    // rawMarkup = ()=>{    //     let md = new Remarkable();    //     let rawMarkup = md.render(this.props.children.toString());    //     return { __html: rawMarkup};    // }    render(){        // var md = new Remarkable();        return <div className="comment">            <h2 className="commentAuthor">                {this.props.author}            </h2>            <span dangerouslySetInnerHTML={this.rawMarkup()} />        </div>    }}

上面这段代码用了两种绑定，第一个就是在构造函数constructor中用this绑定，第二种就是注释掉的那几行代码，用箭头函数绑定。两种绑定引用是相同的都是this.rawMarkup()。

最终代码卡在与服务器交互了，从服务端获取数据。我想自己研究下node.js自己写一个服务器的，可是最近时间很紧，以后得把这一块只是空白补上，不能留遗憾！还是附代码吧，这几天争取看下前后端分离的框架，不能像今天这样，遇到服务端就卡主了。附上今天的页面展示与代码。

https://github.com/dwenb/react-learning/commits/master

  罪过！！！忘了这一篇代码忘了传了，虽然是不完整的，引以为戒，下不为例！