額外綜合練習(web)

<aside> 💡 主要內容 Fold Structure in React Pure CSS Responsive Design

</aside>

如何開啟一個專案？

大多使用者都是在Terminal(VScode終端機)寫下 npx create-react-app來開啟

而NPX是什麼？

要知道NPX是什麼東西，要先了解以下關係圖

JavaScript 執行環境
      ├── 瀏覽器環境
      └── Node.js
          ├── npm（套件管理工具）
          └── npx（命令行工具） <--你使用這個

而他們的相依狀況如下：

JavaScript 執行環境：
- 這是執行 JavaScript 代碼的環境，包括瀏覽器和 Node.js。資策會上課時主要便是使用瀏覽器執行並檢視。
  - Node.js：
    - 一個專為伺服器端設計的 JavaScript 執行環境。它允許在伺服器上運行 JavaScript 代碼。
      - npm：
        
        Node.js 的套件管理工具，負責安裝、管理和分享 JavaScript 套件。
      - npx：
        
        一個附帶於 npm 的工具，用來直接執行 npm 套件中的命令，無需全域安裝這些套件。

create-react-app便是 NPX的一個安裝包工具，他能夠自動設置好Webpack、babel等工具，同時設定好環境，讓你可以專注於寫Reaction代碼上，當然，使用這種安裝包也不是沒有缺點。

當使用 npx create-react-app 來建立新的 React 專案時，有一些明顯的優點和缺點。以下是這些優點和缺點的簡介：

優點	詳細說明	缺點	詳細說明
簡化設置過程	自動配置開發環境，包含 Webpack、Babel 等，使開發者不必手動配置。	限制性配置	初始配置比較固定，自定義配置需要額外的步驟（如 eject）。
快速入門	可以迅速建立一個基本的 React 專案，節省了許多時間和精力。	體積較大	生成的專案可能包含許多不必要的依賴和文件，增加了專案體積。
最佳實踐	根據 React 團隊的最佳實踐設定專案，讓新手和有經驗的開發者都能快速上手。	eject 的複雜性	如果需要進行更深入的自定義配置，需要執行 `eject`，這會使配置變得更複雜，且無法恢復。
持續更新	隨著 React 生態系統的變化和更新，create-react-app 會提供最新的技術堆疊。	學習曲線	對於完全自訂配置的用戶來說，初始配置可能過於繁瑣。
內建開發工具	提供了開發伺服器、熱重載功能，讓開發過程更加高效。	過度抽象化	對於一些進階用戶或有特定需求的專案，抽象化可能會阻礙對底層細節的控制。
易於擴展	可以輕鬆添加自定義配置或擴展現有的設定來滿足專案需求。

在這個學習專案中我選擇使用教學者提供的素材。位置在此：https://github.com/ZainRk/FitClub-Starter

而要使用別人提供的專案其實不需要全數下載，你可以選擇在Terminal(VScode終端機)中使用GIT中的 git clone 指令來安裝，