2018-10-12 20:00:59 +00:00
---
title: JSX
localeTitle: JSX
---
# JSX
> JSX является коротким для JavaScript XML.
2018-11-22 18:49:48 +00:00
JSX - это выражение, которое использует допустимые HTML-инструкции в JavaScript. Вы можете назначить это выражение переменной и использовать е е в другом месте. Вы можете комбинировать другие действующие выражения JavaScript и JSX в этих выражениях HTML, помещая их в фигурные скобки ( `{}` ). Babel, в дальнейшем, скомпилирует JSX в объект типа `React.createElement()` .
2018-10-12 20:00:59 +00:00
### Однострочные и многострочные выражения
Однострочное выражение просты в использовании.
```jsx
const one = < h1 > Hello World!< / h1 > ;
```
Когда вам нужно использовать несколько строк в одном выражении JSX, напишите код в пределах одной круглой скобки.
```jsx
const two = (
< ul >
< li > Once< / li >
< li > Twice< / li >
< / ul >
);
```
2018-11-22 18:49:48 +00:00
### Использование только HTML тегов
2018-10-12 20:00:59 +00:00
```jsx
const greet = < h1 > Hello World!< / h1 > ;
```
2018-11-22 18:49:48 +00:00
### Объединение выражения JavaScript с HTML тегами
2018-10-12 20:00:59 +00:00
Мы можем использовать переменные JavaScript в фигурных скобках.
```jsx
const who = "Quincy Larson";
2018-11-22 18:49:48 +00:00
const greet = < h1 > Hello {who}!< / h1 > ;
2018-10-12 20:00:59 +00:00
```
Мы также можем вызвать другие функции JavaScript в фигурных скобках.
```jsx
function who() {
return "World";
2018-11-22 18:49:48 +00:00
}
const greet = < h1 > Hello {who()}!< / h1 > ;
2018-10-12 20:00:59 +00:00
```
2018-11-22 18:49:48 +00:00
### Только один родительский тег разрешен
2018-10-12 20:00:59 +00:00
2018-11-22 18:49:48 +00:00
Выражение JSX должно иметь только один родительский тег. Мы можем добавить несколько тегов, обязательно вложенных в родительский элемент.
2018-10-12 20:00:59 +00:00
```jsx
// This is valid.
2018-11-22 18:49:48 +00:00
const tags = (
2018-10-12 20:00:59 +00:00
< ul >
< li > Once< / li >
< li > Twice< / li >
< / ul >
);
2018-11-22 18:49:48 +00:00
// This is not valid.
const tags = (
2018-10-12 20:00:59 +00:00
< h1 > Hello World!< / h1 >
< h3 > This is my special list:< / h3 >
< ul >
< li > Once< / li >
< li > Twice< / li >
< / ul >
);
```
### Больше информации
2018-11-22 18:49:48 +00:00
* [Представляем JSX ](https://reactjs.org/docs/introducing-jsx.html )