Чем JSX отличается от HTML и какие преимущества он предоставляет? Flashcards
Чем JSX отличается от HTML и какие преимущества он предоставляет?
JSX и HTML отличаются по своей интеграции и использованию в веб-разработке. HTML - это стандартный язык разметки для создания статических веб-страниц, в то время как JSX - это расширение синтаксиса для JavaScript, в основном используемое с React, позволяющее использовать HTML-подобный код в JavaScript. Кроме того, JSX использует camelCase для атрибутов и поддерживает встраивание выражений JavaScript непосредственно в разметку.
HTML - это язык разметки гипертекста, стандартный язык разметки документов, предназначенных для отображения и просмотра в Интернете в веб-браузере.
JSX (JavaScript + XML) - это расширение JavaScript, которое позволяет записывать HTML непосредственно в JavaScript, что дает несколько преимуществ, заключающихся в том, что ваш код становится более читабельным и используются все возможности JavaScript в HTML. JSX в некотором смысле почти похож на HTML, однако у него есть определенные заметные отличия, которые мы рассмотрим в следующем разделе. Поскольку JSX не является легитимным JS-кодом, он должен быть скомпилирован в JS с помощью такого инструмента, как Babel или подобного.
Отличие 1
HTML:
В HTML может быть возвращено несколько элементов.
Например:
<ul>
<li> неупорядоченный список
<ol>
<li> упорядоченный список</li>
<li> упорядоченный список </li>
</ol>
</li>
<li> неупорядоченный список </li>
<li> неупорядоченный список
<li>
</ul>
JSX:
Вложенный JSX должен возвращать один элемент, который мы будем называть родительским элементом, который обертывает все остальные уровни вложенных элементов:
<div>
<p>розовый</p>
<p>желтый</p>
<p>зеленый</p>
</div>
Без элемента-оболочки JSX не будет транспилироваться. В React мы можем отображать JSX непосредственно в HTML DOM, используя React rendering API, он же ReactDOM. Формула для рендеринга элементов React выглядит следующим образом:
ReactDOM.render(componentToRender, targetNode)
ReactDOM.render() должен вызываться после объявления элементов JSX.
Отличие 2
HTML:
Элементы HTML имеют атрибуты.
например, максимальная длина в <input></input>
JSX:
Элементы JSX имеют реквизиты.
например, максимальная длина в <input></input>
Отличие 3
HTML:
Нет необходимости использовать camelCase для атрибутов, идентификаторов и ссылок на события. Это полностью ваше решение использовать camelCase, нижний регистр или дефисы для их именования.
JSX:
Все атрибуты HTML и ссылки на события в JSX становятся camelCase, таким образом, событие onclick становится onClick, а onchange — onChange.
Отличие 4
HTML:
Атрибут class может использоваться для любого элемента HTML. Имя класса может использоваться CSS и JavaScript для выполнения определенных задач для элементов с указанным именем класса.
JSX:
Вы не можете использовать слово class для определения классов HTML, поскольку class является зарезервированным словом в JavaScript, вместо этого используйте — className.
Отличие 5
HTML:
В HTML почти все теги имеют открывающий и закрывающий тег, за исключением, вероятно, нескольких, таких как <br></br>
JSX:
Однако в JSX любой элемент может быть записан как самозакрывающийся тег, например: <div></div>
Пример:
const string = <img src={user.avatarUrl} />;
</li></li></ul>
