React JSX

Какво е JSX?

  • JSX означава JavaScript XML.
  • JSX ни позволява да пишем HTML в React.
  • JSX улеснява писането и добавянето на HTML в React.

Кодиране на JSX

JSX ни позволява да пишем HTML елементи в JavaScript и да ги поставяме в DOM без никакви createElement()  и / или appendChild() методи.

JSX преобразува HTML таговете в реагиращи елементи.

Не се изисква да използвате JSX, но JSX улеснява писането на React приложения.

Нека демонстрираме с два примера, първият използва JSX, а вторият не:

Пример 1

JSX:

Пример за изпълнение »

Пример 2

Без JSX:

Пример за изпълнение »

Както можете да видите в първия пример, JSX ни позволява да пишем HTML директно в кода на JavaScript.

JSX е разширение на езика JavaScript, базиран на ES6, и се превежда в обикновен JavaScript по време на изпълнение.


Изрази в JSX

С JSX можете да пишете изрази във фигурни скоби { }.

Изразът може да бъде React променлива, свойство или друг валиден JavaScript израз. JSX ще изпълни израза и ще върне резултата:

Пример

Изпълнете израза 5 + 5:

Пример за изпълнение »


Вмъкване на голям блок HTML

За да напишете HTML на няколко реда, поставете HTML в скоби:

Пример

Създайте списък с три елемента от списъка:

Пример за изпълнение »


Един елемент от най-високо ниво

HTML кодът трябва да бъде обвит в ЕДИН елемент от най-високо ниво.

Така че, ако искате да напишете две заглавки, трябва да ги поставите в родителски елемент, като div елемент

Пример

Увийте две заглавки в един DIV елемент:

Пример за изпълнение »

JSX ще изведе грешка, ако HTML не е правилен или ако HTML пропусне родителски елемент.


Елементите трябва да бъдат затворени

JSX следва XML правила и следователно HTML елементите трябва да бъдат правилно затворени.

Пример

Затворете празни елементи с />

Пример за изпълнение »

JSX ще изведе грешка, ако HTML не е правилно затворен.