Как разработчик 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.
Если вы нашли это полезным, пожалуйста, нажмите кнопку аплодисментов 👏. Кроме того, не стесняйтесь комментировать! Буду рад помочь :)