React уже давно является популярной библиотекой JavaScript и, несомненно, является одной из самых популярных в мире. Кроме того, поскольку популярные фреймворки, такие как Next.js и Remix, построены на основе React, а также возможность разработки мобильных приложений с помощью React-Native, эта библиотека не исчезнет в ближайшее время. Проблема, однако, в том, что большинство новичков сбиваются в React и начинают его изучать, не понимая, как он работает. Итак, давайте углубимся.

Как работает JSX

В React JSX (JavaScript XML) — это синтаксис, похожий на HTML, но работающий в JavaScript. Сам по себе JavaScript недопустим, поэтому React использует транспилятор (обычно Babel) для преобразования JSX в стандартный JavaScript. Этот код JavaScript в конечном итоге интерпретирует браузер.

Когда вы пишете JSX, он преобразуется в вызовы функций React.createElement(). Эти вызовы функций создают элементы React, которые являются строительными блоками приложения React. Каждый элемент представляет собой часть пользовательского интерфейса.

Вот пример того, как это выглядит:

JSX в компоненте React

const element = (
  

    
Hello, React!
    
This is a paragraph.
  
);

JSX преобразован в JavaScript:

const element = React.createElement(
  'div',
  null,
  React.createElement('h1', null, 'Hello, React!'),
  React.createElement('p', null, 'This is a paragraph.')
);

React принимает эти вложенные вызовы React.createElement() и преобразует их в соответствующие элементы HTML в DOM браузера.

Заключение

JSX упрощает написание компонентов React, позволяя вам писать синтаксис, аналогичный HTML, но это всего лишь синтаксический сахар для вызовов React.createElement(), которые создают структуру вашего приложения с помощью JavaScript. Это то, что позволяет React эффективно управлять пользовательским интерфейсом с помощью механизма Virtual DOM.

Если вам понравилась эта статья, возможно, вам также понравится мой бесплатный информационный бюллетень, который я рассылаю каждую неделю таким же разработчикам, как и вы. Зарегистрироваться можно здесь.