Создание приложения React

Статья
01/13/2024

В рамках этого краткого (на 5–10 минут) знакомства с возможностями интегрированной среды разработки (IDE) Visual Studio вы создадите и запустите простое внешнее веб-приложение React.

Необходимые компоненты

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

Visual Studio 2022 или более поздней версии. Перейдите на страницу скачиваемых материалов Visual Studio, чтобы установить ее бесплатно.
npm (https://www.npmjs.com/), который входит в состав Node.js
npx (https://www.npmjs.com/package/npx).

Создание своего приложения

В окне запуска (чтобы открыть его, щелкните Файл>Окно запуска) выберите Создание нового проекта.
Найдите React в строке поиска в верхней части, а затем выберите автономный проект JavaScript React или автономный проект TypeScript React в соответствии с вашими предпочтениями.
Присвойте имена проекту и решению.

Если вы ранее выбрали автономный шаблон JavaScript React, когда откроется окно "Дополнительные сведения", НЕ устанавливайте флажок Добавить интеграцию для пустого проекта веб-API ASP.NET. Этот параметр добавляет файлы в шаблон React, чтобы позже его можно было связать с проектом ASP.NET Core, если проект ASP.NET Core был добавлен.
Нажмите кнопку "Создать", а затем дождитесь создания проекта в Visual Studio.

Обратите внимание, что создание проекта React занимает некоторое время, так как команда create-react-app, которая выполняется в это время, также выполняет команду установки npm.

Просмотр свойств проекта

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

Примечание.

Файл launch.json хранит параметры запуска, связанные с кнопкой Запуск на панели инструментов отладки. В настоящее время файл launch.json должен находиться в папке .vscode.

Сборка проекта

Выберите Сборка>Собрать решение, чтобы собрать проект.

Запуск проекта

Нажмите клавишу F5 или нажмите кнопку "Пуск" в верхней части окна, и вы увидите командную строку, например:

VITE версии 4.4.9 готов в 780 мс

Примечание.

Проверьте наличие в консоли сообщений, например сообщения с указанием обновить версию Node.js.

После этого откроется базовое приложение React!

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

Интеграция ASP.NET Core

Создание приложения ASP.NET Core с помощью React