昨天講完了 root 根目錄
今天我們來看 src 裡面放了什麼吧

src

folder

components

只要是「共用」的元件都會存放到這個資料夾
底下依照不同功能及頁面，分門別類

containers

用於存放不同情況下所使用的 layouts

contexts

只要是全域會用到的變數，都會存放於此
比較特別的是，關於驗證的 Conetxt 並不是放在使專案中
而是放在「lodestar-app」的 context 中，後續也會再提到這部分

helpers

A "helper function" is a function you write because you need that particular functionality in multiple places, and because it makes the code more readable.

在開發的過程中，有時候我們可能會經常地重複使用某個函數
這時候我們可以將其抽取成一個 helper function，方便重複使用管理
helpers 裡面放著常用的函數外，還有翻譯檔和 GraphQL

hooks

裡面絕大部分都是存放操縱資料庫的 custom hook
和helpers不同，它可以在不同情境下可能會需要調取某個功能的資料
這時候僅需要直接 import 引入，非常方便

images

裡面放著專案中所必需的圖片，其餘的圖片存放，皆在 AWS S3 上

pages

所有頁面皆放於此，在某些 Page 中，也會存放有關此頁面會用到的元件(僅會在此頁面所共用的元件)

translations

顧名思義，裡面存放著各個語言的翻譯檔，後續也會進行介紹

types

由於專案使用的是 TypeScript，如果type散落各地，不好管理
所以有統一的地方存放，更容易進行管理及調用
裡面的檔案根據不同功能進行分類

others

• Application.tsx
  專案的進入點，同時專案的 Context 也在這邊被調用
• hasura.d.ts
  Hasura 所產生的 type 檔，在使用 Apollo 進行 query 或 mutation 時，所會用到的
• LoadablePage.tsx
  在載入時，會顯示此頁面
• styles.scss
  可以修改全域的樣式
• theme.json
  由於可以在此核心的基礎上進行開放，倘若想使用自己使用的色彩規範
  可以到此進行修改

明天我們來看檔案的命名方式

參考文章

Helper function 定義