React или сайт без фреймворка: когда React оправдан

import { useState } from 'react';

// React: состояние окна живёт в компоненте, а Esc и фокус — ваша забота
export function Подписаться() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Подписаться</button>
      {open && (
        <div role="dialog" aria-modal="true" className="modal">
          <p>Оставьте почту — пишем раз в месяц.</p>
          <button onClick={() => setOpen(false)}>Закрыть</button>
        </div>
      )}
    </>
  );
}

<!-- без фреймворка: Esc, фокус и затемнение фона браузер берёт на себя -->
<button id="open">Подписаться</button>

<dialog id="subscribe">
  <p>Оставьте почту — пишем раз в месяц.</p>
  <form method="dialog"><button>Закрыть</button></form>
</dialog>

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

import { useState } from 'react';

const products = ['Дубовый стол', 'Дубовый стул', 'Сосновая полка', 'Ореховый стол'];

// React: список строит JavaScript в браузере
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="Поиск" />
      <ul>
        {found.map((p) => (
          <li key={p}>{p}</li>
        ))}
      </ul>
    </>
  );
}

<!-- список приходит с сервера: его видят поисковики, а JavaScript только скрывает лишнее -->
<input id="q" type="search" placeholder="Поиск">
<ul id="list">
  <li>Дубовый стол</li>
  <li>Дубовый стул</li>
  <li>Сосновая полка</li>
  <li>Ореховый стол</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';

// страница — обычный серверный HTML, а React живёт в одном блоке
const mount = document.getElementById('calculator');
if (mount) {
  createRoot(mount).render(<Calculator rate={Number(mount.dataset.rate)} />);
}