Skip to content
Adds the react-hot-loader to your create-react-app via react-app-rewired
Branch: master
Clone or download
cdharris Merge pull request #18 from ineentho/patch-1
Fix typographic quotes in the usage example
Latest commit 331a8dd Feb 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
CHANGELOG.md
LICENCE.md Initial Commit Nov 21, 2017
README.md
index.js Comments for clarity Feb 8, 2019
package.json Version bump v.2.0.1 - fixes hot loading Feb 9, 2019

README.md

react-app-rewire-hot-loader

Add the react-hot-loader to your create-react-app app via react-app-rewired.

Because who wants their app, state, and styles automatically reloading all the time?

Installation

npm install --save react-app-rewire-hot-loader

# If you don't already, you also need:
npm install --save react-app-rewired
npm install --save react-hot-loader

Usage

  1. In the config-overrides.js of the root of your project you created for react-app-rewired add this code:
const rewireReactHotLoader = require('react-app-rewire-hot-loader')

/* config-overrides.js */
module.exports = function override (config, env) {
  config = rewireReactHotLoader(config, env)
  return config
}
  1. Follow 'step 2' from https://github.com/gaearon/react-hot-loader , replicated below:
Mark your root component as hot-exported:
// App.js
import React from 'react'
import { hot } from 'react-hot-loader'

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

export default process.env.NODE_ENV === "development" ? hot(module)(App) : App
  1. Replace 'react-scripts' with 'react-app-rewired' in package.json
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },

That's it, you now have hot reloads!

License

Licensed under the MIT License, Copyright ©️ 2017 Chris Harris. See LICENSE.md for more information.

You can’t perform that action at this time.