[Day 26 - 小试身手] Todolist with React (1)

终於差不多进入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 的步骤後，画面应该会像下面这个样子：