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

はじめに

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

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

作成したコンポーネント

Todo.jsx

各コンポーネントのまとめ役

InputTodo.jsx

項目を入力、追加する

IncompleteTodos.jsx

未完了のリストを記述(完了、削除ボタン）

CompleteTodos.jsx

完了のリストを記述（戻すボタン）

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アプリを作成して全体像を掴めたので良かったです！