Использование React с ASP.NET Core

  • Статья

Примечание.

Это не последняя версия этой статьи. В текущем выпуске см . версию .NET 8 этой статьи.

Предупреждение

Эта версия ASP.NET Core больше не поддерживается. Дополнительные сведения см. в статье о политике поддержки .NET и .NET Core. В текущем выпуске см . версию .NET 8 этой статьи.

Внимание

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

В текущем выпуске см . версию .NET 8 этой статьи.

Visual Studio предоставляет шаблоны проектов для создания одностраничных приложений (SPAs) на основе платформ JavaScript, таких как Angular, React и Vue с серверной частью ASP.NET Core. Эти шаблоны:

  • Создайте решение Visual Studio с интерфейсным проектом и серверным проектом.
  • Используйте тип проекта Visual Studio для JavaScript и TypeScript (esproj) для внешнего интерфейса.
  • Используйте проект ASP.NET Core для серверной части.

Проекты, созданные с помощью шаблонов Visual Studio, можно запускать из командной строки в Windows, Linux и macOS. Чтобы запустить приложение, используйте dotnet run --launch-profile https для запуска проекта сервера. Запуск проекта сервера автоматически запускает внешний сервер разработки JavaScript. Сейчас https требуется профиль запуска.

Руководство по Visual Studio

Чтобы приступить к работе, следуйте инструкциям по созданию приложения ASP.NET Core с помощью React в документации по Visual Studio.

Дополнительные сведения см. в статье JavaScript и TypeScript в Visual Studio

ASP.NET основные шаблоны SPA

Visual Studio включает шаблоны для создания приложений ASP.NET Core с интерфейсом JavaScript или TypeScript. Эти шаблоны доступны в Visual Studio 2022 версии 17.8 или более поздней версии с установленной рабочей нагрузкой ASP.NET и веб-разработки .

Шаблоны Visual Studio для создания приложений ASP.NET Core с интерфейсом JavaScript или TypeScript предоставляют следующие преимущества:

  • Очистка разделения проектов для внешнего интерфейса и серверной части.
  • Будьте в курсе последних версий интерфейсной платформы.
  • Интеграция с новейшими средствами командной строки интерфейсной платформы, такими как Vite.
  • Шаблоны для JavaScript и TypeScript (только TypeScript для Angular).
  • Расширенные возможности редактирования кода JavaScript и TypeScript.
  • Интеграция средств сборки JavaScript с сборкой .NET.
  • Пользовательский интерфейс управления зависимостями npm.
  • Совместим с отладкой и запуском Visual Studio Code.
  • Запустите интерфейсные модульные тесты в обозревателе тестов с помощью платформ тестирования JavaScript.

Устаревшие шаблоны spa ASP.NET Core

В более ранних версиях пакета SDK для .NET добавлены устаревшие шаблоны для создания приложений SPA с ASP.NET Core. Документация по этим старым шаблонам см. в статье ASP.NET Core 7.0 обзора SPA и статьи Angular и React .

Шаблон проекта ASP.NET Core с React служит удобной отправной точкой для создания приложений ASP.NET Core с использованием React и Create React App (CRA), позволяющих реализовать многофункциональный пользовательский интерфейс на стороне клиента.

Шаблон проекта является эквивалентом созданию проекта ASP.NET Core в качестве веб-API и проекта CRA React в качестве пользовательского интерфейса. Это позволяет легко разместить оба проекта в одном проекте ASP.NET Core, который можно создать и опубликовать как единое целое.

Шаблон проекта не предназначен для серверной обработки. Для SSR с React и Node.js, рассмотрим следующееjs . Или Razzle.

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

Создайте из командной строки новый проект в пустом каталоге с помощью команды dotnet new react. Например, следующие команды создают приложение в каталоге my-new-app и переключаются в этот каталог:

dotnet new react -o my-new-app
cd my-new-app

Запустите приложение из Visual Studio или .NET CLI:

Откройте созданный .csproj файл и запустите приложение как обычно.

В процессе сборки при первом запуске восстанавливаются зависимости npm. Это может занять несколько минут. Использование последующих сборок может сэкономить много времени.

На основе шаблона проекта будут созданы приложения ASP.NET Core и React. Приложение ASP.NET Core выполняет такие функции, как получение доступа к данным, авторизация и другие процессы на стороне сервера. Приложение React, размещенное в ClientApp подкаталоге, предназначено для всех проблем пользовательского интерфейса.

Например, добавление страниц, изображений, стилей, модулей, и т. д

Каталог ClientApp — это стандартное приложение CRA React. Дополнительные сведения можно найти в документации по CRA.

Создаваемое с помощью этого шаблона приложение React немного отличается от создаваемого с помощью платформы CRA, но все возможности этих приложений полностью идентичны. Приложение, созданное с помощью шаблона, содержит основанный на Bootstrap макет и простой пример маршрутизации.

Установка пакетов npm

Чтобы установить сторонние пакеты npm, используйте командную строку в подкаталоге ClientApp . Например:

cd ClientApp
npm install <package_name>

Публикация и развертывание

В процессе разработки работа приложения оптимизируется для удобства разработчиков. Например, пакеты JavaScript содержат сопоставления исходного кода (чтобы при отладке можно было проверить исходный код). Приложение отслеживает изменения в файлах JavaScript, HTML и CSS на диске. Когда эти файлы меняются, оно автоматически их повторно компилирует и перезагружает.

На рабочем этапе используйте версию приложения, оптимизированную для производительности. На нее уже настроено автоматическое переключение. При публикации конфигурация сборки выполняет транскомпиляцию уменьшенной версии клиентского кода. В отличие от сборки разработки, для рабочей сборки не требуется узел.js для установки на сервере.

Можно использовать стандартные методы размещения и развертывания ASP.NET Core.

Автономный запуск сервера CRA

Проект настроен таким образом, что при запуске приложения ASP.NET Core в режиме разработки в фоновом режиме автоматически создается собственный экземпляр сервера разработки CRA. Это удобно, так как нет необходимости вручную запускать отдельный сервер.

Но у этого стандартного режима есть важный недостаток. Сервер CRA перезапускается каждый раз, когда изменяется код на C# и возникает необходимость перезапустить приложение ASP.NET Core. Для создания резервной копии требуется несколько секунд. Если вы часто изменяете код C# и не хотите ждать, пока перезапустится сервер CRA, то используйте внешний сервер CRA, который не зависит от процесса ASP.NET Core.

Чтобы отдельно запустить сервер CRA, переключитесь на подкаталог ClientApp в командной строке и запустите сервер разработки CRA:

cd ClientApp
npm start

Теперь приложение ASP.NET Core не будет создавать при запуске сервер CRA. Вместо него будет использоваться экземпляр, запускаемый вручную. Это позволит быстрее запускать и перезапускать приложение. Вам не придется каждый раз ожидать перестроения приложения React.

Настройка промежуточного слоя прокси-сервера для SignalR

Дополнительные сведения см. по адресу http-proxy-middleware.

Дополнительные ресурсы

Обновленный шаблон проекта React служит удобной отправной точкой для создания приложений ASP.NET Core на основе конвенций React и create-react-app (CRA), позволяющих реализовать многофункциональный пользовательский интерфейс (UI) на стороне клиента.

Применение этого шаблона эквивалентно одновременному созданию проекта ASP.NET Core в качестве внутреннего API и стандартного проекта CRA в качестве интерфейса пользователя. Но шаблон удобнее тем, что оба интерфейса размещаются в одном проекте приложения, который можно компилировать и публиковать как единое целое.

Шаблон проекта React не предназначен для отрисовки на стороне сервера (SSR). Для SSR с React и Node.js, рассмотрим следующееjs . Или Razzle.

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

Создайте из командной строки новый проект в пустом каталоге с помощью команды dotnet new react. Например, следующие команды создают приложение в каталоге my-new-app и переключаются в этот каталог:

dotnet new react -o my-new-app
cd my-new-app

Запустите приложение из Visual Studio или .NET CLI:

Откройте созданный .csproj файл и запустите приложение как обычно.

В процессе сборки при первом запуске восстанавливаются зависимости npm. Это может занять несколько минут. Использование последующих сборок может сэкономить много времени.

На основе шаблона проекта будут созданы приложения ASP.NET Core и React. Приложение ASP.NET Core выполняет такие функции, как получение доступа к данным, авторизация и другие процессы на стороне сервера. Приложение React, размещенное в ClientApp подкаталоге, предназначено для всех проблем пользовательского интерфейса.

Например, добавление страниц, изображений, стилей, модулей, и т. д

Каталог ClientApp — это стандартное приложение CRA React. Дополнительные сведения можно найти в документации по CRA.

Создаваемое с помощью этого шаблона приложение React немного отличается от создаваемого с помощью платформы CRA, но все возможности этих приложений полностью идентичны. Приложение, созданное с помощью шаблона, содержит основанный на Bootstrap макет и простой пример маршрутизации.

Установка пакетов npm

Чтобы установить сторонние пакеты npm, используйте командную строку в подкаталоге ClientApp . Например:

cd ClientApp
npm install --save <package_name>

Публикация и развертывание

В процессе разработки работа приложения оптимизируется для удобства разработчиков. Например, пакеты JavaScript содержат сопоставления исходного кода (чтобы при отладке можно было проверить исходный код). Приложение отслеживает изменения в файлах JavaScript, HTML и CSS на диске. Когда эти файлы меняются, оно автоматически их повторно компилирует и перезагружает.

На рабочем этапе используйте версию приложения, оптимизированную для производительности. На нее уже настроено автоматическое переключение. При публикации конфигурация сборки выполняет транскомпиляцию уменьшенной версии клиентского кода. В отличие от сборки разработки, для рабочей сборки не требуется узел.js для установки на сервере.

Можно использовать стандартные методы размещения и развертывания ASP.NET Core.

Автономный запуск сервера CRA

Проект настроен таким образом, что при запуске приложения ASP.NET Core в режиме разработки в фоновом режиме автоматически создается собственный экземпляр сервера разработки CRA. Это удобно, так как нет необходимости вручную запускать отдельный сервер.

Но у этого стандартного режима есть важный недостаток. Сервер CRA перезапускается каждый раз, когда изменяется код на C# и возникает необходимость перезапустить приложение ASP.NET Core. Для создания резервной копии требуется несколько секунд. Если вы часто изменяете код C# и не хотите ждать, пока перезапустится сервер CRA, то используйте внешний сервер CRA, который не зависит от процесса ASP.NET Core. Для этого:

  1. .env Добавьте файл в ClientApp подкаталог со следующим параметром:

    BROWSER=none

    В результате веб-браузер не будет открываться при внешнем запуске сервера CRA.

  2. В командной строке перейдите в ClientApp подкаталог и запустите сервер разработки CRA:

    cd ClientApp
npm start

  3. Измените настройки приложения ASP.NET Core, чтобы оно использовало внешний экземпляр сервера CRA вместо своего встроенного экземпляра. В классе Startup замените вызов spa.UseReactDevelopmentServer следующим кодом:

    spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");

Теперь приложение ASP.NET Core не будет создавать при запуске сервер CRA. Вместо него будет использоваться экземпляр, запускаемый вручную. Это позволит быстрее запускать и перезапускать приложение. Вам не придется каждый раз ожидать перестроения приложения React.

Внимание

Этот шаблон не поддерживает отрисовку на стороне сервера. Его цель — обеспечить те же возможности, что и create-react-app. Поэтому сценарии и возможности, не включенные в проект create-react-app (в том числе SSR), не поддерживаются. Пользователь может реализовать их самостоятельно в качестве упражнения.

Настройка промежуточного слоя прокси-сервера для SignalR

Дополнительные сведения см. по адресу http-proxy-middleware.

Дополнительные ресурсы