diff --git a/進階_React框架/assets/2-1.JPG b/進階_React框架/assets/2-1.JPG
new file mode 100644
index 0000000..8f8e8c9
Binary files /dev/null and b/進階_React框架/assets/2-1.JPG differ
diff --git a/進階_React框架/assets/2-2.jpg b/進階_React框架/assets/2-2.jpg
new file mode 100644
index 0000000..dbf8f2e
Binary files /dev/null and b/進階_React框架/assets/2-2.jpg differ
diff --git a/進階_React框架/docs/Structure.md b/進階_React框架/docs/Structure.md
new file mode 100644
index 0000000..b061c6b
--- /dev/null
+++ b/進階_React框架/docs/Structure.md
@@ -0,0 +1,26 @@
+# 專案結構
+此專案結構可以理解為何在改完程式後按ctrl+s儲存網頁會馬上更新，  
+不用像傳統vs一樣熱重載+f5網頁重整才能看到結果，  
+因為vite伺服器有幫忙裝熱重載模組，
+專案儲存後React會自動將元件渲染在html上
+## (重要)html與tsx的關係
+![image](../assets/2-2.jpg)
+
+###APP.tsx與APP.css
+React框架下主要開發的頁面
+
+###index.html與index.css
+用來包裝App.tsx頁面  
+index.css主要用來改全域的css  
+
+###main.tsx
+程式進入點，將App.tsx渲染在index.html上然後將網站run起來  
+(可以以winform或pyqt的app.run下去理解)
+
+## Vite.config.ts
+可以更改網站port號  
+![image](../assets/1-1.jpg)
+
+## Package.json
+安裝套件資訊都在這
+![image](../assets/1-2.jpg)
\ No newline at end of file