ReactJS.NET

Getting Started

Tutorials

Features

Bundling

Development

Bundling and Minification (ASP.NET 4.x)

Note:

This guide applies only to ASP.NET 4.x. Please consider using webpack if possible.

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

ReactJS.NET supports the use of Microsoft's ASP.NET Bundling and Minification library to transform JavaScript via Babel, and minify it along with all your other JavaScript. Simply create a BabelBundle containing any number of JSX or regular JavaScript files:

// In BundleConfig.cs
bundles.Add(new BabelBundle("~/bundles/main").Include(
    // Add your JSX files here
    "~/Content/HelloWorld.react.jsx",
    "~/Content/AnythingElse.react.jsx",
    // You can include regular JavaScript files in the bundle too
    "~/Content/ajax.js",
));

BabelBundle will compile your JSX to JavaScript and then minify it. For more control (eg. if you want to run other transforms as well), you can use BabelTransform directly:

// In BundleConfig.cs
bundles.Add(new Bundle("~/bundles/main", new IBundleTransform[]
{
    // This works the same as BabelBundle (transform then minify) but you could
    //add your own transforms as well.
    new BabelTransform(),
    new JsMinify(),
}).Include(
    "~/Content/HelloWorld.react.jsx"
));

Note that debug mode should be set to false in your Web.config file for this to work.

// Web.config
  <system.web>
    <compilation debug="false" targetFramework="4.x" />
  </system.web>

Comments