---
# System prepended metadata

title: React 專案的結構
tags: [' react-page', note-page]

---

---
title: React 專案的結構
tags: note-page, react-page
---

# React 專案的結構

成功執行之後我們開始來了解整個專案的結構!

先打開VS Code，並且打開剛剛建立的專案資料夾

![](https://i.imgur.com/ePX5ldC.png)

先看到這三個資料夾
- **node_modules**: npm放模組的地方，我們可以不用理他
- **public**: 是網頁應用在用戶端上的顯示方式相關的文件，最重要的是index.html，這是我們頁面的HTML模板
- **src**: src文件夾裡面有所有JavaScript，CSS和圖像文件，這些文件會被編譯成bundle，然後加到index.html中

剩下還有一些檔案
![](https://i.imgur.com/LD8G3qH.png)
- **.gitignore**：可以讓版本控制忽略不要追蹤檔案，如果你對git不熟，就忽略它吧!!
- **package.json**: 裡面寫著這個專案的模組清單、指令清單...etc，專案的控制資訊都在這裡
- **package-lock.json**: 模組的資訊
- **READMEmd**： 自述文件，對你的專案做自我介紹。

:::info
對各個資料的詳細介紹，我再找時間更新吧!!
:::