前端生態(tài)這幾年可謂迎來了大發(fā)展谷遂，在這個生態(tài)圈內(nèi)葬馋，不接受新事物學習新技能，等于墮入魔道肾扰。
本文嘗試對前端開發(fā)利器React畴嘶，以及構建項目過程中涉及的技術棧進行介紹，以期開啟整個構建流程上的思考集晚。
有必要指出的是窗悯，要弄明白一件事情的原理，首先要知道它的目的是什么偷拔。
1蒋院、Nodejs & NPM
為什么要提nodejs呢亏钩？
與其說nodejs提供了服務端開發(fā)的另一種可能，不如說它徹底改變了整個前端開發(fā)的生態(tài)欺旧。nodejs平臺上衍生出了強大的npm姑丑、grunt、express等辞友，幾乎重新定義了前端的工作流程和開發(fā)方式栅哀。
這里有必要來講一講NPM（node package manager）這個包管理器。
npm是javascript包管理器称龙，我們可以在npm上找到留拾、分享和使用來自無數(shù)開發(fā)者貢獻的代碼包，而無需自己造輪子鲫尊。
使用npm间驮，需要安裝node。新的版本的nodejs已經(jīng)集成了npm马昨，安裝好nodejs竞帽，通過以下命令查看所安裝的版本：
$ npm -v
在項目目錄內(nèi)，當在命令行執(zhí)行
$ npm install
它會識別一個叫package.json的文件鸿捧，并嘗試安裝該文件內(nèi)配置的依賴包屹篓。
2、React
React的組建化思想使得代碼重用性高匙奴，易于測試堆巧、更容易分離關注點（separation of concerns）。
React還宣稱Learn Once, Write Anywhere泼菌。既可運行在客戶端瀏覽器谍肤，又能在服務端渲染，同時React Native還使得React開發(fā)原生app成為可能哗伯。
下面我們來寫一個簡單的React程序荒揣，讓其能夠運行起來：
項目目錄：
第一步：新建一個package.json文件，指定項目所需的依賴包焊刹。
{
"name": "react-tutorials",
"version": "1.0.0",
"description": "",
"author": "yunmo",
"scripts": {
"start": "webpack-dev-server --hot --progress --colors --host 0.0.0.0",
"build": "webpack --progress --colors --minimize"
},
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0"
},
"devDependencies": {
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2"
},
"license": ""
}
這是npm包管理器的必要文件系任，定義了該項目的名稱、版本虐块、啟動命令俩滥、生產(chǎn)環(huán)境依賴包（dependencies）和開發(fā)環(huán)境依賴包（devDependencies）。
第二步：新建一個index.html文件贺奠。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>yunmo</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
</head>
<body>
<div id="yunmo"></div>
<script src="bundle.js"></script>
</body>
</html>
第三步：寫一段簡單的React代碼霜旧。
var React = require('react');
var ReactDOM = require('react-dom');
var element = React.createElement(
'h1',
{className: 'yunmo'},
'云陌，歡迎來到react的世界儡率！'
);
ReactDOM.render (
element,
document.getElementById('yunmo')
);
第四步：運行挂据。
那么如何在瀏覽器里運行呢航背？這里我們需要借助強大的webpack-dev-server來開啟本地服務器。
我們可以看到上面的package.json里面有webpack和webpack-dev-server依賴包棱貌。下面會介紹webpack。
當然我們還可以通過nodejs來建立一個本地服務器箕肃，但這里其實webpack-dev-server是一個小型的nodejs Express服務器婚脱，它使用webpack-dev-middleware中間件來服務于webpack包。
webpack.config.js文件配置如下：
var webpack = require('webpack');
module.exports = {
entry: ['./app/main.js'],
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
module: {
loaders: []
}
}
這樣我們在命令行通過npm install安裝好依賴包以后勺像，敲打命令
$ npm start
運行服務后障贸，在瀏覽器中輸入http://localhost:8080/
一個簡單的React項目便運行起來了。
3吟宦、Webpack
webpack是一款現(xiàn)代JavaScript應用的模塊加載兼打包工具篮洁，它不僅僅可以打包JavaScript，還可以打包styles殃姓，images等資源袁波。
來看一個典型的webpack配置：
var webpack = require('webpack');
var path = require('path')
module.exports = {
entry: ['./app/main.js'],
output: {
path: path.resolve(__dirname, '/build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.(otf|eot|svg|ttf|woff|png|jpg)/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
}
從上面webpack配置里面可以看出來有一些基本的配置點，也反映了webpack的四個理念：
entry——webpack會根據(jù)應用的依賴關系蜗侈，創(chuàng)建一個關系表篷牌。該表的起始點便是所謂的entry point（入口點）。entry point會告訴webpack從哪入手踏幻，webpack會以該表的依賴關系作為打包依據(jù)枷颊。
output——用于配置打包后的文件放置路徑。
loader——webpack把每個文件都看作組建（如.css, .html, .scss, .jpg, .png等）该面，但是webpack只能識別JavaScript夭苗。這時候loaders便可以把這些文件轉換成組建，進而被添加到依賴關系表隔缀。
plugins——因為loaders作用方式是以單一文件為基礎的题造，所以plugins更廣泛的用來對打包組建形成的集合（compilations）進行自定義操作。
這樣猾瘸，一個完整的模塊打包體系就建立起來了晌梨。
4、ES6
ES6须妻，即ECMAScript 6.0仔蝌，是 JavaScript的下一代標準。ES6里面新增了很多語法特性荒吏，使得編寫復雜的應用更加優(yōu)雅自然敛惊。
ES6中引入了諸如let和const、箭頭函數(shù)绰更、解構賦值瞧挤、字符串模版锡宋、Module、Class特恬、Promise等特性执俩，使得前后端編程語言在語法形式上的差異越來越小。
我們來看一下：
import React from 'react' //模塊引入
import '../styles/reactStack.scss'
class ReactStack extends React.Component { //class特性
render() {
const learner = {name: '云陌', age: 18} //const定義變量
const mainSkills = ['React', 'ES6', 'Webpack', 'Babel', 'NPM',]
const extraSkills = ['Git', 'Postman']
const skillSet = [...mainSkills, ...extraSkills]
const { name } = learner //解構賦值
let greetings = null //let定義變量
if (name) {
greetings = `${name},歡迎來到${mainSkills[0]}的世界癌刽！` //字符模版
}
//以下用了箭頭函數(shù)
return (
<div className="skills">
<div>{greetings}</div>
<ol>
{skillSet.map((stack, i) => <li key={i}>{stack}</li>)}
</ol>
</div>
)
}
}
export default ReactStack //模塊導出
當然役首，并非所有瀏覽器都能兼容ES6全部特性，但看到這么優(yōu)雅的書寫方式显拜，只能看怎么行呢衡奥？因此，這里又引出了一個神器远荠，Babel矮固！
5、Babel
Babel是一款JavaScript編譯器譬淳。
Babel可以將ES6語法的代碼轉碼成ES5代碼档址，從而在瀏覽器環(huán)境中實現(xiàn)兼容。
Babel內(nèi)置了對JSX的支持邻梆，所以我們才能向上面那樣直接return一個JSX形式的代碼片段辰晕。
具體用法不在本文過多講述。
6确虱、Styles引入
在上面的代碼中含友，有以下樣式引入方式：
import '../styles/reactStack.scss'
樣式文件如下：
body {
background: #f1f1f1;
}
.skills {
h3 {
color: darkblue;
}
ol {
margin-left: -20px;
li {
font-size: 20px;
color: rgba(0, 0, 0, .7);
&:first-child {
color: #4b8bf5;
}
}
}
}
樣式文件要在項目中起作用，還需要在package.json里面添加相應的loader依賴校辩，如css-loader, sass-loader, style-loader等窘问，別忘了package.json里還需要node-sass依賴，然后安裝即可宜咒。
webpack.config.js中相應配置如下：
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
}
再將main.js中的內(nèi)容作如下更改：
import React from 'react'
import ReactDOM from 'react-dom'
import ReactStack from './pages/ReactStack'
ReactDOM.render (
<ReactStack />,
document.getElementById('yunmo')
);
最后在瀏覽器中可以看到：
結語
至此惠赫，一個簡單的React項目便搭建起來了。
在后續(xù)的文章中故黑，我將對本文涉及到的React技術棧做專門的講解儿咱，不僅限于硬性技能。當然更多的是實踐做法上的總結场晶，因為如果要掌握它們的理論混埠，細看官方文檔和源碼是最好不過的做法。
記住一句話：要了解任何事诗轻，我們必須知道它的效用钳宪。
