Настройка лаборатории для React в Windows

Статья
05/16/2021

Внимание

Поддержка служб лабораторий Azure прекратится 28 июня 2027 г. Дополнительные сведения см. в руководстве по выходу на пенсию.

Примечание.

Эта статья ссылается на функции, доступные в планах лабораторий, которые заменили учетные записи лаборатории.

React — популярная библиотека JavaScript для создания пользовательских интерфейсов. React служит для создания многократно используемых компонентов веб-сайта. Существует множество других популярных библиотек для разработки внешних интерфейсов с применением JavaScript. Мы будем использовать некоторые из этих библиотек при создании лаборатории. Redux — библиотека, которая предоставляет контейнер прогнозируемого состояния для приложений JavaScript и часто используется совместно с React. JSX — расширение синтаксиса библиотеки для JavaScript, которое часто используется вместе с React для описания того, как должен выглядеть пользовательский интерфейс. NodeJS — удобный способ запуска веб-сервера для приложения, использующего React.

В этой статье показано, как установить Visual Studio 2019 для среды разработки, а также средства и библиотеки, необходимые для работы с классом веб-разработки React.

Конфигурация лаборатории

Чтобы настроить эту лабораторию, вам потребуется подписка Azure и план лаборатории для начала работы. Если у вас нет подписки Azure, создайте бесплатную учетную запись, прежде чем приступить к работе.

Параметры плана лаборатории

После получения подписки Azure можно создать новый план лаборатории в Службах лабораторий Azure. Дополнительные сведения о создании нового плана лаборатории см. в руководстве по настройке плана лаборатории. Вы также можете использовать существующий план лаборатории.

Включите параметры плана лаборатории, как описано в следующей таблице. Дополнительные сведения о том, как включить образы из Azure Marketplace, см. в статье Выбор образов Marketplace, доступных для создателей лаборатории.

Настройки учетной записи лаборатории	Instructions
Образ Marketplace	Включите образ "Сообщество Visual Studio 2019 (последняя версия) в Windows Server 2019 (x64)".

Параметры лаборатории

Инструкции по созданию лаборатории см. в руководстве по настройке лаборатории. При создании лаборатории используйте следующие параметры.

Параметр лаборатории	Значение
Размер виртуальной машины	Средний

Мы рекомендуем протестировать рабочие нагрузки, чтобы узнать, не требуется ли больший размер. Дополнительные сведения о каждом размере см. в статье Изменение размера виртуальной машины.

Шаблон конфигурации компьютера

В этом разделе говорится о том, как настраивается шаблон виртуальной машины путем выполнения следующих действий.

Установите инструменты разработки.
Установите расширения отладчика для веб-браузера.
Обновите параметры брандмауэра.

Установка инструментов разработки

В образе "Visual Studio 2019 Community (новейшая версия) в Windows Server 2019 (x64)" уже имеется требуемая Рабочая нагрузка Node.js, установленная для Visual Studio 2019.

Установите нужный веб-браузер. По умолчанию образ включает установленный Internet Explorer.
Перейдите на веб-сайт Node.js и нажмите кнопку Download (Скачать). Можно использовать последнюю версию c долгосрочным обслуживанием (LTS), текущую версию с этими последними функциями или предыдущий выпуск. При установке NodeJS также будет установлен Диспетчер пакетов Node, который будет использоваться для установки React, Redux и JSX.
При необходимости Обновите Visual Studio 2019 до последней версии.

Другие компоненты, необходимые для веб-сайта на базе React, устанавливаются с помощью монитора производительности сети (NPM) в конкретное приложение. Сведения о добавлении пакетов NPM см. в статье Управление пакетами NPM в Visual Studio.

Например, при использовании в проекте интерактивного окна на базе Node.js введите следующие команды, чтобы установить библиотеки React, Redux и JSX.

.npm install react
.npm install react-dom
.npm install react-redux
.npm install react-jsx

Сведения о создании первого приложения на базе Node.js и React в Visual Studio см. в статье Учебник: создание приложения на базе Node.js и React в Visual Studio.

Установка расширений отладчика

Установите расширения инструментов разработчика React, чтобы получить возможность изучать компоненты на базе React и записывать сведения о производительности.

Обновление параметров брандмауэра

По умолчанию входящий трафик сервера Node.js будет заблокирован. Если вы хотите получить доступ к веб-сайту учащегося во время его работы, добавьте правило брандмауэра для входящего трафика, чтобы разрешить трафик. Обратите внимание на свойство проекта Порт приложения, чтобы узнать, какой порт будет использоваться во время отладки. Чтобы разрешить доступ к порту 1337, в приведенном ниже примере используется командлет PowerShell New-NetFirewallRule.

New-NetFirewallRule -DisplayName "Allow access to Port 1337" -Direction Inbound -LocalPort 1337 -Protocol TCP -Action Allow

Внимание

Преподаватели должны использовать шаблон виртуальной машины или другую виртуальную машину лаборатории для доступа к веб-сайту учащегося.

Следующие шаги

Теперь образ шаблона можно опубликовать в лаборатории. Дополнительные сведения см. в статье "Публикация виртуальной машины шаблона".

Ознакомьтесь со следующими статьями, связанными с настройкой лаборатории:

Поделиться через