Javascript XML…

JSX - это сокращение от JavaScript XML, и это расширение синтаксиса JavaScript, созданное Facebook при рождении ее библиотеки JavaScript, React. JSX позволяет комбинировать простой Javascript и язык гипертекстовой разметки (HTML) в одном файле. JSX, используемый в React, создает React Elements.

Почему React использует JSX?

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

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

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

Использование JSX в React

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

Использование выражения JavaScript

Способ написания выражений JSX делает его уникальным. Чтобы написать выражение JavaScript, например User.lastName, User.firstName и т. Д., В JavaScript, оно должно быть встроено / заключено в фигурные скобки, {}. Это сообщает компилятору, что это выражение JavaScript.

JSX - это выражение

Выражения JSX могут быть написаны везде, где может поместиться код JavaScript, например, в рамках оператора If, циклов, обратных вызовов, блоков и т. д.

Выражения Jsx следует заключать в квадратные скобки «( )» по соглашению, поскольку это предотвращает автоматическую вставку точки с запятой.

Использование атрибутов в JSX

Очевидно, что JSX представляет собой комбинацию JavaScript и HTML, но очень важно отметить, что JSX ближе к JavaScript по синтаксису, чем к HTML, следовательно, принимает свойства camelCase, аналогичные свойствам в соглашении об именах JavaScript. Имена атрибутов также записываются в camelCase, например; tab-index становится tabIndex и т. д.
Существует два основных способа присвоения значений атрибутам в JSX. Они есть:

Использование кавычек для присвоения строкового значения.

  • Использование фигурных скобок для присвоения выражений JavaScript в качестве значений.
  • Использование кавычек для присвоения строкового значения.

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

Указание дочерних элементов в JSX

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

  • Самозакрывающиеся теги : в них нет вложенных элементов / дочерних элементов, поэтому они самозакрывающиеся.
  • Несамозакрывающиеся теги : в них вложены элементы / дочерние элементы, следовательно, у них есть как открывающие, так и закрывающие теги.

Как на самом деле работает JSX?

JSX компилируется во время выполнения в простой JavaScript компилятором под названием Babel. Babel компилирует JSX до React.createElement() всякий раз, когда запускает коды JSX. Для краткости это означает, что все коды JSX преобразуются React.createElement (), и после компиляции эти скомпилированные коды считываются и используются при построении пользовательского интерфейса и поддержании актуального состояния виртуальной DOM.

Для дальнейшего чтения см. Документацию reactjs.