使用ES6編寫React應用（1）：簡介及環境配置
來自： http://wwsun.github.io/posts/react-with-es6-part-1.html
本文將會介紹如何使用ES6來編寫React應用，作為本系列的第一篇文章，本文將主要講訴相關的開發環境配置。
Statement
- 作者： 景莊 ，Web開發者，主要關注JavaScript、Node.js、React、Docker等。
本文所使用的各項技術均為最新版本，具體的版本信息參考如下：
- Babel v6
- Node v4
- Koa v1
- React v0.14 ( react and react-dom )
項目結構
本文所使用的項目結構如下：
+ build 客戶端代碼的構建結果目錄
+ config 配置信息目錄
+ lib 服務端庫文件
- render.js 渲染腳本
+ src 客戶端源代碼存放目錄
+ test 測試文件目錄
+ views 視圖文件目錄
- index.js 服務器腳本
準備開發環境
構建一個簡單的Koa服務器
為了能夠讓我們所構建的應用正常的運行和調試，首先需要做的是構建一個基本的Web容器，幸運的是， 我們可以基于Node.js快速的構建一個簡單的并且滿足需求的Web服務器。為了簡單起見，我們選擇使用Koa進行構建。
- 使用 npm init --yes 快速的生成項目的初始文件。
- 安裝服務器端的相關依賴，如下：
- koa
- koa-logger
- koa-route
- koa-static
- co-views
- swig
- 由于我們也想用ES6開發服務端代碼，因此我們打算使用Babel動態編譯代碼，安裝相關依賴：
- babel-cli
- babel-preset-es2015-node5
- 在 package.json 中增加 babel 和 scripts 配置項： “babel”: { “presets”: [ “es2015-node5” ] }, “scripts”: { “start”: “babel-node index.js” }
服務器端代碼的相關依賴和配置信息都已經完成了，現在只需要用ES6來開發一個簡單的koa服務器即可：
// index.js
'use strict';
import path from 'path';
import koa from 'koa';
import logger from 'koa-logger';
import serve from 'koa-static';
import route from 'koa-route';
import render from './lib/render';
var app = koa();
app.use(logger());
app.use(route.get('/', home));
function *home() {
this.body = yield render('home', {});
}
app.use(serve(path.join(__dirname, 'build')));
app.listen(3000);
console.log('listening on port 3000');
由于服務器需要渲染基本的視圖文件，因此我們可以借助 co-views 和 swig 編寫一個簡單的服務器端渲染腳本：
// lib/render.js
'use strict';
import path from 'path';
import views from 'co-views';
export default views(path.join(__dirname, '../views/'), {
map: {html: 'swig'}
});
創建視圖文件 views/home.html ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React.js with ES6</title>
</head>
<body>
<div id="react-app"></div>
<!--<script src="bundle.js"></script>-->
<script src="http://localhost:8080/bundle.js"></script>
</body>
</html>
配置Webpack
由于我們需要使用ES6來編寫React應用，因此我們需要將React代碼編譯為普通的JS代碼，幸運的是， 我們可以借助Webpack和Babel來完成這項任務。大致的步驟如下：
- 安裝Webpack，包括如下依賴：
- webpack
- webpack-dev-server
- 安裝Babel相關依賴，用于編譯React代碼：
- babel-loader
- babel-preset-es2015
- bebel-preset-react
- 創建Webpack配置文件： config/webpack.config.js
- 在 package.json 文件中添加編譯React代碼相關的 scripts 腳本： “scripts”: { “start”: “babel-node index.js”, “build”: “webpack –config config/webpack.config.js”, “watch”: “webpack-dev-server –config config/webpack.config.js –hot –inline –progress” },
Webpack的配置文件如下：
// config/webpack.config.js
var path = require('path');
var webpack = require('webpack');
var node_modules = path.resolve(__dirname, '../node_modules');
var dir_src = path.resolve(__dirname, '../src');
var dir_build = path.resolve(__dirname, '../build');
module.exports = {
entry: path.resolve(dir_src, 'main.jsx'),
output: {
path: dir_build, // for standalone building
filename: 'bundle.js'
},
devServer: {
contentBase: dir_build
},
module: {
loaders: [
{test: /src(\\|\/).+\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: {presets: ['es2015', 'react']}}
]
},
plugins: [
// Avoid publishing files when compilation fails
new webpack.NoErrorsPlugin()
],
stats: {
colors: true // Nice colored output
},
// Create Sourcemaps for the bundle
devtool: 'source-map'
};
React應用
- 安裝React相關依賴：
- react
- react-dom
- 編寫React應用
React應用的入口文件： ```javascript // src/main.jsx import React from ‘react’; import ReactDOM from ‘react-dom’; import Root from ‘./components/root.jsx’;
let attachElement = document.getElementById(‘react-app’);
ReactDOM.render(
React應用組件樹的根文件： ```javascript // src/components/root.jsx import React from ‘react’;
class Root extends React.Component { render() { return <h1>Hello from {this.props.phrase}!</h1>; } }
export default Root; ```
測試及啟動
- 使用 npm run watch 啟動 webpack-dev-server
- 使用 npm start 啟動服務器
- 打開瀏覽器訪問 http://localhost:3000 查看結果