[第02堂] 安裝React環境

Node.js

一個JavaScript 執行環境(run-time environment)：傳送門 (下載左邊LTS版本)

• LTS 版本：表示這個版本會由官方長期維護，通常會持續至少 30 個月以上的問題修正。
• Current 版本：當前最新的版本，雖然裡面可能會有新功能，但是這些功能最後不見得會留下來。

NVM

Node Version Manger，Node 的版本管理器，管理、切換Node版本。
下載nvm-setup.zip檔案：傳送門

常用指令

• nvm ls：列出所有已安裝的node版本，前面有標*是目前使用的版本
• nvm install <version>：安裝某個版本的 node
• nvm uninstall <version>：解除安裝指定版本
• nvm –version：查看nvm版本
• nvm use <version>：切換node版本

$ nvm ls

    18.12.1
  * 16.13.1 (Currently using 64-bit executable)
    12.14.0

NPM

Node Package Manager，Node 的套件管理器，安裝Node.js的時候會一起安裝，能下載和管理各種套件。

常用指令

• npm install：尋找該資料夾裡面的package.json去下載裡面定義好的所有套件
• npm init：專案初始化讀取package.json的資訊，傳送門
• npm start：本地運行專案
• npm run build：將專案打包成webpack

NPX

和NPM一樣是套件管理工具，不過是以暫存的方式使用套件，用完就刪。
更詳細解答：傳送門

常用指令

• npx create-react-app <name>：建立一個React專案，並把所有會用到的工具套件都安裝完畢

React 環境建置可分為兩種

• 自己從頭開始做：
  使用 React + Webpack 打包 + Bable 編譯 + Webpack Dev Server
• 使用現成的套件：
  create-react-app，由 React 官方提供，是一套CLI（Command Line Interface）工具

起一個新的專案

• step 1

$ node -v

若出現找不到指令，就是沒安裝成功。

• step 2

$ npx create-react-app my-app

• step 3

$ cd /my-app

可以透過cd ..、ls等指令找到專案

• step 4

$ npm start

檔案目錄結構

|
–– /node_modules 負責用來存放經由 npm 安裝過後的套件
|
–– /public 靜態網頁
|
–– /src
專案中主要的檔案都會放置在此資料夾下，其中 index.js 是整個專案的程式進入點， App.js 是 React 建立專案預設的元件。
|
–– .gitignore 忽略不上傳git的檔案 (ex：.env、package-lock.json、node_modules)。
|
–– package-lock.json 在npm install時後生成一份文件，紀錄當前狀態下安裝的各個npm package的具體來源和版本號。
|
–– package.json 記錄所有安裝的套件與版本，用於專案設定與可以一次安裝多項套件，並且解決相依性問題。
|
–– README.md

index.js 為 React 專案啟動時的進入點，會把放在ReactDOM.render裡面的程式渲染在html檔裡面的root標籤內，一般會將App.js頁面元件放置於此進行渲染。

• 渲染
  在網頁載入時，將React 元件轉換成網頁內容的過程。

常用套件

• lodash
• moment
• Ant Design(ANTD)
• Mantine
• ECHARTS
• SweetAlert2

ReactDOM.render

是React的程式進入點，用來將 Virtual DOM 轉換成為真實的DOM。

把要渲染的內容丟入ReactDOM -> ReactDOM整理要渲染的內容 -> 對原始綁定的div在DOM上的位置做渲染 -> 完成畫面渲染

寫法：
ReactDOM.render(要顯示的 React Element, 要顯示到哪個 HTML DOM element )

ReactDOM.render(<App />, document.getElementById("root"));

## React v18
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);