iT邦幫忙

1

介紹 create-react-app 建立出來的資料夾結構 (下)- 原來只有一個html檔案

挑戰 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 的優點。

參考連結

  1. index.html

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

src (source)

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

  1. index.js

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

  1. App.js Component

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

  1. App.test.js

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

  1. App.css / index.css

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

  1. serviceworker.js

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

重點整理

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

尚未有邦友留言

立即登入留言