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

1npm install --save react-app-rewire-hot-loader
2
3# If you don't already, you also need:
4npm install --save react-app-rewired
5npm 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:

1const rewireReactHotLoader = require('react-app-rewire-hot-loader')
2
3/* config-overrides.js */
4module.exports = function override (config, env) {
5  config = rewireReactHotLoader(config, env)
6  return config
7}

2. Follow 'step 2' from https://github.com/gaearon/react-hot-loader , replicated below:

1Mark your root component as hot-exported:
2// App.js
3import React from 'react'
4import { hot } from 'react-hot-loader'
5
6const App = () => <div>Hello World!</div>
7
8export default process.env.NODE_ENV === “development” ? hot(module)(App) : App

3. Replace 'react-scripts' with 'react-app-rewired' in package.json

1  "scripts": {
2    "start": "react-app-rewired start",
3    "build": "react-app-rewired build",
4    "test": "react-app-rewired test --env=jsdom",
5    "eject": "react-app-rewired eject"
6  },

That's it, you now have hot reloads!

License

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