Общие сведения о JSX
React использует специальный синтаксис, известный как XML JavaScript (JSX). JSX позволяет интегрировать HTML (или пользовательские компоненты, которые можно создать) и JavaScript в один файл или даже одну строку кода. С помощью JSX можно использовать синтаксис JavaScript для логики. Visual Studio Code предоставляет IntelliSense для JSX-файлов, поэтому это полезное средство при работе с React.
Заметка
JSX использует расширяемый язык разметки (XML). Синтаксис XML похож на HTML. Во многих случаях вы можете не заметить разницу. Однако XML помещает несколько важных ограничений в синтаксисе:
- Все элементы должны размещаться внутри одного родительского элемента.
- Все элементы должны быть закрыты.
Процесс сборки
Браузеры не поддерживают JSX в собственном коде. Таким образом, JavaScript и HTML должны генерироваться из JSX-файлов для отображения в браузере. Несколько пакетов и других средств могут выполнять необходимые задачи. К этим средствам относятся Webpack, Parcelи Snowpack. Мы будем использовать Snowpack, так как он не требует кода или дополнительного скрипта.
Компоненты
Разработка React основана на компонентах. Компоненты являются автономными единицами отображения и работы. Их можно повторно использовать в приложении. Используйте их для логического разбиения приложения на небольшие блоки (или компоненты).