# 目錄
:::success
:notebook: Syllabus
[ToC]
:::

# 使用環境
:::info
- **NPM版本：** 10.5.2
- **Node.js版本：** v20.12.2
- 下載：https://nodejs.org/en/
> 功能規格設計：https://docs.google.com/presentation/d/1ZeZOXt_ZlZ_8PgSibA_K_8cEcH9qpcNToNPweYE-Gos/edit?usp=sharing
:::

**名詞解釋**

- **JavaScript (JS)**
- 一種程式語言
- **Node.js**
- 基於 Chrome 引擎的 JavaScript 運行環境（可以用 JavaScript 開發後端）
- **React**
- JavaScript 函式庫
- 一種前端框架

------------------
# Pre-request
- React: `npm install semantic-ui-react`
- CSS: `npm install semantic-ui-css`

---

# Node.js
> 下載： https://nodejs.org/en/

Node.js 是以 JavaScript 語言為基礎，是一個開放的原始碼 (Open Source) 的應用程式框架 (Application Framework)。

- [Node.js 入門介紹 - ITHome](https://ithelp.ithome.com.tw/articles/10191513)

## NPM(套件管理工具)
> node package manager

- [NPM 是什麼](https://tw.alphacamp.co/blog/npm-node-package-manager)
- [NPM install](https://ithelp.ithome.com.tw/articles/10234060)

---

# JavaScript (JS)

> React的爹

## 學習資源

- [重新認識 JavaScript - ITHome](https://ithelp.ithome.com.tw/users/20065504/ironman/1259)
- [Arrow Functions 語法 - ITHome]( https://ithelp.ithome.com.tw/articles/10207860)

---

# React

## 學習資源

* [官方網站](https://zh-hant.legacy.reactjs.org/tutorial/tutorial.html)
* 這裡面有個任務，做完會清楚很多
* [一次打破 React 常見的學習門檻與觀念誤解 - IThome](https://ithelp.ithome.com.tw/users/20129300/ironman/5892)
* [React 專案的結構 - HackMD](https://hackmd.io/@mirumodapon/React-Tutorial/%2F%40mirumodapon%2FH1e7bRU0P)
* [留言板實戰 - HackMD](https://hackmd.io/@Heidi-Liu/note-fe302-react-board)
* [前端](https://www.youtube.com/watch?v=EwvFcFpZWio&list=PLddLA9QpG2T2__tPfi6nwaL8Rf_wWQaz7)
* [Easy Example - GitHub](https://github.com/katy-tsai/react_demo/tree/master)

## Tools
* [MEMU](https://react.semantic-ui.com/)
* [LAYOUT](https://ithelp.ithome.com.tw/articles/10196714)
* [色彩選擇工具](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_colors/Color_picker_tool)

## DOM vs. Virtual DOM

### DOM

> DOM（Document Object Model）是存在於瀏覽器 JavaScript 環境中的樹狀資料結構，用來描述瀏覽器畫面中的節點，每個節點實際上是一個 JS 物件，這個物件除了包含了該元素的一些屬性，還提供了一些介面（方法），以便調用於插入和操作 DOM。

- ==**目標：以最少的 DOM 操作來達到所需要的畫面結果**==
- [DOM 與 Virtual DOM - IThome](https://ithelp.ithome.com.tw/articles/10293802)

### Virtual DOM

**每一個 Virtual DOM element 的資料都是普通的 JavaScript 物件變數，內容則嘗試在描述一個真實的 DOM element 預計要長的樣子**
先自行以 Virtual DOM 來定義預計想要的畫面結構，然後再將這個結構的描述轉換成真實的 DOM Tree
**Virtual DOM => DOM 單向**
開發者對 Virtual DOM 進行管理與互動，而由 Virtual DOM 到真實 DOM 的同步則由程式自動處理
**沒有**與瀏覽器的渲染引擎做直接的綁定


----------
# FAQ

> 如何下載專案？

- 先使用 `git clone <repo>` 把專案抓下來
- 進入 `CLHS-DOOS/clhs-doos-front`
- 輸入以下指令

    npm install
    npm audit fix --force

- 這些指令會幫助你在專案底下載入一些 node 相關工具
- 使用 `npm start` 啟動專案
- 如果遇到下圖問題，請輸入 `set NODE_OPTIONS=--openssl-legacy-provider` 再執行 `npm start`

---

# 切版目前進度

理想

現實
4/26 00:18