Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 С одной стороны, JSX - это такая же простая вещь, как и голый HTML. Нужно запомнить, как он собирается и всё. С другой стороны, он встроен в сам JS и может с ним взаимодействовать. Другими словами, получается шаблонизация прямо в языке программирования (да-да, так работает PHP). Именно это смешение с JS вызывает больше всего вопросов у новичков. Попробуем разобраться с этой темой подробнее.

2 Для лучшего понимания происходящего, проверьте во что транслируется код этого урока в онлайн компиляторе<a>https://babeljs.io/repl</a>. Вставляйте примеры кода в левую часть редактора, в правой части появится результат

3 Любой текст, записанный внутри тегов (далее они будут так называться для простоты), остаётся просто статическим текстом на выводе. А что делать, если нужно вставить значение переменной? Ответ ниже:

4 Как видно, вставка (по сути - интерполяция) происходит за счёт использования фигурных скобок, причём внутри них может быть любое выражение. Эта схема работает одинаково как для содержимого тегов, так и для атрибутов.

5 Кроме того, сами JSX-элементы являются выражениями, то есть вы можете использовать их в любых местах JS-кода, которые работают с выражениями:

6 Теперь всё вместе. Сам JSX - это выражение, а чтобы встроить выражение на JS внутрь JSX, нужно использовать фигурные скобки. Следовательно, вы можете встроить JSX внутрь самого JSX пока вы пишете JSX:

7 Другими словами, JSX, как и любой язык программирования, имеет рекурсивную структуру. Вы можете вкладывать одни выражения в другие до бесконечности. В этом нет ничего удивительного, ведь JSX - это тот же код на JS, записанный особым образом.

8 Чтобы окончательно закрепить эту тему, взгляните на следующий код:

9 Этот код не заработает по очевидной причине. Условная конструкция в JS - инструкция, а не выражение. В результате компиляции предыдущего кода получится:

10 И это, вероятно, самое большое неудобство: невозможность использовать условную конструкцию внутри JSX. Хотя вы по-прежнему можете использовать тернарную операцию или, в более сложных случаях, делать так:

11 <h2>Композиция</h2>

12 Как уже говорилось в прошлом уроке, все теги React по сути являются встроенными компонентами, которые работают точно так же, как и определённые вами. А значит все, что применимо к самописным компонентам, также применимо и ко встроенным. Обратное тоже верно. На практике это означает, например, возможность комбинирования компонентов:

13 В примере выше компоненты, записанные с заглавной буквы, - самописные, остальные - встроенные. Это разделение не случайно: React требует, чтобы вновь создаваемые компоненты начинались с большой буквы, что соответствует стандарту именования классов в JS.

14 <h2>Null</h2>

15 В реальной практике возникают ситуации, когда наличие того или иного компонента в DOM зависит от некоторых условий. Например, если в компонент не передали текст, то и не надо выводить соответствующий кусок. Пример:

16 либо так:

17 То есть null - это допустимое значение, которое рассматривается React как пустой компонент. Точно также интерпретируются false, true и undefined. Поэтому пример выше можно переписать еще короче.

18 <h2>Комментарии</h2>

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

20 То же самое для многострочного комментария: