React. Реакт. Тестовая задача 024. Создание компонента через React.createElement()

---

Преобразование HTML в JSX

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

function FlowerForm() {
  // 1. Создаём состояние
  const [flower, setFlower] = useState('');

  // 2. Обработчик изменения ввода
  const handleChange = (e) => {
    setFlower(e.target.value);
  };

  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      'div',
      { className: 'question' },
      React.createElement('label', { htmlFor: 'flower' }, 'Ваш любимый цветок: '),
      React.createElement('input', {
        type: 'text',
        id: 'flower',
        value: flower,
        onChange: handleChange
      })
    ),
    React.createElement(
      'p',
      null,
      'Ваш любимый цветок: ',
      React.createElement('span', { className: 'answer' }, flower)
    )
  );
}

// Если нужно отрендерить компонент
root.render(React.createElement(FlowerForm));

Преобразование HTML в JSX.

<div class="question">
  <label for="flower">Ваш любимый цветок: </label>
  <input type="text" id="flower" />
</div>
<p>Ваш любимый цветок: <span class="answer"></span></p> 

С учётом всех особенностей, которые вы изучили в этом уроке, получится такой код:

<>
  <div className="question">
    <label htmlFor="flower">Ваш любимый цветок: </label>
    <input type="text" id="flower" />
  </div>
  <p>Ваш любимый цветок: <span className="answer" /></p>
</> 

В некоторых компаниях верстальщик — это отдельная профессия и обычно он переводит макет в HTML-страницу. А вот HTML-страницу предстоит оживлять и переводить в JSX именно вам.

Некоторые IDE преобразовывают HTML в JSX автоматически (например, WebStorm). VS Code по умолчанию этого не делает, но можно установить плагин (например, HTML to JSX). Также существуют онлайн-конвертеры HTML в JSX (например, transform.tools).