【React】初心者がTodoアプリ作成してみた

## はじめに

Reactのインプットの為にまず初めにTodoアプリを作成しました！
こちらの動画教材を参考にしました。↓↓↓

https://www.udemy.com/course/modern_javascipt_react_beginner/

こちらの動画では、Javascriptでまず初めにtodoアプリを作成し、次にReactを使ってtodoアプリを作成することで近代Javascriptの転換を体感することができました。
こちらではReactの内容のみ記述します。

## 作成したコンポーネント
<di>
<dt>Todo.jsx</dt>
<dd>各コンポーネントのまとめ役</dd>
<dt>InputTodo.jsx</dt>
<dd>項目を入力、追加する</dd>
<dt>IncompleteTodos.jsx</dt>
<dd>未完了のリストを記述(完了、削除ボタン）
<dt>CompleteTodos.jsx</dt>
<dd>完了のリストを記述（戻すボタン）</dd>
</di>

## Todo.jsx
各コンポーネントのまとめ役

```Todo.jsx
import { useState } from "react";
import { CompleteTodos } from "./components/CompleteTodos";
import { IncompleteTodos } from "./components/InconpleteTodos";
import { InputTodo } from "./components/InputTodo";
import "./styles.css";

export const Todo = () => {
  //Todo
  const [todoText, setTodoText] = useState("");
  //IncompleteTodos
  const [incompleteTodos, setIncompleteTodos] = useState([]);
  //CompleteTodos
  const [completeTodos, setCompleteTodos] = useState([]);
  //Todoの更新
  const onChangeTodoText = (event) => setTodoText(event.target.value);
  
//追加したTodoを未完了エリアに渡す
  const onClickAdd = () => {
    if (todoText === "") return;
    const newTodos = [...incompleteTodos, todoText];
    setIncompleteTodos(newTodos);
    setTodoText("");
  };
//Todoを削除する
  const onClickDelete = (index) => {
    const newTodos = [...incompleteTodos];
    newTodos.splice(index, 1);
    setIncompleteTodos(newTodos);
  };
//完了エリアに渡す
  const onClickComplete = (index) => {
    const newIncompleteTodos = [...incompleteTodos];
    newIncompleteTodos.splice(index, 1);

    const newInCompleteTodos = [...completeTodos, incompleteTodos[index]];
    setIncompleteTodos(newIncompleteTodos);
    setCompleteTodos(newInCompleteTodos);
  };

//完了から未完了に戻す
  const onClickBack = (index) => {
    const newCompleteTodos = [...completeTodos];
    newCompleteTodos.splice(index, 1);

    const newInCompleteTodos = [...incompleteTodos, completeTodos[index]];
    setCompleteTodos(newCompleteTodos);
    setIncompleteTodos(newInCompleteTodos);
  };

  const isMaxLimitIncompleteTodos = incompleteTodos.length >= 5;
  return (
    <>
//Todoの追加（追加窓、ボタン）
      <InputTodo
        todoText={todoText}
        onChange={onChangeTodoText}
        onClick={onClickAdd}
        disabled={isMaxLimitIncompleteTodos}
      />
 //追加できるTodoの個数を制限
      {isMaxLimitIncompleteTodos && (
        <p style={{ color: "red" }}>登録できるTODOは5個までだよ</p>
      )}

//未完成エリア（完了、削除）
      <IncompleteTodos
        todos={incompleteTodos}
        onClickComplete={onClickComplete}
        onClickDelete={onClickDelete}
      />
 //完了エリア（戻る）
      <CompleteTodos todos={completeTodos} onClickBack={onClickBack} />
    </>
  );
};

```
## InputTodo.jsx
項目を入力、追加する（Todo.jsxの子コンポーネント）
```inputTodo.jsx
//propsでTodoの内容が渡される
export const InputTodo = (props) => {
  const { todoText, onChange, onClick, disabled } = props;
  return (
    <div style={style}>
//追加したいTodoを入力
      <input
        disabled={disabled}
        placeholder="TODOを入力"
        value={todoText}
        onChange={onChange}
      />
 //Todoを追加     
      <button disabled={disabled} onClick={onClick}>
        追加
      </button>
    </div>
  );
};
```

## IncompleteTodos.jsx
未完了のリストを表示するコンポーネント
```IncompleteTodo.jsx
//propsでTodoの内容が渡される
export const IncompleteTodos = (props) => {
  const { todos, onClickComplete, onClickDelete } = props;
  return (
    <div className="incomplete-area">
      <p className="title">未完了のTODO</p>
      <ul>
        {todos.map((todo, index) => (
          <li key={todo}>
            <div className="list-row">
              <p className="todo-item">{todo}</p>
              
              //onClickを使って完了エリアに渡す
              <button onClick={() => onClickComplete(index)}>完了</button>
              //onClickを押すことで削除される
              <button onClick={() => onClickDelete(index)}>削除</button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

```

## CompleteTodos.jsx
完了のリストを記述するコンポーネント
```CompleteTodo.jsx
//propsでTodoの完了内容が渡される
export const CompleteTodos = (props) => {
  const { todos, onClickBack } = props;
  return (
    <div className="complete-area">
      <p className="title">完了のTODO</p>
      <ul>
        {todos.map((todo, index) => (
          <li key={todo}>
            <div className="list-row">
              <p className="todo-item">{todo}</p>
              <button onClick={() => onClickBack(index)}>戻す</button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

```

### 感想　
Reactの仕組みを理解するのに私の場合かなりの時間を費やしてしまいましたが、最初にTodoアプリを作成して全体像を掴めたので良かったです！