React.js —第 02天

React 官方網站|

https://reactjs.org/

安裝以下

• Visual Studio Code
• Node.js
• nvm(Node.js Manager, MAC OS)
• nvm(Windows)
• git
• brew(only for Mac OS)
• yarn(非必要)

npm install --global yarn

更多安裝步驟可見 | https://ithelp.ithome.com.tw/articles/10185954

創建新的REACT APP

npx create-react-app my-app

cd my-app

npm start

目錄路徑中，最好不要有中文。

從0創建 Toolchain

一個JavaScript build toolchain 通常包含以下:

• Package管理員(package manager), 如Yarn or npm. 它讓你擁有第三方packge，能享有react廣大生態系的優勢，同時能非常輕鬆地安裝和更新packages。
• A bundler, 如webpack 或 Parcel. 讓我們輕易寫出模組程式碼(modular code)，並能將他們bundle再一起，並在load time優化。
• 編譯器( compiler)，如 Babel. 它讓你寫出現代JS程式，並讓其也能在舊瀏覽器運作。

More info | https://zh-hant.reactjs.org/docs/create-a-new-react-app.html

Dependencies

你會在VS Code左邊側欄(exploerer)看到安裝完react，所創建的預設檔案們。

在 Package.json, 區塊 “dependencies”:{},

一個 dependency 就是你在專案中所使用的一個package ，包含最重要的版本。

Scripts

在 Package.json, 你會看到區塊 “scripts”:{},

yarn start 或 npm start

react-scripts 就是當我們需要轉換 React JSX文本，成純粹的JavaScript，所需要的腳本(scripts)。

在瀏覽器輸入以下URL，確認運行正常，

localhost:3000

more info | https://www.freecodecamp.org/news/create-react-app-npm-scripts-explained/

yarn build

優化專案效率，你會在跑完yarn build後看到一個資料夾--build，那是先前所寫的所有檔案們被壓縮而成的精華😎

Babel

npm install --save-dev @babel/preset-react

Use next generation JavaScript, today. Babel will turn your ES6+ code into ES5 friendly code, so you can start using it right now without waiting for browser support

使用下世代的Javascript，Babel可將ES6+的程式轉成，對ES5友善的程式，所以你現在就可以使用了，不必在等待瀏覽器的支援。

more info | https://stackshare.io/stackups/babel-vs-webpack

WebPack

npm install -g webpack

Webpack 是一種build tool，想像成幫忙建造的工具，將所有資產，包含 Javascript，圖像，文字和CSS，打包在dependency graph。

簡言之，模組打包工具（module bundler）

Webpack 讓你可使用require() 在你的source code中，用其指向local file，如圖像，並決定他們將在最終Javascript bundle中被如何處理，如:使用URL指向一個CDN，代替路徑。

more info |

1. Webpack 初學者教學課程 Part1

對於像我這樣的人來說，第一次接觸到 webpack 是像是這些 repository： 雖然這些 repository 放在一起很棒，但它們不一定是最好的學習工具。…neighborhood999.github.io

https://github.com/kdchang/reactjs101/blob/master/Ch02/webpack-dev-enviroment.md

本日結論

Babel可以被分類成一項工具， 在“JavaScript 編譯器” 的範疇, 而Webpack 責備分組在“JS Build Tools / JS Task Runners”.