Синтаксис React JSX VS createElement

Как разработчик React, вы, вероятно, используете JSX.

JSX – это расширение синтаксиса для JavaScript, позволяющее писать HTML-подобную разметку внутри файла JavaScript.

Знаете ли вы, что можно использовать React без JSX? Существует устаревший метод createElement. Это выглядит так:

React.createElement(type, props, …children)

Сравните следующие компоненты — один с createElement и один с JSX:

Компонент с createElement

function ComponentWithCreateElement() {
  const props = {
    style: { color: "red" },
    onClick: (e) => e.target.innerText = 'Clicked',
  };
  return React.createElement("div", null, [
    React.createElement("button", props, "Component with createElement"),
  ]);
}

Компонент с JSX

function ComponentWithJSX() {
  const style = { color: "green" };
  const handleClick = (e) => e.target.innerText = 'Clicked';
  return (
    <div>
      <button style={style} onClick={handleClick}>
        Component with JSX
      </button>
    </div>
  );
}

Заключение

В этой короткой статье сравниваются два разных подхода к созданию компонентов React.

Если вы нашли это полезным, пожалуйста, нажмите кнопку аплодисментов 👏. Кроме того, не стесняйтесь комментировать! Буду рад помочь :)