編輯嚴選

React Hello World

接續上一篇，這邊要來寫一個React hello world app，最後安裝webpack-dev-server來提升開發效率。

使用npm安裝react, react-dom:
$ npm install react react-dom --save

dependencies下紀錄的是生產環境會用到的套件，這邊不使用--save-dev是因為生產環境也會用到react。

值得一提的是，跟上篇不同，這次把bundle.js放在body的最後，主要是因為scope問題，jsx中有取得root element的語法，因此才要放在這。

index.js跟上篇一樣不變:

接著，由於瀏覽器只看得懂javascript，因此為了將jsx編譯成js，需安裝babel loader與core:
$ npm install babel-loader --save-dev
$ npm install @babel/core --save-dev

安裝@babel/preset-react，主要用來把jsx檔案編譯成javascript:
$ npm install @babel/preset-react --save-dev

安裝翻譯ES6語法的preset，用來將ES6語法編譯成ES5:
$ npm install @babel/preset-env --save-dev

entry中加入app.jsx，即jsx的內容也會被編譯到public/bundle.js去。

module下的rules的.jsx那邊的設定，意思是副檔名.jsx的檔案使用preset-react編譯成javascript ES6，再用preset-env編譯成ES5語法。

.js的設定則是把.js使用preset-env編譯成ES5語法。

最後打包:
$ webpack --mode production

打開bundle.js會發現程式碼被編譯與壓縮過了:

如果每次改完code就要打包一次，然後網頁再重新整理一次來測試，這樣會累死啊!

可以安裝webpack-dev-server這個好用的東西，來簡化這個流程:
$ npm install webpack-dev-server -g

修改webpack.config.js:

這邊指定開啟的port為9000，若沒指定預設是8080。

這邊要記得設定contentBase，因為我們輸出的bundle.js是指定到public下，如果沒有設定這個，dev server會不work，也就是你code存檔了，但卻沒即時刷新瀏覽器。

開啟server指令:
$ webpack-dev-server

指令如果覺得很長麻煩，可以做以下設定:

設定package.json:

加入紅框的設定，之後可以直接執行:
$ npm run open

來打開dev server!

後來發現執行後出現這個error，是因為webpack-cli 4已經删除了webpack-cli/bin/config-yargs文件，因此要uninstall改裝3的版本:

$ npm uninstall webpack-cli
$ npm install webpack-cli [email protected] -S

接著你每次改程式碼儲存後，就會自動幫你build, refresh瀏覽器，是不是很方便呢?

另外如果IDE是用VSCode，甚至不用輸入指令直接點Debug icon就執行dev server了，如下圖紅框:

開啟localhost:9000，接著更動app.jsx儲存，會發現瀏覽器會即時更新:

完整source code: