Интегрируйте компоненты React в существующее приложение NET Core

Question

У меня есть существующая сборка приложения с. Net Core Framework. Я хотел бы интегрировать компоненты React для целей повторного использования, которые на данный момент будут определяться только приложением c. Я прошел через множество "Hallo World !!" руководств, но это не удовлетворило мою потребность. Я также посмотрел на reactjs. net, но это также не поможет мне, поскольку компоненты отображаются в представлении

Сценарий

Приложение имеет множество модальных окон с формой, которая отображается на множестве страниц. В настоящее время обрабатывается JavaScript. Код JavaScript многократно дублируется для достижения этой цели.

Цель

Хотелось бы иметь компонент реагирования для замены вышеупомянутой функции, чтобы уменьшить дублирование кода.

Проблема, с которой я столкнулся, заключается в том, что я не уверен, как я смогу взаимодействовать с компонентом с точки зрения jQuery / JavaScript.

Пример

У меня есть DataTable , и одно из действий - щелкнуть определенную кнопку для отображения модального окна. Код находится в отдельном файле . js, поэтому он отделен от View . Итак, в этом случае, если я нажму кнопку, я хотел бы отобразить компонент реакции. Мне нужно будет передать реквизиты компонентам, и именно здесь я не уверен, как бы я с этим справился: - (

Любые предложения или рекомендации будут оценены.

Заранее спасибо

Answer 1

Использование response в Asp. Net Базовое приложение очень просто. Сначала вам нужно знать, что ваш бэкэнд будет основан на API для взаимодействия с React. Поэтому, если вы не настроили свое приложение Core на основе API, это не сработает. Также убедитесь, что вы установили nodeJs и другие зависимости.

Чтобы начать работу с React, создайте новую папку в вашем решении проекта Asp. Net.

Откройте папку в командной строке и выполните:

npx create-response-app [ваша - папка - имя]

Чтобы просмотреть созданное приложение, запустите

npm start

Чтобы начать работу с asp. net, вам нужно добавить зависимости спа в свой проект.

Тогда у вас есть чтобы настроить метод ConfigureService, чтобы он включал:

services.AddSpaStaticFiles(configuration  => { configuration.RootPath  =  "[your--folder--name]/build"; });

Наконец, настройте метод Configure, чтобы он включал:

app.UseSpaStaticFiles();    
app.UseRouting();    
app.UseEndpoints( ... );    
app.UseSpa(spa => {        
    spa.Options.SourcePath = "[your--folder--name]";        
    if (env.IsDevelopment()) {            
        spa.UseReactDevelopmentServer(npmScript: "start");
    }    
});