Getting Started (ASP.NET Core)

Just want to see the code? Check out the sample project.

This guide covers enabling server-side rendering and Babel compilation. Getting started with ReactJS.NET on ASP.NET Core requires a few more steps compared to previous versions of ASP.NET and MVC. If you want a step-by-step guide on configuring a brand new site, see the ReactJS.NET tutorial for ASP.NET Core.

ReactJS.NET requires Visual Studio 2015 and ASP.NET Core RTM (final release). It is recommended to use .NET Framework, but ReactJS.NET also works with .NET Core.

Install the React.AspNet package through NuGet. You will also need to install a JS engine to use (either V8 or ChakraCore are recommended). See the JSEngineSwitcher docs for more information. After these packages are installed, ReactJS.NET needs to be initialised in your Startup.cs file (unfortunately this can not be done automatically like in previous versions of ASP.NET with WebActivator).

At the top of Startup.cs, add:

using Microsoft.AspNetCore.Http;
using JavaScriptEngineSwitcher.Core;
using JavaScriptEngineSwitcher.ChakraCore;
using React.AspNet;

Directly above:

// Add framework services.
services.AddMvc();

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 = ChakraCoreJsEngine.EngineName)
  .AddChakraCore();

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("~/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:
  //config
  //    .SetLoadBabel(false)
  //    .AddScriptWithoutTransform("~/Scripts/bundle.server.js");
});

Finally, add this to Views\_ViewImports.cshtml (or create it if it doesn't exist):

@using React.AspNet

Reference JSX files directly in script tags:

<script src="~/Content/Sample.jsx"></script>

You're done! You can now call Html.React from within Razor files:

@Html.React("Sample", new { initialComments = Model.Comments, page = Model.Page })

If you need support for non-Windows platforms, please see the ChakraCore guide.

Check out the sample project for a working demo.

Comments