ReactJS.NET

Getting Started

Tutorials

Features

Bundling

Development

Getting Started (ASP.NET Core)

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

For new projects: #

dotnet new -i React.Template
dotnet new reactnet-vanilla
dotnet run

Heads up! This configuration only supports globally-scoped modules. If you're planning on using require or import module syntax in your application, use the reactnet-webpack template instead for webpack support. #

For existing projects: #

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 at least Visual Studio 2015 and ASP.NET Core 1.0, but has also been tested with VS 2017 and .NET Core 2.1.

Install the React.AspNet package through NuGet. You will also need to install a JS engine to use (either V8 or ChakraCore are recommended) and JavaScriptEngineSwitcher.Extensions.MsDependencyInjection package. 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.ChakraCore;
using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;
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("~/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("~/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 at the end of the page:

<script src="~/Content/Sample.jsx"></script>
@Html.ReactInitJavaScript();

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 Linux/macOS guide

Check out the sample project for a working demo.

Comments