Почему JSX и React — две разные вещи

JSX — это расширение синтаксиса для JavaScript, позволяющее добавлять HTML-подобные элементы в код JavaScript. Это означает, что вы можете создавать HTML с помощью JavaScipt, который имеет синтаксис, очень похожий на HTML.

Теперь люди склонны путать React и JSX и думать, что JSX — это часть React.

JSX и React — это две разные вещи

Но вот в чем загвоздка: JSX — это расширение синтаксиса, а React — это библиотека для создания пользовательского интерфейса JavaScipt.

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

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

  1. Установите необходимые инструменты: на вашем компьютере должны быть установлены Node.js и npm (менеджер пакетов Node). Вам также потребуется установить транспилятор Babel, что можно сделать, запустив npm install @babel/core @babel/cli @babel/preset-react в командной строке.
  2. Создайте файл .babelrc: этот файл сообщает Babel, какие пресеты и плагины использовать при транспиляции вашего кода.
  3. Создайте файл JSX. Вы можете создать новый файл с расширением .jsx и написать в нем код JSX.
  4. Перенесите код JSX: используйте интерфейс командной строки Babel, чтобы преобразовать код JSX в обычный JavaScript. Выполните следующую команду в командной строке npx babel [file-name].jsx --out-file [file-name].js
  5. Включите перенесенный файл JavaScript в файл HTML. Вы можете включить перенесенный файл JavaScript в файл HTML с помощью тега script и запустить файл HTML в браузере, чтобы увидеть результаты своего кода JSX.

ПОДВАЛКА: важно отметить, что независимое использование JSX не будет иметь преимуществ виртуального DOM, обработки событий и других функций, которые предоставляет React. Если вы хотите использовать JSX независимо, вам нужно будет вручную обрабатывать обновления DOM и обрабатывать события самостоятельно.

React нужен JSX

Как мы видели, JSX можно использовать отдельно, но в случае React React нужен JSX для рендеринга пользовательского интерфейса, а React будет обрабатывать все остальные this (интерактивность для этого пользовательского интерфейса).

React использует функцию _jsx() (React.createElement)для преобразования JSX, который он использовал внутри своего компонента для преобразования кода в плоские объекты js.

Вот пример простого компонента JSX:

const element = <h1>Hello, world!</h1>;

Когда этот код JSX транспилируется, он преобразуется в следующий JavaScript (до React 17):

const element = React.createElement("h1", null, "Hello, world!");

Когда этот код JSX транспилируется, он преобразуется в следующий JavaScript (начиная с React 17):

import { jsx as _jsx } from "react/jsx-runtime";


const element = _jsx("h1", {
  children: "Hello, world!"
});

Заключение

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

В React JSX упрощает написание повторно используемых компонентов и встраивание выражений javascript для создания динамических и интерактивных пользовательских интерфейсов.

Спасибо, что прочитали эту статью, и я надеюсь, что она помогла вам понять, чем JSX отличается от React.

Подключите меня на LinkedIn — https://www.linkedin.com/in/vishav-ranta-964964194/