# [第02堂] 安裝React環境
## Node.js
>一個JavaScript 執行環境(run-time environment)：[傳送門](https://nodejs.org/en/) (下載左邊LTS版本)

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


## NVM
>Node Version Manger，**Node 的版本管理器**，管理、切換Node版本。
>下載nvm-setup.zip檔案：[傳送門](https://github.com/coreybutler/nvm-windows/releases/tag/1.1.7)

### 常用指令
* **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的資訊，[傳送門](https://ithelp.ithome.com.tw/articles/10191682)
* **npm start**：本地運行專案
* **npm run build**：將專案打包成webpack

## NPX
>和NPM一樣是套件管理工具，不過是以暫存的方式使用套件，用完就刪。
更詳細解答：[傳送門](https://ithelp.ithome.com.tw/articles/10234240?sc=iThelpR)

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

:::info
:bulb: 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](https://lodash.com/)
* [moment](https://momentjs.com/)
* [Ant Design(ANTD)](https://ant.design/components/overview/)
* [Mantine](https://mantine.dev/)
* [ECHARTS](https://echarts.apache.org/zh/index.html)
* [SweetAlert2](https://sweetalert2.github.io/#examples)

### 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>
);