Введение в JSX: HTML, который поддерживает JavaScript

JSX — это способ написания HTML внутри JavaScript, но он больше похож на способ написания JavaScript внутри HTML. Как язык шаблонов, его любят одни и ненавидят другие. Вот как это работает и почему это важно.

Шаблонизация с помощью JSX

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

Не обращая внимания на споры по поводу JSX в принципе, можно сосредоточиться на вопросе о том, как его использовать. JSX является фактическим стандартом для реактивных шаблонизаторов и вдохновляет других, таких как Vue, Svelte и т. д. Вот как выглядит базовый JSX в приложении React (см. живую версию):

import React from 'react';
export function App(props) {
  return (
    <div className="App">
      <h1>Greetings from InfoWorld</h1>
      <h2>This is some JSX</h2>
    </div>
  );
}

Если вы посмотрите на все внутри <div>, вы увидите, что это всего лишь HTML. Однако он заключен в JavaScript. HTML — это возвращаемое значение для App function, которая является функциональным компонентом в React. Разметка JSX — это возвращаемое значение функции.

По сути, возвращаемое значение JSX сообщает механизму рендеринга React, каковы выходные данные компонента.

HTML внутри JavaScript

Когда-то было странно видеть встроенную в JavaScript разметку, но сейчас это стало обычным явлением. На самом деле очень удобно использовать разметку и JavaScript вместе. Допустим, мы хотим ввести в разметку переменную. Мы могли бы сделать это так (см. живую версию):

export function App(props) {
  let [name, setName] = React.useState("User");
  return (
    <div className="App">
      <h1>Greetings from InfoWorld</h1>
      <h2>Hello {name}</h2>
    </div>
  );
}

Теперь мы используем “name” переменная внутри JSX. name переменная создается с помощью React.useState ловушка, но это может быть любая переменная JavaScript, если она находится в области видимости. (При использовании функциональных компонентов useState Хук — правильный способ использования переменной в JSX.)

Фигурные скобки вокруг name в шаблоне JSX обозначаем a JSX-выражение. Они позволяют выполнять выражения JavaScript внутри разметки, а также обращаться к переменным. JavaScript выполняется в более широком контексте окружающего кода, поэтому вы можете ссылаться на переменные.

Теперь мы начинаем видеть ту мощь, которая сделала JSX таким успешным. Вы получаете все возможности JavaScript, импортированные библиотеки, такие как платформа React, и полный синтаксис HTML, который может ссылаться на эти функции.

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

Зацикливание

С JSX можно делать множество вещей, и одна из самых важных — циклы. Допустим, у нас есть множество пород собак, и теперь мы хотим их отобразить. Вот как мы это сделаем (см. живую версию):

<div className="App">
    <h1>Greetings from InfoWorld</h1>
    <h2></h2>
    <h3>{breeds.map((breed) => {
    return <li key={breed}>{breed}</li>;
  })}</h3>
</div>

Мы используем map функция для перебора пород и вывода разметки для каждой. В итоге мы получаем HTML/JSX внутри JavaScript, внутри HTML/JSX, внутри JavaScript!

Мы могли бы уменьшить объем кода, исключив оператор return, например:

<h3>{breeds.map((breed) => <li key={breed}>{breed}</li> )}</h3></code>

Имейте в виду, что вы можете использовать другие функциональные методы, такие как filter и reduce для вывода коллекций в виде циклов. Это дает вам некоторую мощь при работе с циклами. Вы также всегда можете перейти к JavaScript в самом компоненте, чтобы изменить переменные данных, а затем при необходимости предоставить их JSX. (Вы даже можете составить HTML-код внутри JavaScript и отобразить его непосредственно в JSX.)

Условные предложения

Другая ключевая возможность — работа с условным потоком управления, например if/then/else. Например, что если, просматривая породы собак, мы хотим проверить такое условие, как существование breedOrigin поле?

Основываясь на нашей настройке, мы могли бы сделать это (см. живую версию):

<h3>{breeds.map((breed) =>
  <li key={breed.name}>{
    breed.breedInfo ? breed.name + ": " + breed.breedInfo : breed.name}</li> )}</h3>

Здесь мы используем тернарный оператор (т. X ? Y : Z синтаксис, который гласит: если X, то Y, в противном случае Z). Обычно это используется для создания if/then/else решения внутри выражения JSX.

Другой способ условного рендеринга — использовать тестовый пример, который будет отображать разметку только в случае успешного прохождения теста. Например, если мы хотим отображать список только в том случае, если в массиве есть элементы (обычный сценарий при загрузке данных из удаленного API), мы могли бы сделать это (см. живую версию):

<div className="App">
      <h1>Greetings from InfoWorld</h1>
      <h2></h2>
      { breeds.length > 0 && <>
        <h3>{breeds.map((breed) => <li key={breed.name}>{breed.breedInfo ? breed.name + ": " + breed.breedInfo : breed.name}</li> )}</h3>
        </>
      }
    </div>

Если вы установите breeds переменная будет пустым массивом, JSX ничего не отобразит.

Фрагменты

Вы заметите пустые теги элементов: <> и </>. Это фрагменты React, поддерживаемые JSX. Мы могли бы использовать <div> но <> является более идиоматическим. Кроме того, фрагменты позволяют обертывать многие элементы в JSX без создания несемантического элемента-обертки.

События

Следующая важная возможность JSX, о которой нужно знать, — это обработка событий. Например, предположим, что мы хотим, чтобы пользователи могли щелкнуть породу и открыть страницу этой породы в Википедии. Вы можете сделать что-то вроде этого (см. живую версию):

let [breeds, setBreeds] = React.useState([
    {name:'Shih Tzu',breedInfo:'Pekanese and Lhasa Apso cross',link:'https://en.wikipedia.org/wiki/Shih_Tzu'},
    {name:'Labradoodle', link:'https://en.wikipedia.org/wiki/Labradoodle'},
    {name:'Vizla',breedInfo:'Hungarian breed'},
    {name:'Catahoula'}
  ]);
  const handleBreedClick = (wikiLink) => {
    window.open(wikiLink, '_blank');
  };
  return (
    <div className="App">
      <h1>Greetings from InfoWorld</h1>
      <h2></h2>
      { breeds.length > 0 && <>
        <h3>
          {breeds.map((breed) =>
            <li key={breed.name} onClick={() => handleBreedClick(breed.link)}>{breed.breedInfo ? breed.name + ": " + breed.breedInfo : breed.name}
            </li>
          )}
        </h3>
        </>
      }
    </div>
  );

Здесь мы определяем handleBreedClick функция реагирования на событие. Он просто открывает викиссылку в новом окне. Чтобы отправить событие, мы используем JSX onClick обработчик: onClick={() => handleBreedClick(breed.link)}. Вы заметите, что это похоже на обычный обработчик событий HTML, за исключением того, что он используется в верблюжьем случае (onClick) вместо всех строчных букв (onclick).

Вы также можете определить встроенные обработчики событий. Например, при нажатии откроется оповещение: <li onClick={() => { alert(breed.name)}} />.

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

Стиль

Элементы JSX также поддерживают стили CSS. Вы можете сделать это по ссылке или в строке, как в случае с событиями. Вот пример первого (см. живую версию):

const listItemStyle = {
    cursor: 'pointer',
    margin: '10px 0',
    padding: '5px',
    backgroundColor: '#f5f5f5',
    border: '1px solid #ccc',
    borderRadius: '5px',
  };
// … same
<li style={listItemStyle} ... </li>

Как и в случае с событиями, мы определяем переменную в JavaScript, а затем ссылаемся на нее в свойстве. В этом случае мы используем style свойство и предоставьте ему объект JavaScript. Ожидается, что объект будет набором значений ключей, где ключом является имя свойства CSS, а значением — строка значения CSS. В свойствах CSS используется верблюжий регистр вместо пунктирных имен, встречающихся в CSS. (Это делается для того, чтобы обойти ограничения именования JavaScript.) Итак, background-color становится backgroundColor.

Чтобы использовать встроенный стиль, вы используете формат двойной фигурной скобки, который выглядит странно, но по сути говорит: вот стиль и вот объект JavaScript, который его удовлетворяет (см. живую версию):

<li style={{backgroundColor:'#f5f5f5',padding:'5px'}} …>

Обработка ошибок

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

Заключение

Вы познакомились с основами JSX. Эти основы дают вам большую часть возможностей, необходимых для создания пользовательских интерфейсов. Прелесть JSX в том, что он просто расширяет две знакомые технологии — JavaScript и HTML — и объединяет их в единое целое. Вместе эти три инструмента обладают значительной синергией.

Как только вы поймете JSX, вы сможете легко перенести его на другие Reactive-фреймворки и их языки шаблонов, такие как Vue, Angular и Svelte. Всегда есть небольшие особенности, и JSX является полезной базой, к которой можно вернуться в сравнительном обучении и исследовании.