React-hot-loader Records

1.

NPM Install--save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2

2.

NPM Install--save-dev react-hot-loader@3.0.0-beta.6
or
npm install--save-dev react-hot-loader@next

3.

. BABELRC configuration


{
  "presets": [
    ["es2015", {"modules": false}],
       //Webpack now supports native import statements, and use it in the tree-shaking characteristics
    of the "stage-2",
      //Set the language standard JS application level
      //Stage 2 is "Draft", 4 is "completed", 0 is "Scarecrow (strawman)".
      //Details View https://tc39.github.io/process-document/
    "react"
      //Translator react Component JS code
  ],
  "plugins": [
    "React-hot-loader/babel"
      //Open module hot swap for react code (HMR)
  ]
}

4.

Config configuration:


const {Resolve} = require (' path ');
Const WEBPACK = require (' Webpack ');
Module.exports = {
  context: __dirname,
  entry:  [
    ' React-hot-loader/patch ',
    ' webpack/hot/ Only-dev-server ',
    './app/main.js '
  ],
  output: {
    path:resolve (__dirname, ' build '),//Where the packaged file is stored
    filename: "Bundle.js",//after packaging the file name
    Publicpath: "/"
  },
  devserver: {
    contentbase:resolve (__dirname, ' build '),
    hot:true,
    publicpath: '/'
  },
  module: {
    rules: [
      {
        test:/\ . jsx?$/, use
        : [
          ' Babel-loader ',
        ],
        exclude:/node_modules/
      },
    ],
  },
  Plugins: [
    new Webpack. Hotmodulereplacementplugin (),
    new Webpack. Namedmodulesplugin (),
  ],
  devtool: "Cheap-eval-source-map",
};

5.

 ingress file configuration: import {Appcontainer} from ' React-hot-loader ' import Redbox from ' redbox-react ' const Render = (Component) = {Reactdom.render (<appcontainer errorreporter={redbox}> <component/>
    ;
</appcontainer>, Document.queryselector (' #odiv ')};

Render (APP);

if (module.hot) {module.hot.accept ('./app ', () = {render (APP)});}
or const Oele = document.queryselector (' #odiv ');  Render (<appcontainer errorreporter={redbox}> <app/> </appcontainer>, Oele) if (module.hot)
    {module.hot.accept ('./app ', () = = {Const NEXTAPP = require ('./app '). Default; Render (<appcontainer errorreporter={redbox}> <nextapp/> </appcontainer>, oEl
e)}); }