# Todo-List By React (一) 增加 todo
**[Todo-List By React (一) 增加 todo](https://hackmd.io/@AlbusFu/rkjlmMDWj)**
[Todo-List By React (二) sort important](https://hackmd.io/9l5glQL5Sey2i16Qw9RcBA)
[Todo-List By React (三) router and decoration](https://hackmd.io/Cf0LAxJUQRiybV-eh6ucWw)

參考[前端修練精神時光屋 2018 - 第一週 - todolist](https://hexschool.github.io/THE_F2E_Design/todolist/)的版型，可以點進去看看設計稿

以最小產品原則，先把功能刪刪刪......
第一個版本長這樣

主架構大概長這樣

// src/index.jsx
const App = () => {
    <div>
        <Nav />
        <Add />
        <TodoList />
    <div/>
}

Nav 是擺好看，目前不動它

Add 元件會有個判別

if(active){
    return <Form />
}else {
    return <button>+ Add<button/>
}

Add 裡的 Form 元件目前架構是

<div>
    <div>
        <input type='text' name='title'/>
    <div/>
    <div>
        <button>X cancel<button/>
        <button>+ Add todo<button/>
    <div/>
<div/>

TodoList 元件之後可以切換成複雜格式的修改，目前只有放產生出來的 Todo 陣列

return {
    todoList.map(todo => <Todo todo={todo} />)
}

TodoList 裡的 Todo 元件，能直接修改 todoList 裡的資料

<div>
    <input 
        type='text'
        value={temptTodo.title}
        onChange={() => {setTemptTodo(temptTodo.title = input.value)}}
        onBlur={() => {
            if(todoList.todo.id === temptTodo.id){
                replace old todo with new todo
            }
            setTodoList(newTodoList)
        }}
<div/>

資料管理的部分暫時先用 useState(之後格式複雜，會使用 [useReducer](https://zh-hant.reactjs.org/docs/hooks-reference.html#usereducer))，並且用 [useContext](https://zh-hant.reactjs.org/docs/hooks-reference.html#usecontext) 做傳遞。

目錄架構

C:.
├─dist
├─src
│  └─components
│  　  ├─AddTask
│  　  ├─Form
│  　  ├─Todo
│  　  └─TodoList
└─index.jsx

[GitHub version-1 程式碼](https://github.com/GeminiFu/todo-list-2/tree/master/version/version1/src)

[GitHub最新進度](https://geminifu.github.io/todo-list-2/dist/index.html)
<iframe src="https://geminifu.github.io/todo-list-2/dist/index.html" width="650px" height="600px"></iframe>

參考範本：
[前端修練精神時光屋 2018 - 第一週 - todolist](https://challenge.thef2e.com/news/1)

參考文件：
[React 官方 Hook API 參考](https://zh-hant.reactjs.org/docs/hooks-reference.htm)
Hannah Lin 的文章 [[React Hook 筆記] useContext](https://medium.com/hannah-lin/react-hook-%E7%AD%86%E8%A8%98-usecontext-4bc289976847)、[[React Hook 筆記] useReducer 真的能完全取代 Redux 嗎?](https://medium.com/hannah-lin/react-hook-%E7%AD%86%E8%A8%98-usereducer-%E7%9C%9F%E7%9A%84%E8%83%BD%E5%AE%8C%E5%85%A8%E5%8F%96%E4%BB%A3-redux-%E5%97%8E-fabcc1e9b400)