本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。

專案簡介

專案目標是製作一個仿製Trello看板畫面的作品，Trello是一個專案管理工具，主要特色是在一個看板上有著複數個清單，每個清單上能增加代辦事項，並且能把代辦事項以拖曳的方式在各個清單間移動。

簡言之，是一個能夠拖曳的TodoList(s)。

當然Trello還有許多其他功能，能夠多人協作、新增項目到期日、追蹤等等，不過這裡目標設在以React仿製一個包含以下功能的看板:

• 代辦事項(Todo)的CRUD
• 清單(List)的CRUD
• 能自由拖曳代辦事項到不同清單或不同順序的位子上

UI/UX會盡可能模仿Trello，刺激自己思考如何達到一樣的效果。
接著就動手啦。

Create React App

建立React專案有好幾個方式，其中React推薦初學者的方式就是使用Create React App(以下簡稱CRA)這個套件，他幫助設定好了Webpack跟Babel，方便開發者在要發布的時候能夠直接進行Build，不用自己設定相關的細節，能夠更專注在React本身。

CRA指令:

npx create-react-app [name]

name的部分就是React專案資料夾的名稱，這次因為要分別作前後端，我命名為client

npx create-react-app client

cd進client資料夾後執行npm start進行編譯

cd client
npm start

先到瀏覽器上開啟 http://localhost:3000 看看CRA建立的預設畫面

回到專案上看看CRA幫忙建立了這些:

client
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── index.html
│   ├── favicon.ico
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

public/index.html是頁面主體，裡面建立了
<div id="root"></div>這個DOM，之後執行src/index.js裡的

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

就會將App這個React component掛到root上，渲染出來。
這邊要注意的是，index.html跟index.js的名稱是絕對不能改的，改了的話npm start的時候會找不到檔案。

App建立好了之後，下一篇不急著建component，先來加一些style套件。

題外話

如果想要修改CRA的Babel設定該怎麼做?

在CRA建立的專案裡你是找不到.babelrc來修改的，想要變更設定有幾個做法:

1. npm run eject 
   

   CRA提供的指令之一，用了之後就脫離CRA的掌握，然後就再也回不去了。
   他會將CRA封裝的webpack、babel相關config建回專案資料夾中，依賴的package加到package.json中，讓開發者能夠自行修改，不過修改完是塞不回CRA的。
   再次提醒，這個指令是單行道，無法復原。

2. npx create-react-app my-app --template [template-name]
   

   在執行CRA安裝的時候可以選擇設定樣板，像是想要用typescript的話:

   npx create-react-app my-app --template typescript
   

   typescript是CRA自帶的樣板之一，想要其他樣板的話，可以到 npm 搜尋 cra-template-*。

3. 其他套件
   能夠加裝其他套件像是react-app-rewired來幫助微調設定，相關作法請參照各套件的doc，這邊提供一個範例:

   如何在React中使用pug樣板語言

References:

• Trello
• 建立全新的React App - React
• Create React App Docs