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

Почему разработчики предпочитают JSX?

Чтобы преобразовать статическое веб-приложение в динамическое, сделав его интерактивным для пользователя, разработчики полагаются на JavaScript как на основной язык. Такие методы, как createElement(), appendChild(), getElementById() и т. д., используются для редактирования DOM. Эти методы истощают энергию при разработке больших и сложных приложений. В таких ситуациях React с JSX предлагает оптимизированные решения. Ознакомьтесь с приведенным ниже синтаксисом, чтобы понять, как создать элемент в React с JSX и без него:

Создание элемента React с помощью createElement():

import React from "react"
import ReactDOM from "react-dom"

const Title= React.createElement('h1',{'class':'title'},'Hello World!')
ReactDOM.render(Title,document.getElementById('root'));

Создание элемента React с использованием JSX:

import React from "react"
import ReactDOM from "react-dom"

const Title= (<h1 className = 'title'>Hello</h1>);
ReactDOM.render(Title,document.getElementById('root'));

Когда файл JSX загружается, транскомпилятор BABEL преобразует синтаксис JSX в старый JavaScript для понимания браузером. Здесь JSX оказывается быстрее, поскольку выполняет оптимизацию при переводе на обычный JavaScript.

Плюсы создания React Elements с использованием JSX:

  1. JSX упрощает добавление/удаление/редактирование HTML в React.
  2. Будучи типобезопасным, ошибки подсвечиваются во время компиляции.
  3. Поскольку JSX является выражением, его можно использовать в операторах if-else, циклах, присваивать переменным и возвращать как функции.

Минусы создания React Elements с использованием JSX:

  1. Если HTML не закрыт/не написан правильно, выдается ошибка.
  2. JSX HTML должен быть заключен в элемент верхнего уровня, т. е. один элемент должен заключать в себе все остальные элементы, иначе он выдает ошибку.

С этими функциями и более чем 202 тысячами звезд в React Github Repository сообщество вокруг него обязательно будет расти, как и использование JSX.