最近幾天在看一個(gè)開(kāi)源的數(shù)字貨幣交易所，這個(gè)交易所用的react前端框架众羡，用了webpack打包侨赡，由于之前自己沒(méi)有學(xué)習(xí)過(guò)webpack以及react，在這樣的情況下看這個(gè)項(xiàng)目就顯得比較的費(fèi)力粱侣，通過(guò)近幾天的學(xué)習(xí)羊壹，有一些感悟。
我是看的rails365的教程甜害，感覺(jué)還不錯(cuò)舶掖，這個(gè)教程是webpack3的內(nèi)容，大家可以照著這個(gè)教程學(xué)習(xí)webpack3學(xué)會(huì)了尔店，webpack4也是很簡(jiǎn)單的眨攘。
首先新建一個(gè)項(xiàng)目，比如我這里就新建一個(gè)目錄叫day
mkdir day
cd day
然后就初始化這個(gè)項(xiàng)目嚣州，這里需要注意的是鲫售，你不要把項(xiàng)目名弄成了webpack，不然會(huì)報(bào)錯(cuò)當(dāng)時(shí)我就是起的這個(gè)名字该肴。
npm init
//全局安裝
npm install -g webpack
//安裝到你的項(xiàng)目目錄
npm install --save-dev webpack
必需要全局安裝不然會(huì)報(bào)錯(cuò)情竹，說(shuō)找不到那個(gè)webpack。然后就一直按照rails365的教程走匀哄。在我剛接觸package.json 的時(shí)候我是覺(jué)得package.json 是用的很少的秦效，但是接觸到了webpack就發(fā)現(xiàn) 這個(gè)文件的作用還是挺大的。比如script這個(gè)項(xiàng)目下面的一些對(duì)象就很有用涎嚼，在剛開(kāi)始接觸npm start 可能不知道這個(gè)是什么意思阱州，也沒(méi)有什么教程給你說(shuō)這是個(gè)什么意思，但是通過(guò)學(xué)習(xí)webpack你就會(huì)發(fā)現(xiàn)法梯，這個(gè)腳本就是在package.json 里面苔货，會(huì)讓你覺(jué)得發(fā)明這個(gè)東西的人真的好厲害。舉個(gè)例子立哑，以免自己忘了這是什么意思了
"scripts": {
"dev": "webpack -d --watch",
"prod": "webpack -p"
}
這個(gè)就是你在敲
npm run dev
npm run prod
的時(shí)候會(huì)用到的腳本夜惭，學(xué)到這里我自己也明白了一些東西。接下來(lái)就是plugin這個(gè)插件铛绰，webpack生態(tài)圈里面的東西還是比較多的诈茧，這里只是其中的一個(gè)典型的插件。這個(gè)plugin插件的作用就是更好的組織js代碼捂掰，能夠適應(yīng)js文件的動(dòng)態(tài)的變化敢会。html-webpack-plugin就是一個(gè)用來(lái)處理這些事情的插件镊叁。接下來(lái)就是loader了，loader就不做過(guò)多解釋走触，就是用來(lái)加載文件的晦譬。在使用loader的過(guò)程中，在我的電腦上報(bào)了一個(gè)錯(cuò)
Error: Cannot find module 'html-webpack-plugin' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25)
通過(guò)找答案互广，發(fā)現(xiàn)敛腌，需要
rm -rf node_modules || true // remove node_modules (all deps)
npm install // install all deps
然后你再運(yùn)行項(xiàng)目，就沒(méi)有問(wèn)題了惫皱。這是我的解決方案像樊，你自己如果有這問(wèn)題也可以試一試。loader 這個(gè)插件還是聽(tīng)不錯(cuò)旅敷。接下來(lái)了解下webpack-dev-server這個(gè)插件生棍，我感覺(jué)這個(gè)件就顯得比較厲害了，在開(kāi)發(fā)環(huán)境下編譯靜態(tài)文件媳谁、在本地上開(kāi)啟服務(wù)涂滴，打開(kāi)瀏覽器等。簡(jiǎn)單說(shuō)下安裝這個(gè)插件
# 先全局安裝
$ npm install -g webpack-dev-server
$ npm install --save-dev webpack-dev-server
#運(yùn)行
$ webpack-dev-server
這個(gè)運(yùn)行起來(lái)之后晴音，默認(rèn)的端口是8080柔纵，你也可以在webpack.config.js里面去修改它，比如我現(xiàn)在修改它為3000
module.exports = {
entry: './src/app.js',
...
devServer: {
port: 3000
},
...
};
就在module.exports加一句devServer: {port: 3000},就可以了锤躁。你重新啟動(dòng)這個(gè)服務(wù)搁料，就可以看到在3000端口的服務(wù)。這個(gè)webpack-dev-server使用的頻率還是比較的高也比較給力系羞，應(yīng)該仔細(xì)的學(xué)習(xí)和掌握郭计。
接下來(lái)看看babel這個(gè)控件，如過(guò)你沒(méi)有聽(tīng)說(shuō)過(guò)椒振，那么你就把它理解成為一個(gè)翻譯中間件昭伸，它在項(xiàng)目中就是負(fù)責(zé)把react代碼轉(zhuǎn)化成為普通的代碼，或者是把es6 的語(yǔ)法轉(zhuǎn)化為瀏覽器能夠讀懂的es5語(yǔ)法杠人。我們通過(guò)學(xué)習(xí)react來(lái)熟悉babel這個(gè)中間件
$ npm install --save react react-dom
$ npm install --save-dev babel-core babel-preset-react babel-preset-env
我們需要在 webpack 中使用一個(gè) loader 來(lái)轉(zhuǎn)化 react 的代碼勋乾。安裝babel-loader這個(gè)中間件
npm install --save-dev babel-loader
按照reils365的教程宋下，一步步去體會(huì)嗡善。
下面來(lái)到clean-webpack-plugin這個(gè)中間件的學(xué)習(xí)，其實(shí)這個(gè)中間件的功能就比較的容易讓人理解了学歧，就是在新生成文件的時(shí)候就先去清除之前的文件罩引。這樣就可以一定程度上避免混亂。在操作的過(guò)程中枝笨，又出了點(diǎn)問(wèn)題報(bào)一些錯(cuò)誤袁铐，在網(wǎng)上尋找答案揭蜒，我發(fā)現(xiàn)重新
rm -rf node_modules
npm start
當(dāng)然這個(gè)只是暫時(shí)解決，長(zhǎng)期還是要有一個(gè)比較好的解決方法剔桨。像這樣的情況可能就是依賴沒(méi)有被檢測(cè)到或者包沒(méi)有安裝好屉更，所以報(bào)錯(cuò)。一直跟著rails365的教程走洒缀。到了模塊熱替換這個(gè)地方瑰谜，我認(rèn)為這個(gè)也是比較重要的。模塊熱替換 不用刷新瀏覽器树绩，它是只讓修改到的模塊萨脑，才會(huì)在瀏覽器上發(fā)生相應(yīng)的變化，就是生效饺饭，而不用重新刷新瀏覽器渤早。在學(xué)習(xí)模塊熱替換中間件的過(guò)程中，我發(fā)現(xiàn)這個(gè)跟新的過(guò)程還是比較慢瘫俊，不知道這個(gè)是不是正常的情況鹊杖。然后一直跟著教程走，差不多走完了這個(gè)教程就對(duì)webpack打包有了最基本的認(rèn)識(shí)扛芽，想要更好的學(xué)習(xí)這個(gè)仅淑，自己就要去練習(xí)幾個(gè)項(xiàng)目。
學(xué)習(xí)完了webpack打包工具胸哥，現(xiàn)在就來(lái)學(xué)習(xí)react.js 這個(gè)前端框架涯竟，為了簡(jiǎn)便一些，也去找一個(gè)教程來(lái)跟著學(xué)做空厌。這次還是使用rails365的教程庐船，這個(gè)教程相對(duì)來(lái)說(shuō)還可以，時(shí)長(zhǎng)比較短嘲更，有重點(diǎn)筐钟，所以我個(gè)人感覺(jué)比較好。
下載Facebook在GitHub上面的creat-react-app這個(gè)項(xiàng)目赋朦，按照Facebook在GitHub上面的教程讓這個(gè)程序運(yùn)行起來(lái)篓冲。然后跟著rails365的教程走，基礎(chǔ)知識(shí)都是比較簡(jiǎn)單的宠哄。這里需要書(shū)說(shuō)明下壹将，在這個(gè)教程的過(guò)程中千萬(wàn)不要跳著看，不然什么都不知道毛嫉，知識(shí)點(diǎn)很緊密沒(méi)有什么廢話诽俯。
組件化是react前端框架的特點(diǎn)，所以這個(gè)是非常的關(guān)鍵承粤，我們把creat-react-app重新命名為my-app,在項(xiàng)目中新建一個(gè)目錄暴区，在目錄中增加兩個(gè)文件
成為component目錄下的目錄項(xiàng)闯团，按照rails365 的教程，這么走下去仙粱。
在這個(gè)過(guò)程中我記錄了一下重點(diǎn)
1房交、 搞明白props和state的區(qū)別和用法
在react中props是沒(méi)有狀態(tài)的，props是一個(gè)組件的設(shè)置參數(shù)伐割，可以在父控件中選擇性設(shè)置涌萤。父組件對(duì)子控件的props進(jìn)行賦值，并且props的值不可改變口猜。一個(gè)子控件自身不能改變自己的 props负溪。
在react中state是有狀態(tài)的，當(dāng)一個(gè)組件 mounts的時(shí)候济炎，state如果設(shè)置有默認(rèn)值的會(huì)被使用川抡，并且state可能時(shí)刻的被改變。一個(gè)子控件自身可以管理自己的state须尚，但是需要注意的是崖堤，無(wú)法管理其子控件的state。所以可以認(rèn)為耐床，state是子控件自身私有的密幔。
所以，就是它的值能不能改變的這個(gè)最大的區(qū)別撩轰。
2胯甩、在組件中傳值
這個(gè)在教程里面是說(shuō)的最多的一部分，主要是要掌握怎么在父組件與子組件傳值堪嫂，在組件間傳值主要是依賴于父組件偎箫。組件傳值是非常核心的東西，一定要重點(diǎn)掌握皆串。
在rails365的基礎(chǔ)教程中教程淹办，基本上就這兩點(diǎn)，掌握之后恶复，就有一個(gè)react的基礎(chǔ)了怜森。
