Sunday, August 21, 2022

use React in MVC project

 install NuGet packages

React.AspNet
JavaScriptEngineSwitcher.V8
JavaScriptEngineSwitcher.Extensions.MsDependencyInjection

JavaScriptEngineSwitcher.V8.Native.win-x64 [old]
or
Microsoft.ClearScript.V8.Native.win-x64 [new]



Modify Startup.cs 

add

using Microsoft.AspNetCore.Http;
using JavaScriptEngineSwitcher.V8;
using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;
using React.AspNet;


Directly above:

services.AddControllersWithViews();

Add:

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

// Make sure a JS engine is registered, or you will get an error!
services.AddJsEngineSwitcher(options => options.DefaultEngineName = V8JsEngine.EngineName).AddV8();



Directly above:

app.UseStaticFiles();

Add:

// Initialise ReactJS.NET. Must be before static files.
app.UseReact(config =>
{
  // 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:
  //config
  //  .AddScript("~/js/First.jsx")
  //  .AddScript("~/js/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:
  //config

  //  .SetLoadBabel(false)
  //  .AddScriptWithoutTransform("~/js/bundle.server.js");

});

Finally, add this to the top of Views\_ViewImports.cshtml:

@using React.AspNet


No comments: