Develop ASP.NET Core with React

Open a new command prompt window and navigate to the folder that has your C#project file (.csproj file). Before we install Webpack, let us first create a package.json file. The package.json file holds metadata information and is used to give information to npm about a project’s (module)dependencies. To create a “default” package.json file, type the “npm init” command:

npm init -y

The “-y” option uses default options.

If the command was successful, it should have created a package.json file with contents similar to this:

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
  }

To now install Webpack (which is also a “module”), type the following command:

npm install webpack -D

If the command ran successfully, it should have created a new folder named “node_modules” in your project folder and downloaded several modules into this folder (into various folders), of course including the Webpack package as well. 

Instead of a run-time dependency, the “ — save-dev” option adds a “dev dependency” to the package.json file. This indicates that the Webpack package is only useful during development. That would make sense, as once we have created the “bundles” as we require, we would use them directly in production. The package.json file should look similar to this:

{
 "name": "demo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 },
 "devDependencies": {
  "webpack": "^4.46.0",
 }
}

Create the webpack.config.js file in the root folder with this code:

const path = require(‘path’);
module.exports = {
 mode: ‘development’,
 entry: ‘./wwwroot/source/app.js’,
 output: {
 path: path.resolve(__dirname, ‘wwwroot/dist’),
 filename: ‘bundle.js’
 }
};

As you can see above, we are giving Webpack the entry point, which is our app.js file. As well as telling it where to output the bundled file.

Babel is a transpiler. The transpiler transforms ES6 code to use ES5 syntax that older browsers can understand. While Babel itself is very feature-rich and can be used independently, for our purposes, we can use the corresponding babel “loaders” to do the job.

Before we can use any loaders, we need first to install them. For our purpose, we will have to install the relevant babel loaders. Use the following command to install the babel loaders and the “presets”.

npm install "babel-loader" @babel/core @babel/preset-env --save-dev

If the command ran successfully, these loaders would be installed in the node_modules folder and the package.json would be modified.

Update webpack with Babel using the next code 

module: {
rules: [
  {
    test: /\.js$/,
    exclude: /(node_modules)/,
    use: {
      loader: ‘babel-loader’,
      options: {
        presets: [‘@babel/preset-env’]
        }
      }
    }
  ]
}

Install React:

npm install react react-dom --save-dev

Install the Babel preset to process React JSX code:

npm install @babel/preset-react --save-dev

Add the React preset to Babel. It will convert React (JSX) code to raw JavaScript:

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }
      }
    ]
  }