iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0
Modern Web

React + GraphQL 全端練習筆記系列 第 4

仿Trello - 建立React專案

本系列文以製作專案為主軸,紀錄小弟學習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:


上一篇
React 基礎簡介 - Props,State與事件處理
下一篇
仿Trello - 添加 Stylesheets
系列文
React + GraphQL 全端練習筆記30

尚未有邦友留言

立即登入留言