A simple ReactJS To-Do List app with functionality to add tasks, remove tasks, and reorder them.

App.tsx

import React, { useRef, useState, useReducer } from "react";

const todoReducer = (state, action) => {
  const { type, payload } = action;
  switch (action.type) {
    case "add":
      return [...state, { text: payload, completed: false }];
    case "toggle":
      state[payload].completed = !state[payload].completed;
      return [...state];
    case "remove":
      return state.filter((todo, i) => i != payload);
    case "move":
      state.splice(payload.to, 0, state.splice(payload.from, 1)[0]);
      return [...state];
  }
};

const App = () => {
  const [todos, dispatch] = useReducer(todoReducer, []);
  const [todoText, setTodoText] = useState();
  const [count, setCount] = useState(0);

  const handleClick = () => {
    dispatch({ type: "add", payload: todoText });
    setTodoText("");
  };

  return (
    <>
      <input value={todoText} onChange={(e) => setTodoText(e.target.value)} />
      <button className="btn" onClick={handleClick}>
        Add Item
      </button>
      <ul>
        {todos.map((todo, i) => {
          return (
            <li key={i}>
              {todo.text}{" "}
              <button onClick={() => dispatch({ type: "toggle", payload: i })}>
                {todo.completed ? "✅" : "⬜"}
              </button>
              <button onClick={() => dispatch({ type: "remove", payload: i })}>
                Remove
              </button>
              {i !== 0 && (
                <button
                  onClick={() =>
                    dispatch({ type: "move", payload: { from: i, to: i - 1 } })
                  }
                >
                  ⬆️
                </button>
              )}
              {todos.length - 1 !== i && (
                <button
                  onClick={() =>
                    dispatch({ type: "move", payload: { from: i, to: i + 1 } })
                  }
                >
                  ⬇️
                </button>
              )}
            </li>
          );
        })}
      </ul>
    </>
  );
};

export default App;