之前對(duì)于react的認(rèn)識(shí)只存在與聽(tīng)說(shuō)，說(shuō)他有啥virtual DOM,很好的組件化，效率很高之類(lèi)的，，不過(guò)一直沒(méi)有學(xué)習(xí)，昨天閑著無(wú)聊就開(kāi)始學(xué)習(xí)react.發(fā)現(xiàn)jsx的寫(xiě)法真是666啊，由于是剛開(kāi)始學(xué)習(xí)，所以總的經(jīng)驗(yàn)不是很多。
我跟著其官網(wǎng)上的教程做了一個(gè)評(píng)論框的功能，后臺(tái)用的是node,并沒(méi)有鏈接數(shù)據(jù)庫(kù)，只是文件流的讀寫(xiě)；
最終結(jié)果：

文件結(jié)構(gòu)：

• react_comment

  • node_modules

  • public

    • build

      • build.js

      • build.js.map

    • js

      • comment.js

      • comment_box.js

      • commemt_form.js

      • comment_list.js

      • entry.js

    • scss

      • comment.scss

  • server

    • server.js

  • comment.json

  • package.json

  • webpack.config.js

webpack.config.js:

var path = require('path'),webpack = require('webpack');var commonLoaders = [{test:/\.js$/,loader:'babel',exclude:'/node_modules/'}, //exclude:不包含這個(gè)文件夾下的目錄，不然babel也會(huì)編譯里面的js文件，導(dǎo)致速度變慢{test:/\.scss$/,loader:'style!css!autoprefixer!sass'}];var path = path.resolve(__dirname,'public/build');module.exports = {entry:['./public/js/entry.js' //指定入口文件],output:{ //指定輸出文件路徑及namepath:path,filename:'build.js'},module:{loaders:commonLoaders},resolve:{extensions:['','.js','.scss']},babel:{ //這里我是使用的是babel-loader、babel-preset-2015、babel-preset-react，并沒(méi)有使用jsx-loader,所以這里作如下配置：presets:['es2015','react']}};

數(shù)據(jù)源：

[{"id": 1388534400000,"author": "Pete Hunt","text": "Hey there!"}]

入口文件：

import React from 'react'; import ReactDOM from 'react-dom'; import {CommentBox} from './comment_box'; import reset from '../scss/comment'; ReactDOM.render(<CommentBox url='/api/comments' pollInterval={2000} />,document.getElementById('content'));

這里一定要注意的是渲染組件用的是react-dom,而不是react，所以要把它也require進(jìn)來(lái)

一定要用原生的document.getElementById()來(lái)獲取容器

最外層組件

import React from 'react';import $ from 'webpack-zepto';import {CommentList} from './comment_list';import {CommentForm} from './comment_form';class CommentBox extends React.Component{constructor(props){super(props)this.state = {data: []};this.handleCommentSubmit = this.handleCommentSubmit.bind(this);}loadCommentsFromServer(){let _this = this;$.ajax({url:_this.props.url,dataType:'json',cache:false,success(data){_this.setState({data:data});},error(xhr, status, err){console.error(_this.props.url, status, err.toString());}})}componentDidMount(){this.loadCommentsFromServer();// setInterval(this.loadCommentsFromServer.bind(this),this.props.pollInterval);}handleCommentSubmit(comment){let comments = this.state.data;comment.id = Date.now();let newComments = [...comments,...comment];this.setState({data:newComments});let _this = this;$.ajax({url: _this.props.url,dataType: 'json',type: 'POST',data: comment,success(data) {_this.setState({data: data});},error(xhr, status, err) {_this.setState({data: comments});console.error(_this.props.url, status, err.toString());}})}render(){return(<div className="commentBox"><h1>Comments:</h1><CommentList data={this.state.data} /><CommentForm onCommentSubmit={this.handleCommentSubmit} /></div>);}}export {CommentBox};

由于在es6中使用類(lèi)的構(gòu)造函數(shù)constructor來(lái)代替了getInitialState,所以以前在getInitialState里聲明的初始量要變化到在constructor中

另外就是在組件上綁定的函數(shù)的this指向問(wèn)題坑了我好久

import React from 'react';class CommentForm extends React.Component{constructor(props){super(props);this.state = {author:'',text:''};}handleAuthorChange(e){this.setState({author:e.target.value})}handleTextChange(e){this.setState({text:e.target.value})}handleSubmit(e){e.preventDefault();let author = this.state.author.trim(),text = this.state.text.trim();if(!text || !author){alert('請(qǐng)?zhí)顚?xiě)完整');return false;}this.props.onCommentSubmit({author:author,text:text});this.setState({author:'',text:''})}render(){return(<form className='commentForm' onSubmit={this.handleSubmit.bind(this)}><input type='text' placeholder='name' value={this.state.author}onChange={e => this.handleAuthorChange(e)} /><input type='text' placeholder='say something...' value={this.state.text}onChange={this.handleTextChange.bind(this)} /><input type='submit' value='Post' /></form>);}}export {CommentForm};

在這個(gè)組件中，我給兩個(gè)input綁定了函數(shù)，一開(kāi)始以為函數(shù)里的this指向的是組件本身,后來(lái)才發(fā)現(xiàn)是window,原因是onChange的回調(diào)是在瀏覽器全局對(duì)象執(zhí)行的，此時(shí)的this并不指向定義的React組件部分,如果不用es6，它是默認(rèn)綁定到組件上的，所以這里要修改this的指向：

1. onChange={e => this.handleAuthorChange(e)}2. onChange={this.handleAuthorChange.bind(this)}3. constructor(props){ //在構(gòu)造器里面綁定，推薦super(props)this.state = {data: []};this.handleCommentSubmit = this.handleCommentSubmit.bind(this);}

具體的代碼我已放到github上，有需要的可以參考：github
此外，有一篇關(guān)于react規(guī)范的文章有興趣的也可以看看：react規(guī)范
以上只是一個(gè)初學(xué)者的的看法，如果有不足或者錯(cuò)誤的地方，歡迎指出

總結(jié)

以上是生活随笔為你收集整理的webpack+es6+node+react初实践及总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。