什么是React矾策？
React是一個(gè)JavaScript庫(kù)用于構(gòu)建用戶界面岩瘦。React能輕松的創(chuàng)建出交互式組件。在你的應(yīng)用里為每個(gè)狀態(tài)設(shè)計(jì)簡(jiǎn)單的視圖唇撬，當(dāng)數(shù)據(jù)有變化時(shí)React可以高效的更新和渲染組件墩弯。
React都干了什么吩跋？
- UI
React負(fù)責(zé)UI層面的展現(xiàn)。一般的情況下最住，我們?cè)陂_發(fā)過程中钞澳，直接使用HTML來構(gòu)建UI怠惶，React換了一種思路解決問題涨缚，它把UI拆分成組件，使得它可以易于拓展和維護(hù)策治。因此它引入了JSX這種語法規(guī)則脓魏，可以讓我們使用類似HTML的語法去寫JS的函數(shù)調(diào)用。
- 虛擬DOM
瀏覽器渲染頁面的一般過程通常是這樣的：
加載html->生成DOM樹->解析css生成Render樹->生成頁面
React的虛擬DOM是這樣的：
生成虛擬DOM->diff算法->必要的DOM更新 - 數(shù)據(jù)流
在React中通惫，數(shù)據(jù)的流向是單向的——從父節(jié)點(diǎn)傳遞到子節(jié)點(diǎn)茂翔，如果頂層組件的某個(gè)prop改變了，React會(huì)遞歸的向下遍歷整棵組件樹履腋，重新渲染所有使用這個(gè)屬性的組件珊燎。
React組件內(nèi)部還具有自己的狀態(tài)，這些狀態(tài)只能在組件內(nèi)修改遵湖。React的組件你可以把它們稱為是一個(gè)函數(shù)悔政，它接受props和state作為參數(shù)，返回一個(gè)虛擬DOM的表現(xiàn)延旧。
什么是webpack谋国？
Webpack是一種包模塊管理工具。Webpack將項(xiàng)目中的一切資源都看做是模塊迁沫，模塊之間可以互相依賴芦瘾，Webpack對(duì)它們做統(tǒng)一的管理捌蚊，打包和發(fā)布，用于我們的項(xiàng)目構(gòu)建工作流中近弟。
- webpack主要特點(diǎn)
1.同時(shí)支持CommonJS和AMD模塊缅糟。
2.串聯(lián)式模塊加載器以及插件機(jī)制，讓其具有更好的靈活性和擴(kuò)展性祷愉，例如提供對(duì)ES6的支持溺拱。
3.可以基于配置打包成多個(gè)文件，實(shí)現(xiàn)公共模塊或者按需加載谣辞。
4.支持對(duì)CSS迫摔，圖片等資源進(jìn)行打包。
5.開發(fā)時(shí)在內(nèi)存中完成打包泥从，性能更快句占，完全可以支持開發(fā)過程的實(shí)時(shí)打包需求。
6.對(duì)sourcemap有很好的支持躯嫉，易于調(diào)試纱烘。
webpack.config.js 文件
webpack.config.js文件，所有跟webpack有關(guān)的工作祈餐，都在這個(gè)文件中進(jìn)行配置擂啥。
- 先來看看這個(gè)文件長(zhǎng)什么樣
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
let DEV = process.env.NODE_ENV === 'DEV'; //開發(fā)模式
let PROD = process.env.NODE_ENV === 'PROD'; //生成模式
let entry = PROD
? [
'./src/index.js'
]
: [
'./src/index.js',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server'
];
var plugins = PROD
? [
new webpack.optimize.UglifyJsPlugin({
comments: true,
mangle: false,
compress: {
warnings: true
}
}),
new ExtractTextPlugin('style.css')
]
: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
DEVELOPMENT: JSON.stringify(DEV),
PRODUCTION: JSON.stringify(PROD)
})
];
var cssIdentName = PROD ? '[hash:base64:10]' : '[path][name]-[local]-[hash:base64:24]';
var cssLoader = PROD
? ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: 'css-loader?localIdentName=' + cssIdentName
})
: ['style-loader', 'css-loader?localIdentName=' + cssIdentName];
//webpack配置文件項(xiàng)
module.exports = {
devtool: "source-map",
//入口文件
entry: entry,
//輸出打包的文件
output: {
//打包文件名
filename: 'bundle.js',
//bundle.js輸出路徑,是一個(gè)絕對(duì)路徑
path: path.join(__dirname, 'dist'),
//在html頁面中需要的導(dǎo)入資源的路徑
publicPath: '/dist/'
},
plugins: plugins,
module: {
loaders:[
{
test: /\.js$/,
exclude: '/node_modules/',
loader: 'babel-loader'
},
{
test: /\.(jpg|gif|png)$/,
exclude: '/node_modules/',
// loader: 'file-loader'
loader: 'url-loader?limit=512&name=[path][name].[ext]?[hash]'
},
{
test: /\.css$/,
exclude: '/node_modules/',
loader: cssLoader
}
]
},
resolve:{
modules: [
"node_modules",
path.join(__dirname, "src")
],
extensions: [".js", ".json", ".jsx", ".css", ".gif"],
},
devServer: {
hot: true,
publicPath: '/dist/',
stats: {
colors: true
}
},
performance: {
hints: false
}
};
webpack.config.js也是一個(gè)標(biāo)準(zhǔn)的Commonjs模塊，其中包含module.exports這樣的標(biāo)志性關(guān)鍵詞帆阳。
- 它的主要的配置參數(shù)有：
devtool：debug時(shí)輸出原文件可以方便debug
entry : 它是程序的入口文件
output: webpack的輸出打包文件配置
plugins：webpack的插件哺壶，包括第三方的和自帶的
module：?jiǎn)卧K配置，在里面定義loaders蜒谤，告訴webpack如果業(yè)務(wù)里加載了css或者圖片該怎樣去處理
resolve：extensions數(shù)組中用于配置程序可以自行補(bǔ)全哪些后綴山宾。比如說我們要require一個(gè)common.js文件，添加了這個(gè)配置我們只要寫：require('common')就可以了
devServer：用于開發(fā)服務(wù)器配置
performance：配置webpack的通知提示
構(gòu)建項(xiàng)目環(huán)境順序
- 確保安裝nodejs
- 建議安裝IDE webstrom
新建空項(xiàng)目
新建空項(xiàng)目
在項(xiàng)目根目錄新建package.json文件
- 在IDE控制臺(tái)中輸入
npm init
npm init
在項(xiàng)目根目錄中新建webpack.config.js
然后參展官網(wǎng)配置webpack.config.js 上面已經(jīng)有例子
接下來安裝依賴包
這個(gè)依賴包可以按需加載鳍徽，不用非得全安裝下來
npm i babel-core@6.21.0 babel-loader@6.2.10 babel-preset-es2015@6.18.0 babel-preset-react@6.16.0 bootstrap@3.3.7 css-loader@0.26.1 extract-text-webpack-plugin@2.0.0-beta.4 file-loader@0.9.0 jquery@3.1.1 lodash@4.17.2 react@15.4.1 react-bootstrap@0.30.7 react-dom@15.4.1 react-hot-loader@1.3.1 style-loader@0.13.1 url-loader@0.5.7 webpack@2.1.0-beta.28 webpack-dev-server@2.1.0-beta.12 --save --only=dev
新建一些文件和文件夾（除.babelrc资锰，可自定義）
mkdir dist （用于存放輸出好的文件）
mkdir src （存放項(xiàng)目文件）
touch .babelrc （babel的配置文件，用于把es6的語法轉(zhuǎn)譯成當(dāng)前瀏覽器識(shí)別的es5的語法阶祭，把react的jsx語法轉(zhuǎn)譯成js語法）
touch index.html（普通的入口文件）
.babelrc文件
{
"presets": [
["es2015", {"modules": false}],
"react"
]
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-react-test</title>
<link rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--<link rel="stylesheet" href="dist/style.css">-->
</head>
<body>
<div id="app">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/dist/bundle.js"></script>
</div>
</body>
</html>
package.json
{
"name": "webpack-react-test",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"build": "NODE_ENV=PROD webpack --progress --watch",
"dev": "NODE_ENV=DEV webpack-dev-server"
},
"author": "zhangbo",
"license": "ISC",
"dependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"bootstrap": "^3.3.7",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"file-loader": "^0.9.0",
"jquery": "^3.1.1",
"lodash": "^4.17.2",
"react": "^15.4.1",
"react-bootstrap": "^0.30.7",
"react-dom": "^15.4.1",
"react-hot-loader": "^1.3.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.1.0-beta.28",
"webpack-dev-server": "^2.1.0-beta.12"
}
}
新建index.js
import React from 'react';
import {render} from 'react-dom';
class HelloReact extends React.Component {
render() {
return(
<div>Hello React!!!</div>
);
}
}
render(<HelloReact />, document.getElementById("app"));
if (module.hot) {
module.hot.accept();
}
啟動(dòng)服務(wù)器
根據(jù)package.json中對(duì)scripts的定義
在終端輸入 npm run dev 來啟動(dòng)服務(wù)器
啟動(dòng)webpack-dev-server
在瀏覽器中輸入訪問地址
原文件绷杜，debug
項(xiàng)目結(jié)構(gòu)
