Рубрики
Без рубрики

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

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

  • Введение в JSX
  • Грунтовка JSX
  • Транспонирование JSX
  • JS в JSX
  • HTML в JSX
    • Вам нужно закрыть все теги
    • camelCase – это новый стандарт
    • класс становится именем класса
    • Атрибут стиля изменяет свою семантику
    • Формы
  • CSS в React
    • Почему это предпочтительнее простого CSS/SASS/МЕНЬШЕ?
    • Является ли это решением проблемы?
  • Формы в JSX
    • значение и значение по умолчанию
    • Более последовательный подход к изменениям
  • JSX автоматически убегает
  • Пустое пространство в JSX
    • Горизонтальное пустое пространство обрезается до 1
    • Вертикальное пустое пространство устранено
  • Добавление комментариев в JSX
  • Атрибуты распространения
  • Как выполнить цикл в JSX

Введение в JSX

JSX – это технология, которая была внедрена компанией React.

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

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

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

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

Грунтовка JSX

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

const element = 
Hello, world!

Это выглядит как странная смесь JavaScript и HTML, но на самом деле это все JavaScript.

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

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

const myId = 'test'
const element = 
Hello, world!

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

  • класс становится именем класса
  • ибо становится htmlДля

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

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

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

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

    
A title

    
A paragraph

  
,
  document.getElementById('myapp')
)

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

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

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

JS в JSX

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

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

const paragraph = 'A paragraph'
ReactDOM.render(
  

    
A title

    
{paragraph}

  
,
  document.getElementById('myapp')
)

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

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

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

HTML в JSX

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

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

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

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

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

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

  • при обмене => При обмене
  • онклик => Один клик
  • онсубмит => онСубмит

класс становится именем класса

Из-за того, что JSX – это JavaScript, а класс – зарезервированное слово, ты не можешь писать

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

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

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

Атрибут style в HTML позволяет указать встроенный стиль. В OSX он больше не принимает строку, а в СЛУЧАЯХ в React вы поймете, почему это очень удобное изменение.

Формы

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

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

CSS в React

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

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

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

var divStyle = {
  color: 'white'
}

ReactDOM.render(
Hello World!
, mountNode)

или

ReactDOM.render(
Hello World!
, mountNode)

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

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

Почему это предпочтительнее простого CSS/SASS/МЕНЬШЕ?

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

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

Является ли это решением проблемы?

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

  1. запись медиа-запросов
  2. анимации в стиле
  3. ссылочные псевдоклассы (например, :наведите курсор )
  4. ссылочные псевдоэлементы (например, ::первая буква )

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

Формы в JSX

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

значение и значение по умолчанию

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

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

Это помогает решить некоторые странные проблемы обычного поведения дом взаимодействие при осмотре при осмотре и вход.getAttribute (“значение”) возвращает одно текущее значение, а другое – исходное значение по умолчанию.

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

но вместо этого

Для выберите поля, вместо использования

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

Более последовательный подход к изменениям

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

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

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

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

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

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

Вы ожидаете, что будет напечатано следующее Авторское право 2020 :

{'© 2020'}

Но это не так, это печать © 2020 , потому что строка экранирована.

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

© 2020

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

{'\u00A9 2020'}

Пустое пространство в JSX

Для добавления пробелов в JSX существует 2 правила:

Горизонтальное пустое пространство обрезается до 1

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

Something       becomes               this

становится

Something becomes this

Вертикальное пустое пространство устранено


  Something
  becomes
  this

становится

Somethingbecomesthis

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


  Something
  {' '}becomes
  {' '}this

или путем встраивания строки в выражение пробела:


  Something
  {' becomes '}
  this

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

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


  {/* a comment */}
  {
    //another comment
  }

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

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

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

вы можете пройти

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

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

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

const elements = [] //..some array

const items = []

for (const [index, value] of elements.entries()) {
  items.push()
}

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

const elements = ['one', 'two', 'three'];

const items = []

for (const [index, value] of elements.entries()) {
  items.push(
  • {value}
    • )
}

return (
  
    
    {items}
  
    
)

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

    const elements = ['one', 'two', 'three'];
return (
  
      
    {elements.map((value, index) => {
      return 
    • {value}
      • 
    })}
  
    
)

    Оригинал: “https://flaviocopes.com/jsx/”

    Читайте ещё по теме: