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> );
Вот и все
Спасибо, что прочитали эту статью. Надеюсь, вам понравится. Вы можете связаться со мной в Твиттере