Saturday, February 28, 2015

React JS in ASP.NET MVC part 2—setting up React

Set up the project and libraries for React

Let’s start by creating a new ASP.NET MVC project

Next, we will use NuGet to download the React libraries that we need

Right-click on References and click Manage NuGet Packages

Search for react.js

Install these libraries:

  • react.js
    This contains the JavaScript for the browser
  • ReactJS.NET (MVC 4 and 5)
    This contains the libraries necessary for server-side rendering
  • ReactJS.NET – JSX for ASP.NET Web Optimization Framework
    This contains the library for transforming JSX into plain JavaScript, and then minified and bundled to speed up download
  • ReactJS.NET – ClearScript V8
    V8 is a faster JavaScript engine which we will use to run our React scripts server-side. This is much better than the Jint engine bundled with ReactJS.NET (MVC 4 and 5)

Next, we prepare the minification and bundling for the React JavaScript library.

Include the React JavaScript in our App_Start\BundleConfig.cs

// React JS
// Should not use the official React CDN at //fb.me/, as it redirects to HTTP and breaks HTTPS sites.
bundles.Add(new ScriptBundle("~/js/reactjs", "//cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react-with-addons.min.js")
{
     CdnFallbackExpression = "window.React" }.Include(
     "~/Scripts/react/react-with-addons-{version}.min.js" ));

Include the ~/js/reactjs script bundle in Views\Shared\_Layout.cshtml

<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>@ViewBag.Title - My ASP.NET Application</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
     @Scripts.Render("~/js/reactjs") </head>

Next, we speed up server-side rendering by disabling global members in V8

Replace the jsEngineSwitcher sectionGroup with the following

    <sectionGroup name="jsEngineSwitcher">
      <section name="core" type="JavaScriptEngineSwitcher.Core.Configuration.CoreConfiguration, JavaScriptEngineSwitcher.Core" />
      <section name="msie" type="JavaScriptEngineSwitcher.Msie.Configuration.MsieConfiguration, JavaScriptEngineSwitcher.Msie" />
      <section name="jint" type="JavaScriptEngineSwitcher.Jint.Configuration.JintConfiguration, JavaScriptEngineSwitcher.Jint" />
      <section name="v8" type="JavaScriptEngineSwitcher.V8.Configuration.V8Configuration, JavaScriptEngineSwitcher.V8" />
    </sectionGroup>

Replace the jsEngineSwitcher section in Web.config with the following

  <jsEngineSwitcher xmlns="http://tempuri.org/JavaScriptEngineSwitcher.Configuration.xsd">
    <core>
      <engines>
        <add name="V8JsEngine" type="JavaScriptEngineSwitcher.V8.V8JsEngine, JavaScriptEngineSwitcher.V8" />
        <add name="MsieJsEngine" type="JavaScriptEngineSwitcher.Msie.MsieJsEngine, JavaScriptEngineSwitcher.Msie" />
        <add name="JintJsEngine" type="JavaScriptEngineSwitcher.Jint.JintJsEngine, JavaScriptEngineSwitcher.Jint" />
      </engines>
    </core>
    <v8 enableDebugging="false" debugPort="9222" disableGlobalMembers="true" maxNewSpaceSize="0" maxOldSpaceSize="0" maxExecutableSize="0" />
  </jsEngineSwitcher>

We are ready to start writing our first Hello World in React!

Create the folder Scripts/Home and add a JavaScript File named Index.jsx and paste the following

var HomeIndex = React.createClass({
    render: function() {
        return (<div>Hello world!</div>);
} });

We will also bundle this JSX file in App_Start\BundleConfig.cs

bundles.Add(new JsxBundle("~/js/home/index").Include(
     "~/Scripts/Home/Index.jsx" ));

Next, we need to include the JSX for server-side rendering, by adding the following in App_Start\ReactConfig.cs

// 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:
ReactSiteConfiguration.Configuration
     .AddScript("~/Scripts/Home/Index.jsx");

Replace the contents in Views\Home\Index.cshtml with the following

@{
     ViewBag.Title = "Home Page"; } @Html.React("HomeIndex", new { }, containerId: "homeIndex") @Scripts.Render("~/js/home/index") @Html.ReactInitJavaScript()

Run our application and we have our Hello World!

Next up—making our grid view

6 comments:

Unknown said...

Dude. I get this exception every time I try this:
Could not load file or assembly 'ClearScriptV8-32.DLL' or one of its dependencies. The specified module could not be found.

Jeow Li Huan said...

Take a look at
http://stackoverflow.com/questions/23301851/clearscript-files-cannot-be-found-on-host

You are most likely missing the Visual C++ Redistributable

Anonymous said...

The reference to JsxBundle in the above example needs to be changed to BabelBundle for the project to compile and run.

Giulio said...

The link between MVC and React is unclear: is React's objective somehow similar the ViewBag binding?

Jeow Li Huan said...

I see React as a replacement for HtmlHelpers. The bulk of the code gets moved into jsx, with cshtml setting up the boilerplate for React.NET.

Jean-Paul Thorne said...

Hi there, so any chance of part 3?