React.js —第 02天

MonLes
·
·
IPFS
·


React 官方網站|

https://reactjs.org/

安裝以下

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, 如webpackParcel. 讓我們輕易寫出模組程式碼(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”.


CC BY-NC-ND 2.0

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!

MonLes嘗試從都市叢林回到魔法森林。 更多作品 | https://linktr.ee/monles
  • Author
  • More

React.js — 第07天

Javascript — 第09天

Javascript in Leetcode 22–24 | 面試問題