как узнать версию react
Как узнать, какая версия React запущена во время выполнения в браузере?
Есть ли способ узнать версию React во время выполнения в браузере?
React.version это то, что вы ищете.
Однако это недокументировано (насколько мне известно), поэтому это может быть нестабильная функция (то есть, хотя и маловероятно, она может исчезнуть или измениться в будущих выпусках).
Пример с React импортированным как скрипт
Пример с React импортированным модулем
Этот второй подход является рекомендуемым. Большинство веб-сайтов будут использовать его. create-react-app делает это ( за сценой использует webpack ). В этом случае React он инкапсулирован и, как правило, вообще недоступен вне пакета (например, в консоли браузера).
Из командной строки:
Откройте Chrome Dev Tools или аналогичный и запустите require(‘React’).version в консоли.
Это работает и на таких сайтах, как Facebook, чтобы узнать, какую версию они используют.
Установив React Devtools, вы можете запустить это из консоли браузера:
Что выводит что-то вроде:
Метод 1: посмотрите в ECMAScript:
Номер версии экспортируется обоими модулями react-dom и react, но эти имена часто удаляются при объединении, а версия скрывается внутри контекста выполнения, к которому нет доступа. Умная точка останова может напрямую показать значение, или вы можете выполнить поиск в ECMAScript:
Метод 2: используйте точку останова DOM:
Версия также вводится в инструменты разработки React, но, насколько я знаю, нигде не отображается.
Как можно сказать версию React, запущенную во время выполнения в браузере?
Есть ли способ узнать версию выполнения React в браузере?
ОТВЕТЫ
Ответ 1
Хотя он недокументирован (насколько я знаю), поэтому он может быть нестабильной (то есть маловероятным, он может исчезнуть или измениться в будущих версиях).
Ответ 2
Откройте Chrome Dev Tools или аналогичный и запустите require(‘React’).version в консоли.
Это работает на таких сайтах, как Facebook, чтобы узнать, какую версию они используют.
Ответ 3
Способ 1: посмотрите в ECMAScript:
Номер версии экспортируется обоими модулями реагировать и реагировать, но эти имена часто удаляются связыванием, а версия скрывается в контексте выполнения, к которому нет доступа. Умная точка останова может раскрыть значение напрямую, или вы можете искать в ECMAScript:
Метод 2: Используйте точку останова DOM:
Версия также внедряется в инструменты разработки React, но, насколько я знаю, нигде не отображается.
Ответ 4
Это работало для меня в Safari и Chrome при обновлении с 0.12.2 до 16.2.0.
Ответ 5
В файле index.js просто замените компонент приложения на «React.version». Например
Я проверил это с React v16.8.1
Ответ 6
Для приложения, созданного с помощью create-реагировать-приложение, мне удалось увидеть версию:
Приложение было развернуто без исходной карты.
Ответ 7
Предполагается, что вы импортируете React следующим образом: import React from ‘react’
Как можно узнать версию React, запущенную во время выполнения в браузере?
Есть ли способ узнать версию React в браузере?
13 ответов
React.version это то, что вы ищете.
Хотя он недокументирован (насколько я знаю), поэтому он не может быть стабильной функцией (то есть маловероятно, что он может исчезнуть или измениться в будущих выпусках).
Пример с React импортируется как скрипт
Пример с React импортируется как модуль
Очевидно, если вы импортируете React как модуль, он не будет в глобальной области видимости. Приведенный выше код предназначен для комплектации с остальным приложением, например, с помощью веб-пакета. Он практически никогда не будет работать, если используется в консоли браузера.
Этот второй подход является рекомендуемым. Большинство сайтов будет использовать его. Это создает приложение create-response-app (оно использует веб-пакет за кулисами). В этом случае, React инкапсулирован и, как правило, вообще недоступен за пределами пакета (например, в консоли браузера).
Из командной строки:
Установив React Devtools, вы можете запустить это из консоли браузера:
Что выводит что-то вроде:
Откройте Chrome Dev Tools или эквивалентный и запустите require(‘React’).version в консоли.
Это работает на веб-сайтах, таких как Facebook, чтобы узнать, какую версию они используют.
Нет уверенности в том, что какие-либо глобальные переменные ECMAScript были экспортированы, и html/css не обязательно указывает React. Так что смотрите в.js.
Способ 1: посмотрите в ECMAScript:
Номер версии экспортируется обоими модулями реагировать и реагировать, но эти имена часто удаляются связыванием, а версия скрывается в контексте выполнения, к которому нет доступа. Умная точка останова может раскрыть значение напрямую, или вы можете искать в ECMAScript:
Метод 2: Используйте точку останова DOM:
Версия также внедряется в инструменты разработки React, но, насколько я знаю, нигде не отображается.
Для установки React для начала понадобится установить и настроить локальную среду разработки. Если вы занимаетесь разработкой, то у вас уже явно установлен локальный сервер. Также, можно попробовать React онлайн, прямо в браузере, подключив внешние файлы библиотеки и использовав следующий код:
Для установки React на локальном сервере, потребуется установка Node JS >= 6 версии.
Если у вас установлен npm 5.2.0+, вы можете использовать npx вместо этого.
Установленное React приложение создает конвейер сборки frontend и его можно использховать с любым backend.
В React используеются такие frontend инструменты, как Babel и webpack, но вы также можете использовать другие инструменты и настраивать конфигурацию приложения по своему усмотрению.
Когда приложение готово к развертыванию в производство, то запуск следующей команды приведет к созданию оптимизированной сборки вашего приложения в build каталоге.
Вам не нужно переписывать свое приложение, чтобы начать использовать React. Вы можете добавлять React в небольшую часть вашего приложения, например отдельный виджет, чтобы вы могли видеть, хорошо ли он подходит для вашего использования.
Хоть React и можно использовать без набора стартовой сборки, рекомендуется установить следующий набор для разработки:
Установка React
Чтобы установить React с npm, запустите:
Чтобы установить React с Yarn, выполните:
Включение ES6 и JSX
Hello World с ES6 и JSX
Самый маленький пример React выглядит так:
Этот код превращается в элемент DOM с идентификатором root и содержимым внутри него:
Аналогично, вы можете отобразить компонент React внутри элемента DOM где-то внутри вашего существующего приложения, написанного с помощью любой другой библиотеки пользовательского интерфейса JavaScript.
Разработка и производство
По умолчанию React содержит много полезных предупреждений. Эти предупреждения очень полезны в разработке.
Тем не менее, они делают версию разработки React более крупной и медленной, поэтому вы должны использовать производственную версию при развертывании приложения.
Использование CDN
Если вы не хотите использовать npm для управления пакетами клиента, react и react-dom пакеты, то можете подключать файлы из CDN.
UMD-сборки React и ReactDOM доступны через CDN.
Вышеупомянутые версии предназначены только для разработки и не подходят для производства. Минимизированные и оптимизированные производственные версии React доступны по адресу:
Чтобы загрузить определенную версию reactи react-dom, замените 16 номер версии.
Почему crossorigin атрибут?
Если вы используете React из CDN, то рекомендуется сохранить crossorigin атрибут:
Также рекомендуется проверить, что используемый CDN задает Access-Control-Allow-Origin: * HTTP-заголовок. Это позволяет улучшить обработку ошибок в React 16 и более поздних версиях.
1.2 Установка
1.2.1 Попробовать React
1.2.1.1 Онлайн
1.2.1.2 Минимальный HTML-шаблон
Если вы хотите использовать React для полноценного приложения, то переходите к изучению следующих разделов «Создание приложения на React» и «Добавление React в существующее приложение».
1.2.2 Следующие шаги
1.2.2.1 Быстрый старт
1.2.2.2 Полноценная среда разработки
Более легкие решения выше подходят, если вы новичок в React или просто экспериментируете.
Когда вы будете готовы создать свое первое приложение с помощью React, ознакомьтесь с руководствами по установке ниже. Эти настройки предназначены для того, чтобы вы могли работать, используя богатый опыт разработчиков и были готовы к продакшену. Они включают в себя встроенный линт, тестирование и оптимизацию, однако для их установки и конфигурации требуется больше времени и места на диске.
1.2.3 Добавить React в новое приложение
На данной странице описывается настройка одностраничного приложения со всем необходимым для удобного процесса разработки, включая линт, тестирование, оптимизацию продакшен и многое другое. Полнофункциональные инструменты, такие как эти, для установки требуют некоторое время и место на диске.
Если вы не создаете одностраничное приложение, вы можете либо добавить React в существующий конвейер сборки, либо использовать его из CDN без стадии сборки.
1.2.3.1 Создание React-приложения
Данный пример не работает с бекенд логикой или базой данных. Он просто создает начальный фронтенд каркас. Так что мы можем использовать его с любой бекенд логикой, которая необходима. Данный пример использует инструменты билда, такие как Babel и webpack, но работает с нулевой конфигурацией. Ее необходимо будет исправить под нужды вашего проекта.
1.2.3.2 Создание React-приложения
Они немного отличаются своим фокусом, но все они готовы к продакшену, хорошо поддерживаются и не требуют настройки для начала работы.
1.2.4 Добавление React в существующее приложение
Нет необходимости переписывать существующее приложение, чтобы начать использовать React. Вместо этого можно добавить React в маленькую часть существующего приложения, например, в какой-нибудь виджет. Таким образом, можно наблюдать за правильностью его работы.
React рекомендуется использовать вместе с инфраструктурой сборки проекта для повышения продуктивности разработки. Типичная современная инфраструктура сборки включает:
1.2.4.1 Установка React
Установив React, рекомендуется выставить production режим построения проекта. Это гарантирует использование быстрой версии React в production-версии проекта.
Для того, чтобы установить React с помощью Yarn, необходимо выполнить следующие команды в командной строке:
Для того, чтобы установить React с помощью npm, необходимо выполнить:
1.2.4.2 Возможность использования ES6 и JSX
Чтобы иметь возможность использовать в JS коде JSX и ES6, рекомендуется использовать Babel. ES6 содержит в себе множество современных JavaScript возможностей, которые упрощают разработку. В свою очередь JSX – это расширение языка JavaScript, которое работает с React и также упрощает разработку на нём.
1.2.4.3 Hello World с ES6 и JSX
Рекомендуется использовать бандлер, такой как webpack или Browserify, чтобы вы могли писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки.
Наименьший пример кода на ReactJS выглядит примерно так:
Таким же образом вы можете отрисовывать React-компонент внутри DOM-элемента где-нибудь внутри существующего приложения, написанного с помощью какой-либо другой JavaScript UI библиотеки.
1.2.4.4 Development и Production версии проекта
По умолчанию React содержит много полезных предупреждений, которые очень помогают в разработке.
Тем не менее, они делают development-версию React-проекта больше и медленнее. Поэтому для развертывания приложения на сервере следует использовать production-версию проекта.
Изучите как узнать использует ли ваше приложение правильную версию React и как сконфигурировать production-сборку наиболее эффективно:
1.2.4.5 Использование CDN
Версии выше подходят только для разработки, но не для production-версии проекта. Минифицированные и оптимизированные production-версии React находятся здесь:
1.2.4.5.1 Что такое crossorigin атрибут?
Если вы подключаете React из CDN, разработчики рекомендуют установить значение атрибута crossorigin :
Также рекомендовано проверить, что используемый вами CDN устанавливает HTTP заголовок Access-Control-Allow-Origin: * :
