Where to Go Next

Where to Go Next — React Tutorial - HTML5ANDCSS3

function TodoApp() {
  const [items, setItems] = React.useState([{ id: 1, text: "Learn React", done: true }])
  const [draft, setDraft] = React.useState("")
  const remaining = items.filter((i) => !i.done).length

  function add(event) {
    event.preventDefault()
    if (!draft.trim()) return
    setItems((current) => [...current, { id: Date.now(), text: draft.trim(), done: false }])
    setDraft("")
  }

  const toggle = (id) =>
    setItems((current) => current.map((i) => (i.id === id ? { ...i, done: !i.done } : i)))

  return (
    <div style={{ maxWidth: 320 }}>
      <form onSubmit={add}>
        <input value={draft} onChange={(e) => setDraft(e.target.value)} placeholder="Add an item" />{" "}
        <button type="submit">Add</button>
      </form>

      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <label style={{ textDecoration: item.done ? "line-through" : "none" }}>
              <input type="checkbox" checked={item.done} onChange={() => toggle(item.id)} />{" "}
              {item.text}
            </label>
          </li>
        ))}
      </ul>

      <p>{remaining === 0 ? "All done" : `${remaining} remaining`}</p>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<TodoApp />)

What you have

Build something first

In rough order of usefulness

What you can safely ignore for now