2. 架構完整的React 專案結構 | React 架構
.├──public│ ├──favicon.ico│ ├──index.html│ ├──logo192.png│ ├──logo512.png│ ├──manifest.json│ └──robots.txt├──src│ ├──App.css│ ├──App.test.tsx│ ├──App.tsx│ ├──index.css│ ├──index.tsx│ ├──logo.svg│ ├──react-app-env.d.ts│ ├──serviceWorker.ts│ └──setupTests.ts├──README.md├──package.json├──tsconfig.json└──yarn.lock這是create-react-app預設的專案結構我們可以看到src/裡面基本上是沒有特別的結構因為create-react-app本身並沒有提供專案的推薦結構我們必須要自己進行規劃才行這篇主要會分享平常我...
. ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── README.md ├── package.json ├── tsconfig.json └── yarn.lock這是 create-react-app 預設的專案結構我們可以看到 src/ 裡面基本上是沒有特別的結構因為 create-react-app 本身並沒有提供專案的推薦結構我們必須要自己進行規劃才行
這篇主要會分享平常我們使用的結構由於最近發現一些更好的模式(不過還沒實戰)所以會先暫時分享目前的版本
一般來說,我們會使用以下的架構做為專案的初始化
src/ components/ pages/ images/components 裡面主要放所有的元件實作pages 裡面則是放頁面層級的元件images 則是放需要引入的圖片
這邊特別將 pages 拉出來是因為我們不能讓 routing 跟 components 相依對於任一個 components 來說,應該是可以放在任何地方的所以只要有使用到 routing 的部分,像是 useRoute 或是 withRouter(Page)都應該是綁定到 page 層級,而 page 層級還需要簡單到可以讓人直接了解結構ex.
const Page = () => { return ( <div> <Header /> <Content> ...