React.js —第 02天
React 官方網站|
安裝以下
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 |
https://github.com/kdchang/reactjs101/blob/master/Ch02/webpack-dev-enviroment.md
本日結論
Babel可以被分類成一項工具, 在“JavaScript 編譯器” 的範疇, 而Webpack 責備分組在“JS Build Tools / JS Task Runners”.
Like my work? Don't forget to support and clap, let me know that you are with me on the road of creation. Keep this enthusiasm together!
- Author
- More