React, Babel, and Grunt for .NET Core MVC

React, Babel, and Grunt for .NET Core MVC

Other viable solutions:

  1. ReactJS.net
  2. Webpack

 

Quick Setup

You can simply reference these javascript files for prototyping. It isn’t recommended on production systems because the JSX transformation on every request will affect your site’s performance.

<script type="text/javascript" src="/js/react.min.js"></script>
<script type="text/javascript" src="/js/react-dom.min.js"></script>
<script type="text/javascript" src="/js/babel.min.js"></script>
<!-- Note that the type is text/babel -->
<script type="text/babel" src="/js/main.js"></script>

Build Integration

Install these npm packages

yarn add babel-plugin-transform-react-jsx \
    babel-preset-es2015 \
    babel-preset-react \
    grunt-babel \
    grunt-browserify --dev

You can have your own .babelrc file but I prefer to put the configuration in package.json

{
  ...
  "babel": {
    "plugins": ["transform-react-jsx"] ,
    "presets": ["react", "es2015"]
  }
}

Say you have this React component under the Content/js/src folder

import React from "react";
import ReactDOM from "react-dom";

let Navigation = React.createClass({
    render: function(){
        return (
            <a href={this.props.link}>{this.props.text}</a>
        );
    }
});

ReactDOM.render(
    <div>
        <Navigation link="/" text="Home" />
        <Navigation link="/list" text="List" />
    </div>,
    document.querySelector('header')
);

Add your compile, bundle and minification build steps for Grunt. Below will create compressed/minified and uncompressed files but set up your task with what you think is necessary for your needs.

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    babel: {
            options: {
                sourceMap: false
            },
            jsx: {
                files: [{
                    expand: true,
                    cwd: 'Content/js/src',
                    src: ['*.jsx'],
                    dest: 'Content/js/dist',
                    ext: '.js'
                }]
            }
    },
    browserify: {
            dist: {
                src: ['Content/js/dist/TRANSPILED_JSX.js'],
                dest: 'wwwroot/js/main.js',
            }
    },
    uglify: {
            my_target: {
                files: {
                    'wwwroot/js/main.min.js': [
                            'wwwroot/js/main.js'
                    ]
                }
            }
    },
    ...
}

grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.registerTask('default', ['babel', 'browserify', 'uglify'])

Use the environment tag helper Inside your .NET Core MVC base template to load the packaged javascript file

<environment names="development, staging">
    <script type="text/javascript" src="/js/main.js"></script>
</environment>
<environment names="production">
    <script type="text/javascript" src="/js/main.min.js"></script>
</environment>