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
