/HybridReactRazor

Setting up the hybrid structure of MVC and React.JS

Primary LanguageC#MIT LicenseMIT

HybridReactRazor

Setting up hybrid structure of MVC and ReactJS

I used the babel and webpack manually (without using create-react-app)

I installed NPM packages to enable latest JavaScript and React syntax:

  • @babel/preset-env – enables latest JavaScript syntax
  • @babel/preset-react – adds support for React syntax
  • @babel/plugin-proposal-class-properties – adds support for an instance and/or static member declarations in JavaScript classes.
  • babel-loader – Webpack loader for babel
  • browser-sync & browser-sync-webpack-plugin – sync’ing browser upon code change
  • webpack & webpack-cli – for running Webpack
  • webpack-notifier – Shows pretty webpack notification
  • react & react-dom – React library

To enable browser-sync, you need copy a script generated by browser-sync message in _Layout.cshtml under Shared folder near end of body tag.