React.JS

Подключение React в ASP.NET MVC 5

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 06.03.2019

В рамках руководства по React были рассмотрены основные моменты работы с библиотекой, в данной же главе рассмотрим, как применять React в связке с ASP.NET MVC 5, особенности работы именно с ASP.NET. Для работы с React в рамках ASP.NET MVC 5 нам потребуется библиотека ReactJS.NET.

Итак, создадим новый проект ASP.NET MVC 5 без аутентификации. Прежде всего добавим в него все необходимые пакеты. Для этого перейдем к пакетному менеджеру Nuget и через него установим пакет React.Web.Mvc4:

Установка ReactJS в ASP.NET MVC 5

Вместе с этоим пакетом автоматически будет установлен и ряд других пакетов, таких как React.Core и React.Web. Причем неважно, что там стоит цифра 4 - React.Web.Mvc4, данный пакет подходит и для MVC 4, и для MVC 5.

Также необходимо установить какой-нибудь JS-движок (рекомендуется использовать V8 или ChakraCore). Например, используем движок V8. Для этого нам также надо установить через Nuget следующие пакеты:

  • JavaScriptEngineSwitcher.V8

  • JavaScriptEngineSwitcher.V8.Native.win-x64

  • JavaScriptEngineSwitcher.V8.Native.win-x86

React и JavaScriptEngineSwitcher.V8 в ASP.NET MVC 5

После установки пакетов, зарегистрируем движок. Для этого перейдем к файлу ReactConfig.cs в папке App_Start (этот файл генерируется в проекте автоматически при установки пакета React.Web.Mvc4). По умолчанию данный файл выглядит примерно следующим образом:

using React;

[assembly: WebActivatorEx.PreApplicationStartMethod(typeof(ReactApp.ReactConfig), "Configure")]

namespace ReactApp
{
	public static class ReactConfig
	{
		public static void Configure()
		{
			// If you want to use server-side rendering of React components, 
			// add all the necessary JavaScript files here. This includes 
			// your components as well as all of their dependencies.
			// See http://reactjs.net/ for more information. Example:
			//ReactSiteConfiguration.Configuration
			//	.AddScript("~/Scripts/First.jsx")
			//	.AddScript("~/Scripts/Second.jsx");
			
			// If you use an external build too (for example, Babel, Webpack,
			// Browserify or Gulp), you can improve performance by disabling 
			// ReactJS.NET's version of Babel and loading the pre-transpiled 
			// scripts. Example:
			//ReactSiteConfiguration.Configuration
			//	.SetLoadBabel(false)
			//	.AddScriptWithoutTransform("~/Scripts/bundle.server.js")
		}
	}
}

Изменим его содержимое следующим образом:

using React;
using JavaScriptEngineSwitcher.Core;
using JavaScriptEngineSwitcher.V8;

[assembly: WebActivatorEx.PreApplicationStartMethod(typeof(ReactApp.ReactConfig), "Configure")]

namespace ReactApp
{
	public static class ReactConfig
	{
		public static void Configure()
		{
            // Регистрация движка V8
            JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
            JsEngineSwitcher.Current.EngineFactories.AddV8();
        }
	}
}

В данном случае мы зарегистрировали движок V8.

Теперь добавим в проект в папку Scripts, которая предназначена для скриптов js, новый файл app.jsx:

JSX и ReactJS в Visual Studio 2019

Определим в файле app.jsx следующее содержимое:

class Hello extends React.Component {
  render() {
    return <h1>Привет, React.JS</h1>;
  }
}
ReactDOM.render(
  <Hello />,
  document.getElementById("content")
);

Здесь определен компонент Hello, который выводит заголовок. Для определения компонента применяется код JSX. Подробнее про создание компонентов и прочие особенности работы с React можно посмотреть в соответствующем руководстве.

А метод ReactDOM.render загружает компонент на веб-страницу в элемент с id="content".

Теперь создадим саму веб-страницу. Для этого возьмем представление Index.cshtml, которое создается по умолчанию в папке Views/Home. Изменим код этого представления следующим образом:

@{
    Layout = null;
}
<html>
<head>
    <title>Hello React</title>
</head>
<body>
    <div id="content"></div>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <script src='@Url.Content("~/Scripts/app.jsx")'></script>
</body>
</html>

Поскольку браузеры не воспринимает код JSX, кроме того не все функциональные возможности стандарта ES2015 поддерживаются браузерами, то для генерации из кода JSX стандартного кода JavaScript, который понятен браузерам, в представлении подключаются две библиотеки из cdn:

<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js"></script>

Кроме того, здесь определен элемент div c id="content", в котором будет визуализироваться код компонента. И в конце подключается сам файл app.jsx.

Запустим приложение на выполнение:

React в ASP.NET MVC 5

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850