React菜雞-Day16：實戰！寫個To Do List — part1 — 先把架構弄出來

tags: 鐵人賽 React javascript nodejs

鐵人賽第16天，學了這麼多知識，是時候來個實戰讓自己融會貫通一下。💪🏾💪🏾💪🏾

今晚～我想來寫個To DO List吧

• 今天我們來寫個前端的Hello World，也就是To Do List的範例，這個範例可以讓我們練習之前的React招式系列及讓React更優雅的JS系列。

先來個架構分析

• 撰寫之前，我很喜歡先拆解架構，那幫助我們可以規劃出元件的設計。從圖我 們可以知道：

畫面的解析

1. 建立ToDoApp為Top-component：

• 包含一個title，可用<h2>來設計
• 包含Input及ToDoApp兩個套件

1. 建立Input元件，其中包含：

• 一個<input>輸入框
• 一個<button>送出事件

1. 建立ToDoList元件，內容包含：

• 多個<div>以顯示所有的代辦事項

動作的解析

• 在ToDoList我們透過Reducer做統一管理，其中：
• state: 存放待辦事項的紀錄，我們使用[Array]
• dispatch:新增、刪除...等存取待辦事項的動作
• 別忘了我們的React第三招，我們可以透過Context+Reducer讓我們可以輕鬆的讓各個元件，進行一致的操作。

上工囉～開始coding

建立title

建立reducers.js

• 這裡我們先加入ADD新增功能，之後再一點一滴地把其他功能補上

運用Context+Reducer

• 使用useReducer將剛剛建立的reducers連結起來，同時我們給予state初始值["Hello", "One", "Two"]，以利初步測試

加入 ToDoList.js

• 為了要顯示所有的代辦事項，這裡我們可以使用迭代的方式，將ContextStore傳遞過來的toDoList一個接一個顯示出來

• 別忘了回到ToDoApp.js將ToDoList加入喔

建立Input

• 建立Input.js
• 同時，別忘了在ToDoApp.js將Input加進來喔

小結

• 今天我們初步把ToDoApp的架構設定好，明天我們來將整個動作串起來，讓整個app更完整。
• 鐵人賽第16天，下半場的第一天，依舊滿懷熱情的往下個階段邁進，加油，繼續Rock~~~🤟🤟🤟

客倌的讚賞是我們進步的來源，點選下方的Claps儘管啪啪啪啪啪👏👏👏👏👏