Dear Vue.js: it's not you, it's me: I'm too good for you.

src/frontend/components/App.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { BrowserRouter as Router, Link, Route, Switch } from "react-router-dom";
+import TaskList from "./TaskList";
+
+export default () => <Router>
+  <div>
+    <nav>
+      <ul>
+        <li><a href="/auth">Login</a></li>
+        <li><Link to="/about">About</Link></li>
+        <li><Link to="/">Tasks</Link></li>
+      </ul>
+    </nav>
+
+    <Switch>
+      <Route path="/about">
+        About things, yay!
+      </Route>
+      <Route path="/">
+        <TaskList/>
+      </Route>
+    </Switch>
+  </div>
+</Router>
+

src/frontend/components/TaskList.tsx

@@ -0,0 +1,36 @@
+import { AppState } from "@kredens/frontend/store";
+import { deleteTask, scheduleTask } from "@kredens/frontend/store/tasks/actions";
+import { Task, TaskScheduleType } from "@kredens/frontend/store/tasks/types";
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+export default () => {
+  const [taskName, setTaskName] = useState("");
+  const tasks = useSelector<AppState, { [key: string]: Task }>(state => state.tasks.items);
+  const dispatch = useDispatch();
+
+  const onTaskAddClick = () => {
+    dispatch(scheduleTask(Math.random().toString(36), {
+      name: taskName,
+      schedule: { type: TaskScheduleType.Plain }
+    }))
+  };
+
+  const onTaskDeleteClick = (id: string) => {
+    dispatch(deleteTask(id))
+  };
+
+  return (
+    <>
+      <ul>
+        {
+          Object.entries(tasks).map(([id, task]) => (
+            <li key={id}>{task.name} <button onClick={() => onTaskDeleteClick(id)}>Delete</button></li>
+          ))
+        }
+      </ul>
+      <input value={taskName} onChange={ev => setTaskName(ev.target.value)} />
+      <button onClick={onTaskAddClick}>Add!</button>
+    </>
+  );
+}