JSX - расширение языка JavaScript, которое позволяет разработчикам описывать пользовательские интерфейсы в виде компонентов и включать в них логику и данные.

JSX производит «элементы» React.

const name = "Иван-Царевич"
const element = <h1>Здравствуй, {name}!</h1>

JSX не является обязательным для работы с React. React можно использовать без JSX.

Например, вот код с JSX:

class Hello extends React.Component {
  render() {
    return <div>Привет, {this.props.toWhat}</div>
  }
}
 
const root = ReactDOM.createRoot(document.getElementById("root"))
 
root.render(<Hello toWhat="Мир" />)

Он может быть превращён в код без JSX:

class Hello extends React.Component {
  render() {
    return React.createElement("div", null, `Привет, ${this.props.toWhat}`)
  }
}
 
const root = ReactDOM.createRoot(document.getElementById("root"))
 
root.render(React.createElement(Hello, { toWhat: "Мир" }, null))

Таким образом, JSX-элемент — это просто синтаксический сахар для вызова React.createElement(component, props, ...children). Так что всё, что вы можете сделать при помощи JSX, может быть сделано на чистом JavaScript.

Основная цель компиляции JSX в JS заключается в том, чтобы браузер или среда выполнения runtime JavaScript могла понять и выполнить JSX-код. В результате компиляции JSX преобразуется в вызовы функций React, которые создают React элементы. Эти элементы затем могут быть обработаны для обновления реального DOM или других операций, связанных с компонентами.

Компиляция JSX в JS обычно выполняется с использованием инструментов, таких как Babel или TypeScript, которые могут быть настроены для автоматической компиляции JSX-кода в стандартный JavaScript во время сборки проекта или во время разработки при помощи средств разработки, таких как Webpack или Create React App.

JSX существовал до React, он не был бы настолько популярен. Мы можем использовать JSX без React.

Назад