Начало работы с JSX

JSX - это технология, представленная React. Давайте погрузимся в это

Введение в JSX

JSX - это технология, представленная React.

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

Сначала вы могли подумать, что использование JSX похоже на смешивание HTML иJavaScript(и, как вы увидите, CSS).

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

И вы описываете этот пользовательский интерфейс, не используя строки, а вместо этого используя JavaScript, который позволяет вам делать много хороших вещей.

Праймер JSX

Вот как вы определяете тег h1, содержащий строку:

const element = <h1>Hello, world!</h1>

Это похоже на странную смесь JavaScript и HTML, но на самом деле это все JavaScript.

То, что выглядит как HTML, на самом деле является синтаксическим сахаром для определения компонентов и их расположения внутри разметки.

Внутри выражения JSX можно очень легко вставить атрибуты:

const myId = 'test'
const element = <h1 id={myId}>Hello, world!</h1>

Вам просто нужно обратить внимание, когда у атрибута есть тире (-), который вместо этого преобразуется в синтаксис camelCase, и эти 2 особых случая:

classстановитсяclassName
forстановитсяhtmlFor

потому что это зарезервированные слова в JavaScript.

Вот фрагмент JSX, который объединяет два компонента вdivтег:

<div>
  <BlogPostsList />
  <Sidebar />
</div>

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

Обратите внимание, как я обернул 2 компонента вdiv. Почему? Потому чтофункция render () может возвращать только один узел, поэтому, если вы хотите вернуть двух братьев и сестер, просто добавьте родителя. Это может быть любой тег, а не толькоdiv.

Транспортировка JSX

Браузер не может выполнять файлы JavaScript, содержащие код JSX. Их нужно сначала преобразовать в обычный JS.

Как? Выполняя процесс под названиемтранспиляция.

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

Например, следующие две конструкции эквивалентны:

Обычный JS

ReactDOM.render(
  React.createElement('div', { id: 'test' },
    React.createElement('h1', null, 'A title'),
    React.createElement('p', null, 'A paragraph')
  ),
  document.getElementById('myapp')
)

JSX

ReactDOM.render(
  <div id="test">
    <h1>A title</h1>
    <p>A paragraph</p>
  </div>,
  document.getElementById('myapp')
)

Этот очень простой пример является лишь отправной точкой, но вы уже можете видеть, насколько сложнее простой синтаксис JS по сравнению с использованием JSX.

На момент написания статьи самый популярный способ выполнениятранспиляцияиспользоватьВавилон, который является параметром по умолчанию при запускеcreate-react-app, так что если вы его используете, вам не о чем беспокоиться, все происходит за вас.

Если вы не используетеcreate-react-appвам нужно настроить Babel самостоятельно.

JS в JSX

JSX принимает любой смешанный JavaScript.

Всякий раз, когда вам нужно добавить JS, просто вставьте его в фигурные скобки.{}. Например, вот как использовать постоянное значение, определенное в другом месте:

const paragraph = 'A paragraph'
ReactDOM.render(
  <div id="test">
    <h1>A title</h1>
    <p>{paragraph}</p>
  </div>,
  document.getElementById('myapp')
)

Это простой пример. Фигурные скобки принимаютлюбойКод JS:

const paragraph = 'A paragraph'
ReactDOM.render(
  <table>
    {rows.map((row, i) => {
      return <tr>{row.text}</tr>
    })}
  </table>,
  document.getElementById('myapp')
)

Как вы видетемы вложили JavaScript в JSX, определенный внутри JavaScript, вложенный в JSX. Вы можете пойти настолько глубоко, насколько захотите.

HTML в JSX

JSX очень похож на HTML, но на самом деле это синтаксис XML.

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

Вам нужно закрыть все теги

Как и в XHTML, если вы когда-либо использовали его, вам нужно закрыть все теги: не более<br>но вместо этого используйте самозакрывающийся тег:<br />(то же самое и с другими тегами)

camelCase - это новый стандарт

В HTML вы найдете атрибуты без регистра (например,onchange). В JSX они переименованы в их эквивалент camelCase:

onchange=>onChange
onclick=>onClick
onsubmit=>onSubmit

`class`становится`className`

В связи с тем, что JSX - это JavaScript, иclassэто зарезервированное слово, вы не можете писать

<p class="description">

но вам нужно использовать

<p className="description">

То же самое относится кforкоторый переведен наhtmlFor.

Атрибут стиля меняет свою семантику

ВstyleАтрибут в HTML позволяет указать встроенный стиль. В JSX он больше не принимает строку, а вCSS в Reactвы поймете, почему это очень удобное изменение.

Формы

В JSX изменено определение полей формы и события для большей согласованности и полезности.

Формы в JSXболее подробно рассматривается в формах.

CSS в React

JSX предоставляет отличный способ определения CSS.

Если у вас есть небольшой опыт работы со встроенными стилями HTML, на первый взгляд вы обнаружите, что вас отодвинули на 10 или 15 лет назад, в мир, где встроенный CSS был совершенно нормальным (в настоящее время он демонизируется и обычно является просто «быстрым исправлением»). решение).

Стиль JSX - это не одно и то же: во-первых, вместо того, чтобы принимать строку, содержащую свойства CSS, JSXstyleатрибут принимает только объект. Это означает, что вы определяете свойства в объекте:

var divStyle = {
  color: 'white'
}
ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode)

или же

ReactDOM.render(<div style={{ color: 'white' }}>Hello World!</div>, mountNode)

Значения CSS, которые вы пишете в JSX, немного отличаются от обычного CSS:

имена свойств ключей имеют верблюжий регистр
значения - это просто строки
вы разделяете каждый кортеж запятой

Почему это предпочтительнее простого CSS / SASS / LESS?

CSS - этонерешенная проблема. С момента его создания десятки инструментов вокруг него поднимались, а затем опускались. Основная проблема с CSS заключается в том, что здесь нет области видимости, и легко написать CSS, который никоим образом не применяется, поэтому «быстрое исправление» может повлиять на элементы, которые нельзя трогать.

JSX позволяет компонентам (например, определенным в React) полностью инкапсулировать свой стиль.

Это подходящее решение?

Встроенные стили в JSX хороши, пока вам не понадобится

писать медиа-запросы
стиль анимации
ссылочные псевдоклассы (например,:hover)
ссылочные псевдоэлементы (например,::first-letter)

Короче говоря, они охватывают основы, но это не окончательное решение.

Формы в JSX

JSX вносит некоторые изменения в работу HTML-форм, чтобы упростить работу разработчика.

`value`и`defaultValue`

Вvalueатрибут всегда содержит текущее значение поля.

ВdefaultValueАтрибут содержит значение по умолчанию, которое было установлено при создании поля.

Это помогает решить странное поведение обычныхДОМвзаимодействие при осмотреinput.valueиinput.getAttribute('value')возвращает одно текущее значение и одно исходное значение по умолчанию.

Это также относится кtextareaполе, например

<textarea>Some text</textarea>

но вместо

<textarea defaultValue={'Some text'} />

Заselectполя вместо использования

<select>
  <option value="x" selected>
    ...
  </option>
</select>

использовать

<select defaultValue="x">
  <option value="x">...</option>
</select>

Более последовательный onChange

Передача функции вonChangeатрибут вы можете подписаться на события в полях формы.

Он работает стабильно в разных областях, дажеradio,selectиcheckboxполя ввода запускаютonChangeмероприятие.

onChangeтакже срабатывает при вводе символа вinputили жеtextareaполе.

JSX автоматически сбегает

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

Это означает, что вы можете столкнуться с проблемами при использовании объекта HTML в строковом выражении.

<p>{'&copy; 2020'}</p>

Чтобы исправить это, вы можете переместить объекты за пределы выражения:

<p>&copy; 2020</p>

или используя константу, которая печатает представление Unicode, соответствующее объекту HTML, который вам нужно распечатать:

<p>{'\u00A9 2020'}</p>

Пробел в JSX

Чтобы добавить пробел в JSX, есть 2 правила:

Horizontal white space is trimmed to 1

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

<p>Something       becomes               this</p>

становится

<p>Something becomes this</p>

Устранены вертикальные пробелы

<p>
  Something
  becomes
  this
</p>

становится

<p>Somethingbecomesthis</p>

Чтобы решить эту проблему, вам нужно явно добавить пробел, добавив такое выражение для пробела:

<p>
  Something
  {' '}becomes
  {' '}this
</p>

или вставив строку в пробел:

<p>
  Something
  {' becomes '}
  this
</p>

Добавление комментариев в JSX

Вы можете добавлять комментарии к JSX, используя обычные комментарии JavaScript внутри выражения:

<p>
  {/* a comment */}
  {
    //another comment
  }
</p>

Атрибуты распространения

В JSX обычной операцией является присвоение значений атрибутам.

Вместо того, чтобы делать это вручную, например

<div>
  <BlogPost title={data.title} date={data.date} />
</div>

ты можешь пройти

<div>
  <BlogPost {...data} />
</div>

и свойстваdataобъект будет использоваться как атрибут автоматически, благодаря ES6оператор распространения.

Как выполнить цикл в JSX

Если у вас есть набор элементов, которые необходимо выполнить в цикле для генерации партиала JSX, вы можете создать цикл, а затем добавить JSX в массив:

const elements = [] //..some array

const items = []
for (const [index, value] of elements.entries()) {
items.push(<Element key={index} />)
}

Теперь при рендеринге JSX вы можете встроитьitemsмассив, заключив его в фигурные скобки:

const elements = ['one', 'two', 'three'];
const items = []
for (const [index, value] of elements.entries()) {
items.push(<li key={index}>{value}</li>)
}
return (
<div>
{items}
</div>
)

Вы можете сделать то же самое прямо в JSX, используяmapвместо цикла for:

const elements = ['one', 'two', 'three'];
return (
  <ul>
    {elements.map((value, index) => {
      return <li key={index}>{value}</li>
    })}
  </ul>
)

Скачать мою бесплатнуюСправочник по React