О фрагментах React

При написании в React вам необходимо иметь родительский элемент, охватывающий ваши HTML-элементы. В результате без использования фрагментов вы завершаете свой HTML-код вокруг тегов <div> ... your HTML ...</div>.

Эти теги не только семантически несущественны, но они также раздувают ваше веб-приложение бесполезной разметкой, и, поскольку производительность веб-сайта гибнет от тысячи сокращений, эти дополнительные <div></div> теги могут в конечном итоге негативно повлиять на скорость отклика приложения, если их сложить вместе.

Реагировать на фрагменты представляет собой тег, позволяющий заменять пустые элементы <div></div> на <React.Fragment> или сокращенно <> ...your html... </>.

Тег <> </> fragment при компиляции не оставляет никаких посторонних элементов div в вашем приложении, в то же время удовлетворяя требованиям React по заключению ваших HTML-элементов в родительский тег.

Эта проблема

В зависимости от конфигурации кода Visual Studio, подсветка синтаксиса React Fragment может выглядеть некорректной. Вот мои версии стека:

// Visual Studio Version:
Version: 1.39.2
Commit: 6ab598523be7a800d7f3eb4d92d7ab9a66069390
Date: 2019–10–15T15:33:00.827Z

…

// The stack used for compilation as it appears in package.json.
“@babel/core”: “7.4.4”,
“@babel/preset-react”: “7.0.0”,
“@babel/preset-typescript”: “7.3.3”,
“babel-loader”: “8.0.6”,
“webpack”: “4.39.3”,
"react": "^16.8.6",

Исследование

Разбивка проблемы:

  • Согласно обновлению кода Visual Studio с ноября 2017 (версия 1.19) синтаксис фрагмента <>...</> поддерживается в VSC, поэтому моя версия VSC (1.39, 2019) должен поддерживать синтаксис и не вызывать проблем.
  • Синтаксис фрагментов поддерживается в React с версии 16.2 (2017), а я использую 16.8, поэтому версия React должна быть проблемой.
  • Проблема в том, что по умолчанию подсветка синтаксиса не работает в Visual Studio Code.
  • В примечаниях к выпуску для VSC версии 1.19 прямо указано, что TypeScript поддерживает синтаксис фрагментов. Однако нет упоминания о каком-либо другом языке, поддерживающем синтаксис фрагментов?
  • Мой VSC настроен на автоматическое определение используемого языка и устанавливает для моих *.jsx файлов значение Javascript (Babel).
  • При ручном изменении языка файла, над которым я работаю, Javascript React по-прежнему отображается неправильная подсветка синтаксиса.

Исправление:

  • При ручном изменении языка Visual Studio Code на Typescript React проблема с подсветкой синтаксиса устраняется.

Примечания:

  • Компиляция приложения с использованием Webpack - ›Babel -› React была успешной, даже несмотря на то, что подсветка синтаксиса была отключена в VSC, что указывает на то, что проблема не в настройке Webpack / Babel и, вероятно, больше в VSC.

Скриншоты

Неработающий синтаксис фрагмента. Обратите внимание на то, что закрывающий </> фрагмент красный на </ и желтый на >, что указывает на отсутствие закрывающего тега. Обратите внимание, что язык в нижней части редактора установлен на Javascript (Babel).

Фиксированный синтаксис. Обратите внимание на цвета в редакторе: export default * больше не желтый, что означает, что тега больше нет (по крайней мере, в глазах редактора кода). Опять же, это было исправлено путем установки языка в нижней части редактора VSC на Typescript React..

Обратите внимание, что я использую Typescript React, хотя мой файл технически не является Typescript - не оканчивается на .tsx.

Я не знаю, есть ли способ заставить синтаксис фрагментов работать с языком, установленным как Javascript, но это решение явно решает мои проблемы, поэтому я оставлю все как есть.

Надеюсь, это было полезно для всех, кто мог столкнуться с этой проблемой, спасибо за чтение!