JS и JSX — это одно и то же?

JavaScriptСерия#2

Простой ответ: нет.

Если это одно и то же, то зачем давать ему два разных имени.😅

Что такое JS?

JavaScript (JS) — это язык программирования, обычно используемый для разработки веб-приложений. Это универсальный язык с динамической типизацией, который работает на стороне клиента (в веб-браузерах) и на стороне сервера (с помощью таких платформ, как Node.js). JavaScript обеспечивает интерактивные и динамические функции на веб-страницах, позволяя разработчикам манипулировать и изменять контент, управлять взаимодействием с пользователем и взаимодействовать с серверами.

Что такое JSX?

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

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

Так что же это за путаница у новичков?

Однажды ко мне подошел студент и сказал: "Я вставил один и тот же код в JSX и JS, знаете ли, происходит одно и то же?"

JSX и JS (JavaScript) — это не одно и то же, хотя и имеют некоторые сходства. Вот основные отличия:

Синтаксис: JSX — это расширение синтаксиса для JavaScript, которое позволяет вам писать HTML-подобный код в JavaScript. Он представляет XML-подобные теги и атрибуты для создания элементов React. JS, с другой стороны, представляет собой простой код JavaScript без какого-либо специального синтаксиса или расширений.
Использование: JSX в основном используется в приложениях React для определения структуры и поведения компонентов пользовательского интерфейса. Это предпочтительный способ написания компонентов в React. JS, с другой стороны, может использоваться для различных целей в разработке JavaScript, таких как определение функций, переменных и логики.
Преобразование: код JSX необходимо преобразовать в обычный код JavaScript, прежде чем он сможет быть выполнен браузером или движком JavaScript. Это преобразование обычно выполняется с помощью инструмента сборки, такого как Babel. Код JS, с другой стороны, может выполняться непосредственно браузером или движком JavaScript без каких-либо преобразований.
Поддержка HTML-подобного синтаксиса: JSX позволяет использовать HTML-подобный синтаксис, включая теги, атрибуты и самозакрывающиеся теги, упрощая описание структуры и внешнего вида компонентов пользовательского интерфейса. JS не имеет встроенной поддержки HTML-подобного синтаксиса.

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

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

Вот пример, демонстрирующий разницу между компонентом React, написанным на JavaScript (JS) и JSX:

Компонент JavaScript (JS):

import React from 'react';

function Greeting(props) {
  return React.createElement('h1', null, 'Hello, ' + props.name);
}

export default Greeting;

Компонент JSX:

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Greeting;

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

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

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

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

Дополнительные знания №1

Файлы .js содержат код JavaScript, включая компоненты React, написанные с использованием чистого синтаксиса JavaScript. Они могут включать код JSX, но для этого требуется настройка системы сборки или использование транспилятора, такого как Babel, для преобразования JSX в JavaScript.

ExtraKnowledge#2 — Могут ли веб-браузеры читать JSX напрямую?

Веб-браузеры не могут читать JSX напрямую. Это связано с тем, что они созданы для чтения только обычных объектов JS, а JSX не является обычным объектом JavaScript.

Чтобы веб-браузеры могли читать файл JSX, файл необходимо преобразовать в обычный объект JavaScript. Для этого мы используем Babel.