Что предпочтительнее: JSX или HTML?

Давайте начнем с определения HTML и JSX.

HTML — это фантастика. Стандартным языком для документов, определяющих структуру веб-страницы, является язык гипертекстовой разметки (HTML). Он регулирует способ отображения материала в Интернете и задает структуру веб-страниц. То, что вы сейчас видите, — это HTML-код, который прочитал и обработал ваш браузер. HTML, однако, не является языком программирования.

JSX, с другой стороны, означает JavaScript Syntax Extension или, как некоторые предпочитают его называть, JavaScript XML.

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

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

Основные различия между HTML и JSX

Ниже перечислены некоторые различия между HTML и JSX:

1. В JSX вы должны возвращать один родительский элемент.
Одно из самых значительных различий между HTML и JSX заключается в том, что в JSX необходимо возвращать единственный родительский элемент, иначе код не скомпилируется. Многие разработчики используют <div> ...</div>, однако «фрагмент», < >...</>, является более удобным вариантом, который выбирают многие, поскольку он делает код более понятным. В HTML не обязательно возвращать один родительский элемент, поэтому вы можете делать все, что захотите.

Видно, что JSX не компилируется, поскольку в данном случае нет родительского элемента.

Поскольку в данном случае есть родительский элемент, JSX компилируется (фрагмент).

2. В JSX можно сразу использовать JS.

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

  export const Article() {
  return (
    <>
      <div>This is Khansa's Article</div>
      <div>Hello There!</div>
      <p> Add two values together, then multiply them. </p>
      Result: {100 + 20 * 2}
    </>
  );
}
Вход в полноэкранный режим Выйдите из полноэкранного режима

3. В JSX используются самозакрывающиеся теги.

В JSX теги могут самозакрываться. То есть, <div></div> может использоваться как <div/>, а <span></span> может использоваться как <span/>. Вы не хотите этого, но это возможно.

В HTML самозакрывающиеся теги могут закрываться без слэша перед угловой скобкой, поэтому <br /> может интерпретироваться как <br>. В JSX, однако, вы должны добавить косую черту. Это должно напомнить вам, что JSX сильно зависит от синтаксиса HTML 4.

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

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

4. Добавление стиля к элементу требует отдельного синтаксиса.

HTML → <div style='border: 1px solid black; width:'100px' height: '100px' '/>

JSX → <input style={{border: '1px solid black', width: '100px' height: '100px' }}/>
Вход в полноэкранный режим Выход из полноэкранного режима

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

Примечание: Вы должны избегать использования встроенного стиля в обычном HTML, если не хотите навредить SEO вашего сайта.

Наконец, заключение
Поскольку компонент JSX представляет собой HTML, вы можете объединить множество компонентов для создания более сложной HTML-страницы.
Тот факт, что JSX выглядит как HTML, не делает его менее HTML, на самом деле, вы все еще можете строить стандартные функции, передавая HTML-подобный синтаксис.

Подводя итог, можно сказать, что JSX — это не HTML и не шаблонизатор.

Вот и все!
Спасибо, что нашли время прочитать мою статью 🙂
До скорой встречи!

Оцените статью
Procodings.ru
Добавить комментарий