React or a site without a framework: when React pays off

import { useState } from 'react';

// React: the window state lives in the component; Esc and focus are up to you
export function Subscribe() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Subscribe</button>
      {open && (
        <div role="dialog" aria-modal="true" className="modal">
          <p>Leave your email — we write once a month.</p>
          <button onClick={() => setOpen(false)}>Close</button>
        </div>
      )}
    </>
  );
}

<!-- no framework: the browser handles Esc, focus and the backdrop itself -->
<button id="open">Subscribe</button>

<dialog id="subscribe">
  <p>Leave your email — we write once a month.</p>
  <form method="dialog"><button>Close</button></form>
</dialog>

<script>
  document.getElementById('open').addEventListener('click', () => {
    document.getElementById('subscribe').showModal();
  });
</script>

import { useState } from 'react';

const products = ['Oak table', 'Oak chair', 'Pine shelf', 'Walnut desk'];

// React: the list is built by JavaScript in the browser
export function Search() {
  const [query, setQuery] = useState('');
  const found = products.filter((p) => p.toLowerCase().includes(query.toLowerCase()));
  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search" />
      <ul>
        {found.map((p) => (
          <li key={p}>{p}</li>
        ))}
      </ul>
    </>
  );
}

<!-- the list comes from the server: search engines see it, JavaScript only hides -->
<input id="q" type="search" placeholder="Search">
<ul id="list">
  <li>Oak table</li>
  <li>Oak chair</li>
  <li>Pine shelf</li>
  <li>Walnut desk</li>
</ul>

<script>
  const items = [...document.querySelectorAll('#list li')];
  document.getElementById('q').addEventListener('input', (e) => {
    const q = e.target.value.toLowerCase();
    for (const li of items) li.hidden = !li.textContent.toLowerCase().includes(q);
  });
</script>

import { createRoot } from 'react-dom/client';
import { Calculator } from './Calculator';

// the page is plain server HTML; React lives in a single block
const mount = document.getElementById('calculator');
if (mount) {
  createRoot(mount).render(<Calculator rate={Number(mount.dataset.rate)} />);
}