React.JS

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

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

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

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

Итак, создадим новый проект ASP.NET Core. В качестве типа проекта выберем тип Empty:

Создание проекта ASP.NET Core для работы с React JS

Первым делом добавим через Nuget необходимые для работы с React пакеты:

  • React.AspNet

  • JavaScriptEngineSwitcher.Extensions.MsDependencyInjection

  • JavaScriptEngineSwitcher.ChakraCore

  • JavaScriptEngineSwitcher.ChakraCore.Native.win-x64

  • JavaScriptEngineSwitcher.ChakraCore.Native.win-x86

  • JavaScriptEngineSwitcher.ChakraCore.Native.osx-x64

  • JavaScriptEngineSwitcher.ChakraCore.Native.linux-x64

Первый пакет представляет библиотеку ReactJS.NET, которая позволяет связать react и инфраструктуру .NET. Остальные пакеты необходимы для работы движка ChakraCore:

Установка React.AspNet Установка React для ASP.NET Core

Далее добавим в проект папку wwwroot для хранения статических файлов. Затем добавим эту папку новый файл index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello React</title>
</head>
<body>
    <div id="content"></div>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.development.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.development.js"></script>
    <script src="js/app.jsx"></script>
</body>
</html>

Здесь определен элемент div, в который будет загружаться компоненты React, а также подключаются из cdn библиотеки самого React.JS и файл app.jsx, который мы далее создадим.

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

Структура проекта React в ASP.NET Core

Определим в файле 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".

И в конце изменим конфигурацию в классе Startup:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using React.AspNet;
using JavaScriptEngineSwitcher.ChakraCore;
using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;

namespace ReactApp
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMemoryCache();
            services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
            services.AddReact();
            services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName).AddChakraCore();
        }

        public void Configure(IApplicationBuilder app)
        {
            app.UseDeveloperExceptionPage();

            app.UseReact(config => { });
            app.UseDefaultFiles();
            app.UseStaticFiles();
        }
    }
}

Чтобы задействовать ReactJS.NET в сервисы приложения добавляется соответствующий сервис:

services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
services.AddReact();

Кроме того, добавляется сервис JsEngineSwitcher, который позволяет задействовать определенный движок JS - в данном случае ChakraCora.

services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName).AddChakraCore();

Затем в методе Configure вызываются сервисы React:

app.UseReact(config => { });

Запустим проект и обратимся к главной странице index.html:

Используем React JS в ASP.NET Core

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

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