挑戰 React 第七篇

上篇了解了package.json，此篇會介紹剩下來的檔案與資料夾。

資料夾結構介紹

檔案

用語法糖 create-react-app 建立 Learn_react 專案後，除了上篇介紹的package.json還有以下兩個檔案：

1. .gitignore
   某檔案或是資料夾我不想放在 Git 裡面
   ex. react預設會設定 /node_modules 資料夾 不要寫入git 版控裡
2. README.md
   開啟專案通常會先看README.md這個檔案，敘述這個專案的環境建立，與功能介紹。

資料夾

底下有三大資料夾：

1. node_modules
2. public
3. src

node_modules

在上一篇有提到，相關的 dependencies 都會放在此資料夾，在執行 create-react-app 或者 npm install 會預設產生這個資料夾。

public

1. 三個圖片檔 favicon.ico / log192.png / logo512.png
2. manifest.json

我第一次聽過這個檔案名稱，查了一下與使用者體驗有關係，
可以看到以下截圖根據不同螢幕尺寸的裝置給予適當的圖片大小，也就是 RWD 。還有具備 PWA（Progressive Web App） 功能，意思就是逐步的將網站漸進優化為具備 APP 的優點。

參考連結

3. index.html

基本上在專案裡這個html檔案是唯一一個html檔案，為了讓 React 動態控制專案的 UI。因此會利用id="root"這個節點去渲染我們要的畫面。

src (source)

我們大部分時間都會使用src資料夾來操作專案內容。

4. index.js

這個檔案用剛剛所說的 root 節點渲染(render)App component

5. App.js Component

若仔細看程式碼，與yarn start出來的預設畫面內容是一致的。而這個App.js組件負責UI介面。

6. App.test.js

測試檔案，負責測試 App.js 內容是否符合預期。

7. App.css / index.css

這兩個檔案分別為各自的組件做樣式的部分。

8. serviceworker.js

此檔案與 /public/manifest.json 有關係，都是讓使用者有 PWA 的使用者體驗，這個比較不是我要著墨的地方，所以不多贅述。

重點整理

1. 大部分時間我們都在使用src資料夾
2. 只會有一個html檔案(index.html)
3. 用 index.js 渲染 UI 畫面