I’ve recently been playing around with writing an Asp.Net Core 2 app from scratch. If you’re interested, you can view my exploits here.
I came across an interesting issue, which was that I wanted to search an in memory set of data, and I wanted the screen to update as I searched. React sounds like the perfect tool for this; and this article describes how to integrate a React view (JSX file) into an MVC view.
(Note that it doesn’t cover implementing the search function – that will be the subject of a later post when and if I work out how to do it.)
Set-up
After you’ve created your Asp.Net Core 2 application, the first step is to install React; which is a NuGet package:
Install-Package React.AspNet -Source nuget.org
There are some code tweaks that are needed; the first is in startup.cs (which basically tells Asp to use React, and how to do so):
services.AddTransient< … services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>(); services.AddReact(); services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
app.UseReact(config => { }); app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseCookiePolicy();
You’ll need to slightly change the signature of ConfigureServices, too:
public IServiceProvider ConfigureServices(IServiceCollection services) { . . . return services.BuildServiceProvider(); }
The next thing is to make React available to your views; in ViewImports.cshtml:
@using UsefulSites.Web @using UsefulSites.Web.Models @using UsefulSites.Web.ViewModels @using React.AspNet @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
React Code
Next step is to create the ReactJs file:
class SearchBox extends React.Component { render() { return ( <div className="search-container"> <textarea> Search Text </textarea> </div> ); } } ReactDOM.render( <SearchBox />, document.getElementById('content') );
Then change the HTML file:
<div class="row"> <div class="jumbotron"> <div id="content"></div> <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script> <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="@Url.Content("~/js/search.jsx")"></script> </div>
As you can see, the React script references the div named “content” specifically.