Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7
В руководстве по React были рассмотрены базовые моменты работы с React.JS, компоненты, их определение, состояние и так далее. В рамках же этой главы в данной же главе рассмотрим непосредственно использование React в приложении на ASP.NET Core.
Итак, создадим новый проект ASP.NET Core. В качестве типа проекта выберем тип Empty:
Первым делом добавим через 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:
Далее добавим в проект папку 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. То есть вся структура проекта будет выглядеть следующим образом:
Определим в файле 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: