JSX

Введение в JSX

Если вы когда-либо реализовывали веб-приложение с фреймворком React.js, вы могли заметить, что синтаксис для написания компонентов React.js немного отличается от вашего другого кода Javascript. Компоненты React, хотя и в основном одинаковы, описываются с помощью специальных скобок, левой и правой угловых скобок. Они выглядят так же, как синтаксис XML, «расширяемого языка разметки». В React.js этот синтаксис также называется «JSX», что означает «Javascript XML».

Основная цель этого синтаксиса - упростить написание кода React. JSX-код не может быть интерпретирован JVM, поэтому он должен быть скомпилирован в настоящий код Javascript перед использованием - задача, обычно выполняемая такими сборщиками, как Babel или Webpack.

Код React, который вы, вероятно, никогда не писали

Фактически это означает, что вы, скорее всего, никогда не писали такие «настоящие» компоненты React.js, которые генерируются из вашего JSX-кода. Но не волнуйтесь, это легко сделать без особых хлопот. Фактически, вы даже можете написать полное веб-приложение на React, даже не используя JSX. Следующий фрагмент кода показывает, как выглядит настоящий компонент React.js только с Javascript.

// A common JSX-element.

<Header title="Lorem ipsum" variant="primary">
  I am a subtitle
</Header>

//
// ...
//

// After the compilation step:

React.createElement(
  Header,
  {title: 'Lorem ipsum', variant: "primary"},
  'I am a subtitle'
);

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

Использование JSX для упрощения кода

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

Еще одна замечательная характеристика JSX заключается в том, что он просто становится выражением после этапа компиляции. Поэтому вы можете использовать его в операторах if-else или даже сохранить его результат в переменной. А поскольку компоненты React.js могут содержать выражения как сами дочерние элементы, вы можете писать легко компонуемый код пользовательского интерфейса!

Импорт по умолчанию для каждого JSX-файла

Возможно, вы заметили, что каждый JSX-файл в различных руководствах, руководствах и, скорее всего, даже в вашем собственном коде имеет импорт по умолчанию из библиотеки React, даже если вы никогда не можете напрямую вызывать эту импортированную переменную. Причина в том, что после этапа компиляции каждое JSX-выражение становится вызовом React.createElement, как вы видели в примере кода ранее. Следовательно, необходимо, чтобы переменная React из импорта по умолчанию была включена в область каждого файла.

Похоже на HTML, но не

Одним из ключевых ограничений при кодировании с использованием JSX-синтаксиса является запись имени вашего компонента. Чтобы сборщик мог правильно идентифицировать ваши компоненты, они должны отличаться от стандартных HTML-тегов, так как синтаксис выглядит одинаково.

// 1. A valid example.
function Header(props){
  return (
    <div>
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
}

// 2. Invalid, only uppercase for React elements.
function header(props){
  return (
    // ...
  );
}

// 3. Invalid, only uppercase 
// when calling React components.
function Page(props){
  // Notice the invalid 'layout':
  return (
    <div style={{ margin: 12 }}>
      <layout>{/* ... */}</layout/>
    </div>
  );
}

Поэтому необходимо всегда кодировать элементы JSX в регистре предложений, что означает, что первая буква должна быть в верхнем регистре.

Вариант машинописного текста

Возможно, вы заметили, что многие проекты также используют TSX в качестве суффикса файлов для своих файлов компонентов React.js. Это просто расширение исходного JSX для совместимости с Typescript. TSX-файлы позволяют писать код Typescript вместе с компонентами JSX-нотации.

Только начало

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