Frontend | Вопросы собесов on Telegram: “🤔 Чем html отличается от jsx? HTML и JSX имеют…”

🤔 Чем html отличается от jsx?

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

🚩HTML

Это стандартный язык разметки для создания веб-страниц. Он используется для определения структуры и содержания веб-страницы. HTML состоит из элементов, заключенных в теги, которые определяют различные части веб-страницы, такие как заголовки, абзацы, списки, ссылки, изображения и другие элементы.

<!DOCTYPE html>
<html>
<head>
  <title>Пример HTML</title>
</head>
<body>
  <h1>Заголовок</h1>
  <p>Это абзац.</p>
</body>
</html>

🚩JSX

Это синтаксическое расширение для JavaScript, которое используется в React для описания того, как пользовательский интерфейс должен выглядеть. JSX позволяет писать HTML-подобный код внутри JavaScript, который затем транспилируется в вызовы JavaScript-функций. Этот код выглядит как HTML, но на самом деле он является JavaScript-кодом, который будет компилироваться в вызовы React.createElement.

const element = (
  <div>
    <h1>Заголовок</h1>
    <p>Это абзац.</p>
  </div>
);

🚩Ключевые отличия

🟠Синтаксис и семантика
HTML использует стандартные HTML-теги и атрибуты. JSX использует JavaScript-выражения внутри фигурных скобок {}, и некоторые атрибуты имеют другие названия (например, className вместо class, htmlFor вместо for).
🟠Логика и данные
В HTML нельзя напрямую писать JavaScript-код, можно лишь использовать его через теги <script>. В JSX можно использовать любые JavaScript-выражения, что позволяет динамически формировать разметку.
🟠Транспиляция
HTML непосредственно интерпретируется браузером. JSX нужно транспилировать (с помощью Babel или другого транспилера) в обычный JavaScript, чтобы браузер мог его понять.
🟠Расширенные возможности
HTML не поддерживает логику напрямую, все изменения в DOM происходят через JavaScript. JSX позволяет интегрировать логику непосредственно в разметку, что делает код более декларативным и удобным для работы в рамках React.

Пример использования динамического контента

const name = "Мир";
const element = <h1>Привет, {name}!</h1>;

Этот JSX-код будет транспилирован

const element = React.createElement('h1', null, 'Привет, ', name, '!');

Ставь 👍 и забирай 📚 Базу знаний