Что такое JSX?

JSX похож на HTML, но это не HTML. Это расширение синтаксиса для JavaScript, что означает, что оно компилируется в обычный код JavaScript с помощью транспилятора babel перед выполнением в браузере.

Он был разработан Facebook как способ упростить разработчикам создание пользовательских интерфейсов (UI) с использованием React, библиотеки JavaScript для создания пользовательских интерфейсов.

const element = (
 <h1 className='greeting'>
 Hello JSX
 </h1>
)

Приведенный выше JSX эквивалентен следующему коду JavaScript:

const element = React.createElement(
 'h1',
 { className: 'greeting' },
 'Hello JSX'}

Babel, который конвертирует наш JSX в React.createElement()

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

Встраивание выражения JavaScript в JSX

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

const name = 'Saqib';
const element = <h1>Hello, {name}</h1>;

Вы можете использовать любые допустимые выражения JavaScript внутри фигурных скобок в вашем коде JSX. Например, «1 + 3», «user.firstName» являются допустимыми выражениями javascript.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Mohammad',
  lastName: 'Saqib'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

Вот и все

Спасибо, что прочитали эту статью. Надеюсь, вам понравится. Вы можете связаться со мной в Твиттере