Why React.js is overrated- codes

01-w-r-o.js

// Draft Service class
const services = {
  fetchTodos: () =>
    fetch("https://jsonplaceholder.typicode.com/todos/")
      .then((d) => d.json())
      .then((list) => list.slice(0, 5)), // Show last 5
  createTodo: (todo) =>
    fetch("https://jsonplaceholder.typicode.com/todos/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(todo)
    }).then((d) => d.json()),
  updateTodo: ({ id, ...updatedTodo }) =>
    fetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(updatedTodo)
    }).then((d) => d.json()),
  deleteTodo: (id) =>
    fetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json"
      }
    }).then((d) => d.json())
};
export default services;

02-w-r-o.js

import { useEffect, useState } from "react";
import services from "./todo.service";
import "./styles.css";
export default function App() {
  // Create states
  const [newItem, setNewItem] = useState("");
  const [todoList, setTodoList] = useState([]);
// Fetch todos for the first time
  useEffect(() => {
    services.fetchTodos().then((todos) => setTodoList(todos));
  }, []);
// APIs calls: Add todo
  const addToList = () => {
    services.createTodo({ title: newItem, completed: false }).then((todo) => {
      setTodoList([todo, ...todoList]);
      setNewItem("");
    });
  };
// APIs calls: Remove todo
  const removeFromList = (id) => {
    services.deleteTodo(id).then(() => {
      setTodoList(todoList.filter((item) => item.id !== id));
    });
  };
// APIs calls: Update todo
  const onUpdate = (todo, completed) => {
    services
      .updateTodo({
        ...todo,
        completed
      })
      .catch(() => {
        // Revert change
      });
  };
// bind events: onchange input
  const onChangeItem = (e) => {
    setNewItem(e.target.value);
  };
// bind events: onchecked input
  const onChecked = (todo, e) => {
    setTodoList(
      todoList.map((item) => {
        if (item.id === todo.id) {
          item.completed = e.target.checked;
        }
        return item;
      })
    );
    onUpdate(todo, e.target.checked);
  };
return (
    <div className="App">
      <input
        onChange={onChangeItem}
        value={newItem}
        type="text"
        placeholder="new todo item.."
      />
      <button onClick={addToList}>Add</button>
<br />
      {todoList.map((item, index) => {
        return (
          <div key={`${item.title}_${index}`}>
            <input
              onChange={(e) => onChecked(item, e)}
              checked={item.completed}
              type="checkbox"
            />
            <span className={item.completed ? "checked" : ""}>
              {item.title}
            </span>
            <span
              role="img"
              aria-label="close-btn"
              onClick={() => removeFromList(item.id)}
            >
              ❌
            </span>
            <br />
          </div>
        );
      })}
    </div>
  );
}

03-w-r-o.html

<div class="App">
<input bind:value={newItem} type="text" placeholder="new todo item..">
<button on:click={addToList}>Add</button>
<br/>
{#each todoList as item}
 <input
   bind:checked={item.completed} 
   on:click={(e) => onUpdate(item, e.target.checked)} 
   type="checkbox">
 <span class:checked={item.completed}>{item.title}</span>
 <span on:click={() => removeFromList(item.id)}>❌</span>
 <br/>
{/each} 
</div>

04-w-r-o.html

<script>
  import { onMount } from "svelte";
  import services from "./todo.service.js";
  let newItem = "";
  let todoList = [];
  onMount(() => {
    services.fetchTodos().then(todos => {
      todoList = todos;
    });
  });

  // APIs calls: Add todo
  const addToList = () => {
    services.createTodo({ title: newItem, completed: false }).then(todo => {
      todoList = [todo, ...todoList];
      newItem = "";
    });
  };

  // APIs calls: Remove todo
  const removeFromList = id => {
    services.deleteTodo(id).then(() => {
      todoList = todoList.filter(item => item.id !== id);
    });
  };

  // APIs calls: Update todo
  const onUpdate = (todo, completed) => {
    services
      .updateTodo({
        ...todo,
        completed
      })
      .catch(() => {
        // Revert change
      });
  };
</script>