reactapp2024.md

React в 2024 году

Рекомендуется ознакомиться с предыдущими заметками по React.

Интересный документальный фильм React.js. The Documentary об истории создания React от Honeypot.

Для генерации шаблона приложения рекомендуется использовать Vite (произносится как /veet/) - генератор и система сборки React-приложения. Основные преимущества использования инструмента:

• сервер разработки предоставляет огромное количество расширений, посредством использования native ES-модулей. Например - экстремально быстрый Hot Module Replacement (HMR)
• в качестве bundler-а используется Rollup, который обладает мощными инструментами оптимизации статических assets

Vite поддерживает генерацию не только React-приложений и содержит множество других шаблонов, включая: Vue, Svelte, Preact, и т.д.

Scaffolding - создание шаблонного приложения

При использовании npm команда выглядит так:

npm create vite@latest

После ответа на вопросы и переход в папку с созданным приложением следует выполнить команды:

npm install
npm run dev

Следует заметить, что скорость импорта зависимостей (npm install) и запуска сервера (npm run dev) феноменальные - работает действительно быстро. Шаблонное приложение содержит кнопку с счётчиком нажатий.

Актуальный синтаксис React - функциональные компоненты

Вот как определяется и изменяется состояние компонента:

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
    </>
  )
}

Функция useState() возвращает переменную-состояние count, котору можно использовать в рендеренге, а также функцию setCount(), которая используется для изменения состояния.

Server-side rendering (SSR)

Использовать как JSX, так и компонентную модель можно и на сервере.

Наиболее популярным инструментом является Next.js. Одно из различий в React.js и Next.js - разные библиотеки Routing-а.

Одна из наиболее сложных технических задач, стоящих перед разработчиками SSR-frameworks является способ рендеринга компонентов, в которых реализовано асинхронное поведение. Когда от браузера поступает запрос на загрузку страницы, SSR-framework должен вернуть статическую верстку. Однако, часть компонентов React формируют содержимое в асинхронном режиме. Таким образом, когда сервер вызывает функцию renderToString(), входящую в React Server API, асинхронные компоненты не могут вернуть статическую верстку, т.к. контент ещё не сформирован. Чтобы решить эту проблему, используются разные подходы, для обозначения которых может быть использован термин Universal data retrieval. Распространёнными являются подходы: Two-pass rendering и Async pages.

Two-pass rendering (или его более сложный вариант multi-pass rendering) на первом проходе получает от React часть верстки и массив Promises, выполняющие асинхронные действия для async-компонентов. На втором проходе, сервер дожидается завершения всех асинхронных операций и вызывает React, для того, чтобы он завершил построение статической верстки. Этот подход универсальный, но может достаточно сильно нагружать сервер.

Async pages - особый способ описания разметки.