How to use react-hot-loader - 10 common examples

import { hot as namedHot2 } from 'react-hot-loader'
import { hot as notRHLHot } from 'not-react-hot-loader'
import * as RHL from 'react-hot-loader'
import * as RHL2 from 'react-hot-loader'
import * as NOTRHL from 'not-react-hot-loader'

const App = () =&gt; <div>Hello World!</div>

const a = hot(module)(App);
const z = rootHot(App);
const b = namedHot(module)(App);
const c = namedHot2(module)(App);
const d = RHL.hot(module)(App);
const e = RHL2.hot(module)(App);

foo(module)(App);
notRHLHot(module)(App);
namedFoo(module)(App);
RHL.foo(module)(App);
NOTRHL.hot(module)(App);

// should not drop incomplete reference
namedFoo(module);

export { a, b, c, d, e, z };

const { hot } = require("react-hot-loader/root")

// prefer default export if available
const preferDefault = m => m && m.default || m


exports.components = {
  "component---cache-dev-404-page-js": hot(preferDefault(require("/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/.cache/dev-404-page.js"))),
  "component---node-modules-antv-gatsby-theme-antv-site-pages-index-tsx": hot(preferDefault(require("/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@antv/gatsby-theme-antv/site/pages/index.tsx"))),
  "component---node-modules-antv-gatsby-theme-antv-site-pages-404-tsx": hot(preferDefault(require("/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@antv/gatsby-theme-antv/site/pages/404.tsx"))),
  "component---site-pages-index-en-ts": hot(preferDefault(require("/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/site/pages/index.en.ts"))),
  "component---site-pages-index-zh-ts": hot(preferDefault(require("/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/site/pages/index.zh.ts"))),
  "component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx": hot(preferDefault(require("/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@antv/gatsby-theme-antv/site/templates/document.tsx"))),
  "component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx": hot(preferDefault(require("/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@antv/gatsby-theme-antv/site/templates/example.tsx")))
}

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import app from './app';

var elem = React.createElement(app);
var rootInstance = ReactDOM.render(elem, document.getElementById('root'));

if (module.hot) {
    require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
        getRootInstances: function () {
            // Help React Hot Loader figure out the root component instances on the page:
            return [rootInstance];
        }
    });
}

import React from 'react';
import { render } from 'react-dom';
import RootComponent from './components/RootComponent';
import App from './components/App';

const rootInstance = render(, document.getElementById('react-wrapper'));

if(module.hot) {
  require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      return [rootInstance];
    }
  });
}

const rows = [
    [{ number: 1, isReserved: true }, {number: 2, isReserved: true}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1, isReserved: true }, {number: 2, isReserved: true}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1, isReserved: true }, {number: 2, isReserved: true}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1, isReserved: true }, {number: 2, isReserved: true}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1, isReserved: true }, {number: 2, isReserved: true}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}]
];

const rootInstance = React.render(
    ,
    document.getElementById('app')
);

if (module.hot) {
    require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      return [rootInstance];
    }
  });
}

import React from 'react'

import App from 'app/components/App'

var rootInstance = React.render(
  App(),
  document.getElementById('content')
)

// from https://christianalfoni.github.io/react-webpack-cookbook/Hot-loading-components.html
if (module.hot) {
  require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      return [rootInstance]
    }
  })
}

const React = require('react'),
      ShareThisEmail = require('./ShareThisEmail');

var rootInstance = React.render(
    ,
    document.querySelectorAll('.the-form')[0]
);

if (module.hot) {
    require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
        getRootInstances: function () {
            // Help React Hot Loader figure out the root component instances on the page:
            return [rootInstance];
        }
    });
}

const rows = [
    [{ number: 1 }, {number: 2}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1, isReserved: true }, {number: 2, isReserved: true}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1 }, {number: 2}, {number: 3, isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1 }, {number: 2}, {number: 3}, null, {number: '4'}, {number: 5}, {number: 6}],
    [{ number: 1, isReserved: true }, {number: 2}, {number: '3', isReserved: true}, null, {number: '4'}, {number: 5}, {number: 6, isReserved: true}]
];

const rootInstance = React.render(
    ,
    document.getElementById('app')
);

if (module.hot) {
    require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      return [rootInstance];
    }
  });
}

onYChange={ this.handleYChange }
          x={ this.state.x }
          y={ this.state.y }
        />
      
    );
  }
}

const rootInstance = ReactDOM.render(
  ,
  document.getElementById('reactRoot')
);

if (process.env.NODE_ENV !== 'production' && module.hot) {
  require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      return [rootInstance];
    }
  });
}

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

import Demo from './Demo.react';

// Fix for rendering React externally:
// See https://github.com/gaearon/react-hot-loader/tree/v1.3.1/docs#usage-with-external-react
const rootInstance = ReactDOM.render(
    ,
    document.getElementById('react-demo-entry-point')
);

/* eslint-disable */
require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
/* eslint-enable */
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      return [rootInstance];
    }
});