JSX против HTML

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

JSX означает JavaScript XML. JSX позволяет нам писать HTML в React. JSX — это особый диалект JavaScript. Это похоже на HTML, но это вовсе не HTML. Для рендеринга кода в браузерах мы пишем код JSX в наших компонентах React. Как и в случае с ES6, браузеры не понимают этот JSX, поэтому перед рендерингом кода в браузере JSX преобразуется в чистый код JavaScript через Babel. Вы можете увидеть, как конвертировать, на странице Babel — Try it out.

Вы можете задаться вопросом, когда JSX в конечном итоге преобразуется в Javascript, то зачем писать JSX вместо того, чтобы писать только JavaScript? Да, ты прав. Не обязательно писать JSX в ваших компонентах реакции, вместо этого вы можете написать код JavaScript, но по сравнению с JSX написание чистого JavaScript становится слишком сложным, когда код длинный, как показано на изображении ниже, т.е. почему в React рекомендуется использовать JSX. А также JSX очень идентичен HTML, поскольку его легко писать и понимать.

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

• Встроенный стиль CSS в JSX имеет другой синтаксис.
• Присвоение имени класса тегам HTML имеет другой синтаксис.
• JSX может ссылаться на переменные JavaScript

Давайте посмотрим на приведенный ниже код, это HTML, и мы собираемся преобразовать его в JSX.

<div>
 <label>Username:</label>
 <input class=”unameinput” type=”text” id=”uname” />
 <button style=”background-color:cyan;color:blue;”>Login</button>
</div>

Если мы вставим точно такой же код в наш файл index.js, как показано ниже:

Мы увидим ошибку, когда запустим его.

Как написать встроенный стиль CSS в JSX?

HTML →style="background-color:cyan;color:blue"

В JSX вместо того, чтобы заключать стиль в двойные кавычки, мы используем двойные фигурные скобки, то есть вместо стиля = «…» мы используем стиль = {{ … }}, внешняя фигурная скобка указывает, что мы собираемся поместить переменную JavaScript в этой и второй фигурных скобках указан объект JavaScript.

Второе изменение заключается в том, что если в имени свойства есть тире, мы должны удалить этот тире и изменить его на формат верблюжьего регистра, начиная с нижнего регистра, то есть вместо background-color мы используем backgroundColor.

Третье изменение заключается в том, что значение свойства будет заключено в виде строки в одинарные или двойные кавычки.

Четвертое изменение заключается в том, что различные свойства разделяются запятой вместо точки с запятой.

JSX →style={{backgroundColor:'cyan',color:'blue'}}

Окончательный код реакции после преобразования HTML в JSX:

После запуска приведенного выше кода мы увидим следующий вывод в браузере.

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

Как написать имя класса в JSX?

Приведенный выше код говорит о недопустимом свойстве DOM class. Вы имели в виду className?

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

HTML → class="unameinput"

JSX → className="unameinput"

После реализации этого изменения в нашем JSX,

Теперь ни на веб-странице, ни в консоли нет ни одной ошибки.

Ссылка на переменные JavaScript из JSX:

JSX может легко ссылаться на переменные JavaScript, то есть мы можем использовать переменные или функции JavaScript вместо обычного текста, помещая их в фигурные скобки, как я упоминал при изменении встроенных стилей, первые фигурные скобки указывают на переменную JavaScript. <button>{buttonName}</button> или <button>{getButtonName()}</button>.

Например, если мы хотим заменить текст кнопки на переменную JavaScript.

Если мы хотим заменить текст кнопки функцией JavaScript.

Вы можете поместить большинство типов переменных таким образом, включая строки, целые числа и даже массивы, но вы не можете поместить объект Javascript между фигурными скобками, как здесь. Вы не можете ссылаться на объект, но вы можете ссылаться на свойство объекта, например, если вы хотите сослаться на объект вместо обычного текста, используйте {objectName.propertyName}, как показано ниже.

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

Я попытался объяснить все, чтобы начать работу с React, написав JSX в ваших компонентах реакции. Теперь вы можете уверенно писать код JSX в своем приложении React. Надеюсь, это было полезно.

Чтение — это хорошо, а реализация — это здорово!