終於差不多進入30天前端技能樹之旅的尾聲，最後就來利用系列後半部所學的 React，搭配 Redux、Styled-components 來個小試身手，實作一個待辦清單 Todolist 作品。

建置專案

在本地建立一個 React 專案，要使用 Babel 和 webpack，將 React 寫出來的檔案轉換成瀏覽器讀得懂的 HTML、CSS 和JavaScript，建置的步驟其實有點繁瑣。

Create React App

很幸運的是有一個好工具 — Create React App，開啟想要放置專案的資料夾，在終端機輸入下面的一行指令，就能自動幫我們建立好一個 React專案。

npx create-react-app my-app

用 Vscode 開啟新增的 my-app 專案，看到的架構應該會是下面的樣子：

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

並且清除專案預設但我們不需要的程式碼，將網頁的畫面清空：

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

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

app.js

function App() {
  return (
    <div className="App">
      App
    </div>
  );
}

export default App;

React-redux / Styled-components

接著安裝用來管理資料狀態的 React-redux

npm install --save react-redux

以及能夠為 React Component 設置樣式的 Styled-components

npm install --save styled-components

圖片檔

待辦清單的設計稿和會用到的圖示可以從範例程式碼下載，圖片檔放在 src / assets 內。

拆解 UI

開始進入實作待辦清單的步驟，首先要做的就是觀察視覺設計稿，用 React 的架構思考，將 UI 拆解成 Component，預先設想好要建立那些元件。

依據每個 Component 只會負責一件事的原則，大概可以將 UI 拆解成這五個 Component：

• App（紫色）：包含全部內容
  • AddTask（紅色）：負責新增Task的區塊
  • TaskList（黑色）：負責列出待辦事項，包含篩選器跟清單
    • Filter（綠色）：控制篩選
    • TaskItem（橘色）：待辦項目

專案架構

將這幾個 Components 的檔案先建立好，放在 components 資料夾內：

my-app
├── ...
└── src
    ├── components
        ├── App.js
        ├── TaskList.js
        ├── Filter.js
        ├── TaskItem.js
    ├── ...

初始化 Components

第二個步驟，建立一個靜態版本的網頁，將每個 Component 的架構建立好，只要渲染網頁需要的 Element，不需要進行新增元件樣式跟處理待辦事項的資料。

App

App Component 會包含一個標題，以及新增任務輸入框 AddTask Component 和任務清單 TaskList Component：

App.js

import TaskList from "./TaskList";
import AddTask from "./AddTask";

function App() {
  return (
    <div>
      <h1>Todolist</h1>
      <AddTask />
      <TaskList />
    </div>
  );
}

export default App;

AddTask

AddTask Component 有 input 文字類型的輸入框，裡面的 placeholder 可以表示還沒輸入時的文字；而另外還有新增任務的按鈕，並且會使用到 Icon：

AddTask.js

import addIcon from "../assets/icon/add.png";

function AddTask() {
  return (
    <div>
      <input
        type="text"
        placeholder={"Add new task ..."}
      />
      <button>
        <img src={addIcon} alt=""/>
      </button>
    </div>
  );
}

export default AddTask;

TaskList

TaskList Component 會包含上方的篩選器 Filter 和任務清單，目前就先預設好顯示三個項目 TaskItem：

TaskList.js

import Filter from "./Filter";
import TaskItem from "./TaskItem";

function TaskList() {
  return (
    <div>
      <Filter />
      <div>
          <TaskItem />
          <TaskItem />
          <TaskItem />
      </div>
    </div>
  );
}

export default TaskList;

Filter

Filter Component 包含三個按鈕，分別可以篩選全部 / 待辦 / 完成的任務：

Filter.js

function Filter() {
return (
    <div>
      <button>All</button>
      <button>Todo</button>
      <button>Done</button>
    </div>
  );
}

export default Filter;

TaskItem

TaskItem Component 除了任務名稱、可以刪除任務的刪除按鈕，還會包含 input 勾選類型的輸入框，當完成任務時可以勾選：

TaskItem.js

import checkIcon from "../assets/icon/check.png";

function TaskItem(props) {
return (
    <div>
      <input type="checkbox"/>
      <div>TaskName</div>
      <button>Delete</button>
    </div>
  );
}

export default TaskItem;

完成上方建立所有 Component 的步驟後，畫面應該會像下面這個樣子：

小結

建置專案環境、並且拆離UI設定好所有 Component 後，在下一篇文章，就要使用套件 Styled-components 來為元素添加樣式，讓畫面跟設計稿一樣，那我們就明天見囉！

範例程式碼

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️