skip to main | skip to sidebar

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

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

Replace the jsEngineSwitcher section in Web.config with the following

 <jsEngineSwitcherxmlns="http://tempuri.org/JavaScriptEngineSwitcher.Configuration.xsd">
  <core>
   <engines>
    <addname="V8JsEngine"type="JavaScriptEngineSwitcher.V8.V8JsEngine, JavaScriptEngineSwitcher.V8" />
    <addname="MsieJsEngine"type="JavaScriptEngineSwitcher.Msie.MsieJsEngine, JavaScriptEngineSwitcher.Msie" />
    <addname="JintJsEngine"type="JavaScriptEngineSwitcher.Jint.JintJsEngine, JavaScriptEngineSwitcher.Jint" />
   </engines>
  </core>
  <v8enableDebugging="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

AltStyle によって変換されたページ (->オリジナル) /

Thursday, February 26, 2015

React JS in ASP.NET MVC part 1—why Isomorphic JavaScript?

The conflict of rich web application and search engine optimization

Be it Gmail, Facebook or Github, we have come to expect interactivity without having to wait for a full page reload. Specifically, these web applications are single-page applications (SPA), where new content arising from interactions are sent and retrieved via AJAX.
There are many frameworks to make developing SPA easier. AngularJS, EmberJS and KnockoutJS comes to mind. However, these traditional frameworks only address one part of the equation—the browser side. The server side spits out the HTML template and data separately, causing search engines not to be able to index the page properly, for the HTML template contains no information worthy of mention in a search query. There is thus the need for additional effort to develop a classic version of the SPA in order to optimize for search engine.
Can we cut the additional effort and run our browser side SPA code on the server side too? That would generate the classic version straight away!

React comes to the rescue

React does exactly that!
React, Meteor and several other Isomorphic JavaScript frameworks arise to make it easy to have rich single-page applications, while generating SEO friendly pages. What’s more, the initial blank or placeholder page that appears before data is loaded is gone, since the template with data is already rendered at the server side.
With some additional care to place HTML forms and submit buttons and intercepting them to do AJAX, the rich web application can still function even with JavaScript turn off. Talk about progressive enhancement and graceful degradation!

In part 2, set up the React libraries

Saturday, February 07, 2015

Get an extra 5GB of storage for Copy when you use this link!

My 25 GB of Dropbox space earned from Space Race is expiring in a month! I'll be left with a meagre 2.5 GB only. ::sob::

Luckily, there's a Dropbox competitor, Copy, offering 15 GB of base storage. What's more, if you use the referral link below, both you and I will get an additional 5GB! That's a lot, especially when Dropbox only gives 10% of that per referral.

Get your 20GB NOW
https://copy.com?r=QPkByG
Subscribe to: Posts (Atom)