摘要：新搭建的個(gè)人博客，本文地址學(xué)習(xí)筆記用重寫(xiě)在一開(kāi)始的時(shí)候配置中我們就加入了的支持，就是下面的配置，但之前的學(xué)習(xí)筆記都使用的完成，所以專門(mén)作一篇筆記，記錄使用完成創(chuàng)建相關(guān)文件修改，增加該入口文件修改，引入該文件做個(gè)簡(jiǎn)單的測(cè)試，看下瀏覽器全部用來(lái)

新搭建的個(gè)人博客，本文地址：React學(xué)習(xí)筆記3：用es2015（ES6）重寫(xiě)CommentBox
在一開(kāi)始的時(shí)候webpack配置中我們就加入了es2015的支持，就是下面的配置，但之前的學(xué)習(xí)筆記都使用的es5完成，所以專門(mén)作一篇筆記，記錄使用es6完成CommentBox

query: {
  presets: ["es2015","react"]
}

1、創(chuàng)建相關(guān)文件

touch src/commentEs6.js
//修改webpack，增加該入口文件
  entry:{
    "index":"./src/index.js",
    "comment":"./src/comment.js",
    "commentEs6":"./src/commentEs6.js",
  },
//修改build/index.html，引入該文件
  

2、做個(gè)簡(jiǎn)單的測(cè)試，看下瀏覽器

//require全部用import來(lái)完成
import React from "react";
import ReactDom from "react-dom";
//es6支持類，通過(guò)類繼承完成組件的開(kāi)發(fā)
class CommentBox extends React.Component {
    render () {
        return 
Hello World
    }
}

//渲染
ReactDom.render(
    ,document.getElementById("content")
)

3、直接貼出完整修改后的代碼

import React from "react";
import ReactDom from "react-dom";
import marked from "marked"
import $ from "jquery"

class CommentBox extends React.Component {
    constructor(props){
        super(props)
        //state 初始化直接在構(gòu)造函數(shù)完成
        this.state = {data:[]}
    }
    //函數(shù)的書(shū)寫(xiě)方式也發(fā)生了變化
    loadCommentsFromServer(){
        //還不太明白，總之this到了ajax中指向的對(duì)象就發(fā)生了變化
        var url = this.props.url
        $.ajax({
            url:url,
            dataType:"json",
            cache:false,
            //利用箭頭函數(shù)傳參，可以少去了bind this
            success:(data) => {
                this.setState({data: data})
            },
            error:(xhr,status,err) => {
                console.log(url,status,err.toString())
            }
        })
    }
    handleSubmitComment(data){
        var url = this.props.url
        $.ajax({
            url:url,
            type:"POST",
            data:data,
            dataType:"json",
            cache:false,
            success:(data) => {
                this.setState({data:this.state.data.concat(data)});
            },
            error:(xhr,status,err) => {
                console.log(this.props.url,status,err.toString())
            }
        })
    }
    componentDidMount(){
        this.loadCommentsFromServer()
        //setTimeout(this.loadCommentsFromServer,2000)
    }

    render() {
        return (
            

                
Comments
                
                
            
        )
    }
}


class CommentList extends React.Component{
    constructor(props) {
        super(props)
    }

    render(){
        var commentNodes = this.props.data.map(function(comment){
            return (
                
                    {comment.text}
                
            )
        });
        return (
            

                {commentNodes}
            
        )
    }
}

class Comment extends React.Component {
    constructor(props) {
        super(props)
    }
    rawMarkup(){
        var rawMarkup = marked(this.props.children.toString(),{sanitize:true})
        return {__html:rawMarkup}
    }
    render(){
        return (
            

                

                    {this.props.author}
                
                
            

        )
    }
}

class CommentForm extends React.Component{
    constructor(props) {
        super(props)
        this.state = {author:"",text:""}
    }
    handleAuthorChange(event){
        this.setState({author:event.target.value})
    }
    handleTextChange(event){
        this.setState({text:event.target.value})
    }
    handleSubmit(event){
        event.preventDefault();
        var author = this.state.author.trim()
        var text = this.state.text.trim()
        if(!text||!author) {
            return;
        }
        this.props.onSubmitComment({author:author,text:text});
        this.setState({author:"",text:""})
        return false;
    }

    render(){
        return (
            

                
                
                
            
        )
    }
}


ReactDom.render(
    ,document.getElementById("content")
)