Заметки про React(@ru_react_notes). Истоки JSX и почему он существует JSX – это JavaScript с синтаксическими приемами, облегчающими пр

Истоки JSX и почему он существует JSX – это JavaScript с синтаксическими приемами, облегчающими представление HTML. Это похоже на Sass, который транспилируется в CSS. Чтобы написать простой HTML код с помощью JS, потребуется много кода. Чтобы упростить написание HTML кода на JavaScript, появилась библиотека HyperScript:

const h = require("hyperscript");
document.body.appendChild(
 h("div", { id: "content" },
  h("div", { id: "child" },
   h("p", null, "text")
  )
 )
);

Но такой код сложно читать и понимать. Для решения данной проблемы появился JSX. Он позволяет писать код похожий на HTML и транспилируется в JS. Например:

const el = (
 <div id="content">
  <div id="child">
   <p>text</p>
  </div>
 </div>
);

// Транспилируется в следующий код:

const el = (React.createElement("div", { id: "content" },
 React.createElement("div", { id: "child" },
  React.createElement("p", null, "text"))));

Код похож на HyperScript, вместо h используется React.createElement. В TypeScript это можно изменить. Есть параметр jsxFactory, с помощью которого можно изменить JS функцию создания элемента. Например, можно использовать h из preact вместо React.createElement по умолчанию. dodov.dev/blog/or…t-exists