для чего нужен jsx
Можно ли обойтись без jsx и зачем?
Я уверен, большинство из вас, кто использует react используют jsx. Благодаря своему лаконичному синтаксису jsx улучшает читабельность шаблонов. Сравните:
Второй вариант даже в таком простом примере выглядит намного понятнее. Если усложнить пример, то разница будет еще очевиднее.
Чем плох jsx
Все бы хорошо, если бы jsx был бы стандартной возможностью javascript, но это не так. Для работы с jsx вам потребуется транспилятор. Решив использовать jsx вы навечно становитесь зависимы от транспиляции. Еще недавно, такая зависимость никого не пугала, так как для использования новых возможностей из ecmascript 2015 вам в любом случае необходим транспилятор. Но все меняется, уровень поддержки es6 близок к 100%
По крайней мере, в develop-окружении уже можно избавляться от транспиляции. Представляете, какие возможности это открывает? Не нужно при дебаге ковыряться в выходе babel, который многое изменил, не нужны source map, после изменения файла нет необходимости ждать, пока закончится пересборка. И jsx в данном случае будет главной помехой… Есть ли альтернативы jsx?
Альтернативы jsx
Стандарт ecmascript 2015 определяет тегированные шаблонные строки. Пример, выше можно переписать так:
Более сложный пример:
Как подключить
Пакет es6x поддерживает разные движки. Среди них react, hyperscript (h), а также (по умолчанию) универсальный вывод в json вида:
Чтобы использовать совместно с react нужно указать метод вывода перед первым вызовом (в одном месте проекта):
Особенности пакета es6x
В примере выше, в jsx требуется добавлять уродливую кострукцию <' '>между словами «text», «strong» и «emphase» а в es6x этого не потребуется:
Производительность
es6x поддерживает кеширование, благодаря чему, при повторном вызове с тем же шаблоном не происходит парсинга и вызов происходит намного быстрее. Повторный вызов по результатам тестирования в 10 раз быстрее первого (в случае универсального парсинга в json, в случае парсинга для react разница меньше — менее чем в 2 раза). Так же я производил сравнение с конкурентным пакетом t7 при парсинге для react. Результаты:
jsx-выход: 15683 ops/sec ±1%
es6x: 11187 ops/sec ±1%
t7: 10253 ops/sec ±1% (не поддерживает многих плюшек jsx)
То есть падение производительности около 30%. Что оказалось меньше, чем я ожидал. Объясняется тем, что метод createElement достаточно тяжелый.
Пользуйтесь, сообщайте мне о багах. Всем спасибо за внимание.
Подробное руководство по JSX в React
Почему-то довольно мало внимания уделяется именно глубокому понимаю JSX, хотя он необходим для полноценной и быстрой работы с React. Я не нашел в рунете действительно подробного руководства по JSX в React и перевел эту статью, добавив немного от себя.
Введение в JSX
JSX это технология, которая была представлена React.
Хоть React может работать без использования JSX, это всё же идеальный помощник для работы с компонентами, так что React во многом выигрывает, применяя JSX.
Сначала вы можете подумать, что использование JSX это смесь HTML и JavaScript (И как вы далее заметите еще и CSS).
Но это не так, так как то, что вы реально делаете при использовании JSX синтаксиса, это написание того же самого декларативного синтаксиса, но только тем, чем должен быть компонент UI.
И вы обрисовываете UI не используя строки, а используя JavaScript, с которым можно делать много всего интересного и полезного.
Этюд к JSX
Вот как вы обозначите h1 тег, включающий в себя строку:
Это смахивает на странный микс JavaScript и HTML, но в реальности это всё чистый JavaScript.
А то, что похоже на HTML, на самом деле является синтаксическим сахаром для определения компонентов и их позиционирования внутри разметки.
Внутри JSX выражения можно совершенно легко вставить любые атрибуты:
Вам достаточно только обратить внимание тогда, когда у атрибута есть тире, что конвертирует его в горбатый регистр и обратите внимание ещё на эти два специальных случая:
class становится className
for становится htmlFor
Так как это зарезервированные слова в JavaScript.
Вот пример JSX, который заключает два компонента в div тег:
Тег всегда должен быть закрыт, так как это скорее XML, чем HTML (если вы помните деньки с XHTML, было схоже, но затем простой и понятный синтаксис HTML5 все таки взял верх). В этом случае используется самозакрывающийся тег.
Транспиляция JSX (трансформирование в читаемый браузером формат)
Браузер не может понимать JS файлы, которые содержат JSX код. Сначала они должны быть трансформированы в обычный и понятный JavaScript.
Как это сделать? В процессе транспиляции.
Мы уже говорили, что JSX опционален и в принципе, необязателен в React, потому что для каждой JSX строки, есть соответствующая JavaScript альтернатива и в конечном итоге именно в нее трансформируется наш JSX.
Для примера, следующие две конструкции полностью равнозначны:
Это очень простой пример для начала понимания, но вы уже можете представить, то как более сложный синтаксис на чистом JS может быть сравним с использованием JSX.
JS в JSX
JSX допускает использование любого, вставленного в него JavaScript.
Для примера, вот как использовать переменную, которую будет доступна отовсюду:
Это простой пример. Фигурные скобки принимают любой JS код:
Как вы видите, мы вложили JavaScript в JSX, объявленный внутри JavaScript, который вложен в JSX. В общем то тут вы можете пойти настолько глубоко, насколько захотите.
HTML в JSX
JSX напоминает HTML, но на самом деле это XML синтаксис.
В конечном итоге получается, что вы рендерите HTML, так что вам всего-лишь нужно знать несколько различий между тем, как вы определите некоторые вещи в HTML и как вы это сделаете в JSX.
Вам нужно закрывать все теги
JSX это как XHTML, если вы когда-либо его использовали, то вы уже знаете, что в нём надо закрывать все теги: забудьте про
, а вместо этого используйте самозкрывающийся тег
. Ну и также делайте с другими тегами.
Горбатый регистр это новый стандарт
В HTML вы найдете атрибуты без каких-либо изменений. В JSX они переименованы в свою вариацию на горбатом регистре:
class стал className
Так как JSX это JavaScript и class это зарезервированное слово, вы не можете написать:
Но вам нужно использовать:
Атрибуты стилей изменяют свою семантику
Атрибут style в HTML позволяет указывать инлайновые стили. В JSX это больше не принимается как строка, а в разделе CSS в React вы узнаете почему это так удобно.
CSS в React
JSX даёт клевый способ указывать CSS стили.
Если у вас есть небольшой опыт работы с инлайновым HTML, то на первый взгляд вам покажется, что вас отправили лет на 10–15 назад, в мир, где инлайновый CSS был абсолютной нормой.
Но стилизация с JSX это не тоже самое: во первых, вместо принятия строки, содержащей свойства CSS, JSX атрибут style принимает только объект. Это означает, то что вы определяете свойства в объекте:
CSS значения, которые вы пишите в JSX, слегка другие, чем чистый CSS:
Основные названия свойств пишутся в горбатом регистре
Значения это просто строки
Вы разделяете каждое “определение” с помощью запятой
Почему это предпочтительнее над чистым CSS/SASS/LESS?
CSS это нерешенная проблема. После его появления, появились десятки инструментов, связанных с ним, которые стремительно взлетали и также быстро были забыты. Главная проблема с JS в том, что тут нет областей видимости и довольно легко написать CSS, который не работает так, как надо, следовательно, “грязные быстрые решения” могут повлиять на те элементы, которые вообще не должны быть затронуты.
JSX позволяет компонентам полностью инкапсулировать их стили.
Решение ли это?
Инлайновые стили в JSX конечно хороши, пока вам не надо: написать медиа запросы, стили анимаций, сослаться на псевдо-классы, сослаться на псевдо-элементы.
Вкратце, они покрывают основы, но это далеко не конечное решение.
Формы в JSX
JSX добавляет некоторые изменения в то, как работают формы в HTML, с целью того, чтобы упростить жизнь разработчику.
value и defaultvalue
Это помогает решить некоторые неординарные моменты в поведении регулярного взаимодействия с DOM, когда проверка input.value и input.getAttribute(‘value’) возвращает одно настоящее значение и одно изначальное дефолтное значение.
Более последовательный onChange
JSX автоматическое экранирование
Чтобы смягчить любой возможный риск XSS искплойтов, JSX принудительно автоматически экранирует выражения.
Это означает то, что вы можете столкнуться с некоторыми затруднениями во время использования HTML в строчном выражении.
Для примера, вы ожидаете, что выдаст © 2017 :
Чтобы исправить эту проблему, вы можете какбы вынести все за пределы выражения:
Так и использовать константу, которая выведет Unicode представление, соответствующее HTML который вам нужно вывести:
Пробел в JSX
Чтобы добавить пробел в JSX есть два правила:
Горизонтальный пробел сокращается до одного.
Если у вас есть пробел между элементами на одной линии, то всё это сократится до одного пробела.
Вертикальные пробелы стираются:
Чтобы пофиксить эту проблему, вам надо явно добавить пробел, добавив выражения как тут:
Или вставив строку в выражении:
Добавление комментариев в JSX
Вы можете добавлять комментарии в JSX, используя обычные JavaScript комментарии внутри выражения:
Атрибуты расширения
В JSX довольно частой операцией является назначение значений атрибутам. Вместо того, чтобы делать это вручную:
Вы можете передать их с помощью оператора расширения Spread:
Циклы в JSX
Если у вас есть есть коллекция элементов по которой вам нужно пройтись циклом для создания JSX части компонента, то вы можете спокойно запустить цикл и затем добавить JSX в массив.
Email подписка!
Введение в JSX
Рассмотрим это объявление переменной:
Синтаксис этого странного тега не является ни строкой, ни HTML.
Он называется JSX, и это расширение синтаксиса JavaScript. Мы рекомендуем использовать его с React для описания того, как должен выглядеть пользовательский интерфейс. JSX может напомнить вам о языке шаблонов, но со всей полной мощью JavaScript.
JSX создаёт «элементы» React. Мы рассмотрим их отрисовку в DOM в следующем разделе. Ниже вы можете найти основы JSX, необходимые для начала работы.
React принимает тот факт, что логика отрисовки по сути связана с другой логикой пользовательского интерфейса: как обрабатываются события, как изменяется состояние со временем и как данные подготовлены для отображения.
Вместо искусственного разделения технологий, помещая разметку и логику в отдельные файлы, React [разделяет ответственности] (https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8) с слабо связанными модулями, называемыми «компонентами», которые содержат вместе разметку и логику. Мы вернёмся к компонентам в следующем разделе, но если вы ещё не очень хорошо умеет размещать разметку в JS, этот доклад может убедить вас в другом.
React не требует использование JSX, но большинство людей находят его полезным в качестве визуальной демонстрации при работе с пользовательским интерфейсом внутри кода JavaScript. Он также позволяет React показывать более полезные сообщения об ошибках и предупреждения.
Теперь, когда с этим разобрались, давайте начнём!
Встраивание выражений в JSX
Мы разделяем JSX на несколько строк для удобства чтения. Хотя это не требуется, при этом мы также рекомендуем обёртывать его в круглых скобках, чтобы избежать ошибок, связанных с автоматической вставкой точки с запятой.
JSX — это выражение тоже
После компиляции выражения JSX становятся обычными вызовами функций JavaScript и вычисляются в объекты JavaScript.
Установка атрибутов с помощью JSX
Вы можете использовать кавычки для указания строковых литералов в качестве атрибутов:
Вы также можете использовать фигурные скобки для вставки JavaScript-выражения в атрибут:
Не используйте кавычки вокруг фигурных скобок при вставке выражения JavaScript в атрибут. Нужно использовать либо кавычки (для строковых значений), либо фигурные скобки (для выражений), но не оба в одном и том же атрибуте.
Поскольку JSX ближе к JavaScript, чем к HTML, React DOM использует соглашение об именах свойств camelCase вместо имён атрибутов HTML.
Установка детей с помощью JSX
Теги JSX могут содержать дочерние элементы:
JSX предотвращает атаки-инъекции
Безопасно встраивать пользовательские данные в JSX:
By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.
По умолчанию DOM React экранирует любые значения, встроенные в JSX, перед их отрисовкой. Таким образом, гарантируется, что вы никогда не сможете внедрить то, чего явно нет в вашем приложении. Перед отрисовкой все преобразуется в строку. Это помогает предотвратить атаки межсайтовый скриптинг (cross-site-scripting, XSS).
JSX представляет из себя объекты
Ниже два примера идентичны:
React.createElement () выполняет несколько проверок для помощи вам написать код без ошибок, но по сути он создает такой объект:
Эти объекты называются элементами «React-элементами». Можно думать о них как о том, что вы хотите видеть на экране. React считывает эти объекты и использует их для построения DOM и его обновления.
Мы рассмотрим отрисовку элементов React в DOM в следующем разделе.
2.3 Знакомство с JSX
Рассмотрим следующий код:
Этот симпатичный синтаксис в виде тегов не является ни строкой, ни HTML. Это синтаксический сахар JavaScript под названием JSX. Мы настоятельно рекомендуем использовать JSX вместе с React, так как он максимально ясно описывает внешний вид UI, одновременно включая в себя всю мощь JavaScript.
JSX производит React-элементы. Мы будем исследовать их отрисовку в DOM-дерево в следующем разделе. Ниже вы познакомитесь с основами JSX, необходимыми для начала разработки на React.
2.3.1 Почему JSX?
React учитывает тот факт, что механизм отрисовки связан с ещё несколькими важными механизмами UI: обработка событий, изменение состояния со временем и подготовка данных к отображению на экране.
Вместо того, чтобы искусственно отделять технологии, помещая разметку и логику в отдельные файлы, React разделяет задачи. Для этого он использует слабо связанные единицы: компоненты, которые содержат и разметку, и логику. Мы вернемся к компонентам в следующем разделе. Если же вас не устраивает помещение разметки в JS, данное обсуждение может поменять вашу точку зрения.
React не требует использования JSX. Тем не менее наше сообщество считает его крайне полезным, так как JSX дает абсолютную наглядность при работе с UI внутри кода JavaScript. Также он позволяет React показывать полезные предупреждения и сообщения об ошибках.
Итак, давайте приступим!
2.3.2 Встраиваемые выражения в JSX
Вы можете встроить любое JavaScript выражение в JSX, его нужно лишь обернуть в фигурные скобки.
В следующем примере мы встраиваем результат вызова JavaScript функции formatName(user) в элемент
Здесь мы поделили выражение JSX на несколько линий для читабельности. Хоть это и не обязательно, мы рекомендуем оборачивать JSX-выражения в круглые скобки () во избежание подводных камней автоматической вставки точки с запятой
2.3.3 JSX сам является выражением
После компиляции JSX-выражения становятся обычными JavaScript-объектами.
2.3.4 Указание атрибутов с помощью JSX
Мы можем использовать двойные кавычки для указания строковых литералов как атрибутов:
Наравне с кавычками мы можем использовать фигурные скобки, чтобы встроить JavaScript-выражение в атрибут:
Так как JSX ближе к JavaScript, чем к HTML, React DOM использует соглашение об именовании свойств в верблюжьейНотации, вместо имен HTML-атрибутов.
2.3.5 Указание потомков с помощью JSX
Если тег пустой, его можно тут же закрыть с помощью /> как в XML:
Однако JSX-теги могут иметь потомков:
2.3.6 JSX предотвращает атаки инъекцией
Как насчет пользовательского ввода? Об этом разработчики React также побеспокоились. В JSX можно встроить любой результат ввода пользователя и это будет абсолютно безопасно!
По умолчанию React DOM избегает обработки любых значений, встроенных в JSX, перед их отрисовкой. Таким образом он гарантирует, что вы никогда не сможете внедрить в ваше приложение что-то, что не написано явно. Всё, перед тем как будет отрисовано, преобразуется в строку. Это помогает избежать XSS-атак.
2.3.7 JSX представляет собой JavaScript-объекты
Эти два примера эквивалентны:
React.createElement() выполняет несколько проверок, чтобы помочь вам написать свободный от багов код, но по существу он создает объект наподобие следующего:
А если зайти в исходники, то этот объект будет выглядеть так:
Полный исходный код можно посмотреть здесь.
Данные объекты носят название «React-элементы». Вы можете представлять себе такой объект, как описание того, что вам необходимо увидеть на экране. React читает эти объекты, использует их для построения дерева DOM и хранит их в актуальном состоянии.
Мы рекомендуем использовать Babel language definition для вашего редактора, чтобы ES6 и JSX подсвечивались корректно.
Плюсы и минусы React: виртуальная DOM, синтаксис JSX и другие аргументы для спора
Когда React рассматривается в контексте возможных альтернатив, то вам пригодится знание о его преимуществах и недостатках, чтобы разобраться в своих нуждах и подобрать оптимальную технологию.
React уже зарекомендовал себя в качестве мощного инструмента для создания пользовательских интерфейсов. Пользовательский интерфейс (UI) — одна из важнейших частей веб-приложения, ведь это то, что пользователь видит, с чем он взаимодействует.
Но перед началом разработки каждого нового сайта необходимо убедиться, что выбранный JavaScript-фреймворк идеально подходит для проекта.
В статье рассмотрим следующие достоинства React:
А после достоинств рассмотрим и недостатки React:
Пройдемся по каждому из пунктов подробнее.
Достоинства React
Некоторые из плюсов — весьма субъективны, так что составьте свое собственное мнение и поделитесь им в комментариях!
1. Виртуальная объектная модель документа
Объектная модель документа (DOM) определяет древовидную структуру HTML-документа, отсылаемого клиенту сервером после соответствующего запроса. DOM представляет веб-страницу в объектно-ориентированном формате, чтобы языки программирования могли взаимодействовать с ней.
Браузер регулярно проверяет любые изменения в DOM, обновляя ее соответствующим образом. Изменение объектной модели документа провоцируется множеством факторов, например пользовательским вводом данных, HTTP-запросом, получением данных от API и так далее. Браузер обновляет DOM каждый раз, когда страница меняется. Поскольку DOM современных сайтов огромны, обновление занимает много времени, замедляя общую производительность веб-приложения.
Вместо медленных и неудобных взаимодействий непосредственно с реальной объектной моделью документа, React взаимодействует с ее облегченной копией — виртуальной DOM, поэтому реальная DOM обновляется только после взаимодействия с виртуальной DOM.
Следовательно, виртуальный DOM обеспечивает разработчикам два серьезных преимущества. О них сейчас и поговорим.
Обновление всего DOM, чтобы сделать веб-страницу “реактивной” — крайне неэффективно, поскольку потребляет слишком много ресурсов. Поэтому, собственно, при изменении веб-страницы (например, в результате запроса или действия пользователя) React обновляет специальный виртуальный DOM.
React хранит в памяти две версии виртуального DOM — обновленный виртуальный DOM и его резервную копию, созданную до обновления. После обновления React сравнивает обе версии между собой, чтобы найти измененные элементы, а затем — обновляет исключительно изменившуюся часть реального DOM.
Подобный процесс на первый вгляд кажется переусложненным и трудоемким, однако он занимает гораздо меньше времени, чем обновление реальной объектной модели документа целиком, следовательно, он оптимизирует работу с DOM.
Одна из жизненно важных целей любого стартапа — написать веб-приложение быстрым и отзывчивым, обеспечить наилучшее обслуживание клиентов. Виртуальная DOM, в отличие от реального DOM, занимает мало места и быстро обновляется, тем самым повышая производительность приложения.
Виртуальная DOM позволяет странице немедленно получать ответы от сервера и отображать обновления. Например, Facebook применяет технологию виртуального DOM для обновления чатов и лент пользователей без перезагрузки страницы.
2. Повторное применение компонентов
При работе с ReactJS создаются многоразовые компоненты: чаще всего, компонент пользовательского интерфейса можно использовать в других частях кода или даже в разных проектах практически без изменений.
Более того, разработчикам React-приложений доступны библиотеки готовых компонентов с открытым исходным кодом. Благодаря им время разработки сокращается, что очень важно для стартапов, которым необходимо экономить не только деньги, но и время.
3. Нисходящий поток данных
Односторонний поток данных в React — еще одна очень полезная функция. Такой поток данных также называют “сверху вниз” или “от родителя к ребенку”.
Объяснение довольно простое — в React-приложении данные между элементами передаются только одним способом. Нисходящий поток данных предотвращает ошибки, облегчает отладку.
4. Огромное сообщество
Facebook приложила много усилий, чтобы сделать React мощным инструментом для улучшения пользовательского интерфейса любых веб-приложений. Более того, корпорация активно продолжает делать React все более приятной и эффективной технологией.
Но не только Facebook создавали React: выпустив его с открытым исходным кодом в 2013 году, Facebook активно поощрял разработчиков улучшать библиотеку. Сегодняшний React — по праву результат совместных усилий людей со всего мира.
Сообщество React предоставляет тонны ценных библиотек, облегчающих процесс разработки, для вас открыты новые способы и возможности улучшить качество кода приложений. Поскольку библиотеками с готовыми компонентами принято делиться через интернет, всегда можно внедрить в проект некоторые из них, тем самым существенно сократив время, затрачиваемое на разработку пользовательских интерфейсов.
5. Браузерные инструменты React-разработчика
React Developer Tools — это бесплатное расширение для Chrome и Firefox, предоставляющее целый набор виджетов проверки. Расширение упрощает отладку, позволяя разработчикам не только искать по списку всех компонентов, но и просматривать глубоко вложенные компоненты прямо в браузере.
Недостатки React
Как и любая другая технология, React характеризуется не только плюсами, но и минусами. Давайте узнаем все об ограничениях React!
1. Плохая документация
ReactJS — относительно новая технология, она продолжает развиваться благодаря разработчикам, которые вносят в нее свой вклад, расширяя ее возможности.
Но документации по React и связанным с ним библиотекам часто не хватает. Более того, разработчики склонны выпускать обновления библиотек без обновления документации, что затрудняет интеграцию библиотек в существующие проекты и знакомство с новыми возможностями.
2. Запутанный синтаксис JSX
В ReactJS используется JSX — специальное расширение синтаксиса для создания объектов JavaScript, но через синтаксис HTML. Такое расширение упрощает модификацию DOM и улучшает читабельность кода.
Однако, синтаксис HTML посреди JavaScript-кода может запутать молодых разработчиков, поэтому им требуется время на формирование привычки. Следовательно, начинающие разработчики часто считают JSX недостатком React.
3. Сложность поисковой оптимизации
Поисковая оптимизация (SEO) крайне важна, ведь веб-приложению нужно получать трафик и привлекать новых клиентов. Для лучшего понимания сложности поисковой оптимизации приложения на React, нужно понять, как Google индексирует веб-страницы.
Веб-страницы индексируются специальными поисковыми ботами Google, эти боты сканируют содержимое веб-страницы и сохраняют информацию в индексе Google. Когда пользователь запрашивает определенную информацию, то Google проверяет данные, хранящиеся в индексе, чтобы предоставить наиболее релевантные источники информации.
Боты Google могут легко индексировать HTML-страницы. Однако с JavaScript-страницами все уже не так гладко, ведь динамические веб-приложения, в том числе созданные на React, проходят усложненную процедуру индексации, в отличии от статических веб-страниц.
Таким образом, страница React-приложения может быть проиндексирована неправильно или индексирование может занять слишком много времени. Что один случай, что другой — оба заставят ботов Google покинуть страницу сайта.
Существует несколько подходов, делающих React-сайт более SEO-дружественным, например предварительный рендеринг или рендеринг на стороне сервера.
4. Фокусировка на пользовательском интерфейсе
ReactJS — это JavaScript-библиотека, содержащая набор инструментов для создания пользовательского интерфейса веб-приложений.
Но ReactJS нельзя назвать полноценным фреймворком, хоть такое его представление и распространено. React — это не инструмент “все в одном” для создания целого приложения. Следовательно, если вы следуете паттерну проектирования “Модель-Представление-Контроллер” (Model-View-Controller или MVC), то React будет отвечать только за представление. Две другие части — модель и контроллер — создаются при помощи дополнительных инструментов. Если вы применяете React в проекте, то вам потребуется интегрировать дополнительные инструменты для маршрутизации, написания интерфейсов прикладного программирования (Application Programming Interface или API) и других частей полноценного веб-приложения.
Поскольку многие другие JavaScript-фреймворки проектировались как универсальные решения и позволяют создавать все элементы паттерна MVC, некоторые разработчики считают недостатком узкую специализацию React на пользовательском интерфейсе.
Выводы
React успешно доказал свою эффективность в создании интерактивных пользовательских интерфейсов, именно поэтому он так широко применяется.
React характеризуется множеством достоинств, вы можете ими воспользоваться, но при создании веб-приложения для развития бизнеса следует также помнить про недостатки каждой из технологий.