React 專案的資料夾結構

當執行 create react app 後，資料夾內也會自動產生一些內容

node_modules

所有經由 npm 安裝的 node packages 都在這個資料夾裡，基本上不需要修改裡面的內容，node packages 的安裝跟移除都是在 command line 裡面輸入指令處理
另外，在 production app 的時候，這些 packages 也不會出現

public

打開 index.html
裡面只有一個 id 為 "root" 的 div
React 會把 src 資料夾內編譯出的內容插入到 root 這個 div 內
跟

<noscript>You need to enable JavaScript to run this app.</noscript>

意思就是 當瀏覽器不執行 js 的時候才會出現這行提醒

src

頁面上真正的內容所在，所有component / css / image 等都會放在該資料夾內
接下來的多數時間都會在這個資料夾內做編寫

README.md

該專案的說明文件，.md 檔案類型是 markdown 文件
因為從 create react app 建立出專案，所以此處的內容便會跟 create react app 官方的說明內容相同

package.json

顯示安裝的 node packages 列表，以及一些專案相關的配置

package-lock.json

當進行 npm install 後自動產生的文件，內容為 鎖定安裝 packages 時的版本，以保證其他人使用這份檔案進行 npm install 的時候，安裝的版本能夠保持一致

gitignore

決定丟到 git 庫上要忽略掉哪些內容，像 node_modules 資料夾內的東西就是其中一項，只需要分享 package.json 就可以知道這個專案內的 node packages 內容，進而從 npm 指令安裝，而不需要存取所有的 node packages 的資料夾內容

了解 react project 的架構後，接下來進到 src 資料內的 App.js 中，看 component 是怎麼被構成的