React. Реакт. Тестовая задача 002. Текущее время

---

Этот код выведет текущее время.

Разберёмся, что здесь происходит:

Теперь раз в секунду будет вызываться функция timer. Её задача — рендерить DOM-дерево из нескольких узлов. Кажется, будто все элементы дерева будут отрендерены заново, раз в секунду, но это не так.

...

Вот что происходит на самом деле:

Обновляется только элемент h2, который содержит в себе new Date().toLocaleTimeString().

Остальные элементы дерева не перерисовываются.

Чтобы разобраться, почему так происходит, познакомимся с виртуальным DOM.

Виртуальный DOM

Элемент в React - это простой объект. Так выглядит дерево элементов в React:

React.createElement(
  'section',
  null,
  [
    React.createElement(
      'div',
      null,
      [
        React.createElement('h1', null, 'Заголовок'),
        React.createElement('h2', null, 'Подзаголовок'),
      ],
    ),
    React.createElement(
      'div',
      null,
      React.createElement('p', null, 'Параграф'),
    ),
  ],
);

Шпаргалка пошаговая, что и как надо делать для работы правильного кода React

Здесь имеется ввиду, что мы используем НЕ node.js, а какой-то обычный простой сервер, например, Apachе или python -m http.server 8000

1. Подключите к файлу HTML React и ReactDOM (если используете CDN)

  <script src="/js/react/react.development.js"></script>
  <script src="/js/react/react-dom.development.js"></script>

2. Деструктурируйте нужные функции

const { useState, createElement } = React;
const { createRoot } = ReactDOM;

Пояснение.

{ useState, createElement } - синтаксис деструктуризации. Он говорит:

"Возьми свойства useState и createElement из объекта справа (React) и создай локальные переменные с такими же именами".

const - объявление констант. После этого:

useState становится локальной ссылкой на React.useState;

createElement - локальной ссылкой на React.createElement.

3. Создавайте элементы правильно

  const element = React.createElement(
    'div',
    null,
    React.createElement('h1', null, 'Текущее время:'),
    React.createElement('h2', null, new Date().toLocaleTimeString()),
  );

4. Рендерите в DOM

const root = createRoot(document.getElementById('root'));
...
root.render(element);