React.js —第 02天

MonLes

2022 年 6 月 11 日

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, 如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