diff --git a/進階_React框架/README.md b/進階_React框架/README.md
index 36c9031..885ae57 100644
--- a/進階_React框架/README.md
+++ b/進階_React框架/README.md
@@ -1,3 +1,7 @@
+### 文件導航測試
+- [前往介紹Nodejs與npm介紹安裝](docs/Nodejs.md)
+
+
 # React 
 ## 基於VUE 可以更有效率地進行前端，省了很多路由部分，可以直接創建Page即可開始
 先下載Node.js 並安裝
@@ -8,4 +12,3 @@
 ```
 npm -v
 ```
-![](http://leovip125.ddns.net:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%871.png)
diff --git a/進階_React框架/assets/npmbug1.JPG b/進階_React框架/assets/npmbug1.JPG
new file mode 100644
index 0000000..45a7f79
Binary files /dev/null and b/進階_React框架/assets/npmbug1.JPG differ
diff --git a/進階_React框架/docs/Nodejs.md b/進階_React框架/docs/Nodejs.md
new file mode 100644
index 0000000..683cb0c
--- /dev/null
+++ b/進階_React框架/docs/Nodejs.md
@@ -0,0 +1,61 @@
+# Nodejs與npm
+Nodejs:一個不需要開啟網頁就能夠執行javascript的環境
+npm(node package manager): 類似於pip、nuget，一個套件管理工具
+
+npm這個工具本身是由javascript寫出來的，所以npm和nodejs才會綁在一起下載
+使用React前端框架照理說不需用到Nodejs，但是需要npm去安裝一些前端框架會用到的工具
+常用套件工具:
+	React 本體（react、react-dom）
+	開發工具（Vite / Webpack）
+	TypeScript 支援（若使用 TypeScript）
+	狀態管理（Redux, Zustand）
+	UI 框架（Tailwind CSS, Material UI）
+	前端路由（React Router）
+	API 請求（axios, fetch）
+
+# Vscode編譯器
+vscode本身沒有支援npm，需去下載nodejs，https://nodejs.org/zh-tw
+
+
+下載完vscode終端檢查有無node.js
+```
+node -v
+```
+檢查有無npm
+```
+npm -v
+```
+
+
+# Package.json
+這個跟nuget一樣會有一個dependencies去記錄你安裝的套件
+```
+"dependencies": {
+  "react": "^18.2.0",
+  "react-dom": "^18.2.0",
+  "react-router-dom": "^6.7.0"
+}
+```
+當別人拿到你的程式碼時，他們只需要執行
+```
+npm install
+```
+
+先下載Node.js 並安裝
+
+於準備開發的資料夾下方開啟CMD
+
+檢查有無node.js
+```
+npm -v
+```
+# React 
+## 基於VUE 可以更有效率地進行前端，省了很多路由部分，可以直接創建Page即可開始
+先下載Node.js 並安裝
+
+於準備開發的資料夾下方開啟CMD
+
+檢查有無node.js
+```
+npm -v
+```