React. Реакт. Тестовая задача 023. Преобразование HTML в JSX

---

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

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

  <script src="/js/react/react.development.js"></script>
  <script src="/js/react/react-dom.development.js"></script>
  <script src="/js/react/babel.min.js"></script>
  ...
  <script type="text/babel">
    const { useState, createElement } = React;
    const { createRoot } = ReactDOM;

    const root = ReactDOM.createRoot(document.getElementById('root'));

function App() {
  const [flower, setFlower] = useState('');

  return (
    <>
      <div className="question">
        <label htmlFor="flower">Ваш любимый цветок: </label>
        <input
          type="text"
          id="flower"
          value={flower}
          onChange={e => setFlower(e.target.value)}
        />
      </div>
      <p>Ваш любимый цветок: <span className="answer">{flower}</span></p>
    </>
  );
}

root.render(<App />);

Преобразование 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).