react-app-rewire-hot-loader

Adds the react-hot-loader to your create-react-app via react-app-rewired

  • Owner: cdharris/react-app-rewire-hot-loader
  • Platform:
  • License:: MIT License
  • Category::
  • Topic:
  • Like:
    0
      Compare:

Github stars Tracking Chart

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 - react-hot-loader >= 4.5.4
import React from 'react'
import { hot } from 'react-hot-loader/root'

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

export default process.env.NODE_ENV === "development" ? hot(App) : App

Old version: Prior to react-hot-loader version 4.5.4. you needed to write hot(module)(App).

react-hot-loader recommends to use the latest syntax as
"it is much more resilient to js errors you may make during development."

// App.js - react-hot-loader < 4.5.4
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.

Main metrics

Overview
Name With Ownercdharris/react-app-rewire-hot-loader
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 1)
Platform
License:MIT License
所有者活动
Created At2017-11-21 10:38:59
Pushed At2019-04-15 07:58:54
Last Commit At2019-04-15 09:58:53
Release Count2
Last Release Namev2.0 (Posted on )
First Release Namev1.0 (Posted on )
用户参与
Stargazers Count213
Watchers Count3
Fork Count15
Commits Count33
Has Issues Enabled
Issues Count14
Issue Open Count6
Pull Requests Count11
Pull Requests Open Count1
Pull Requests Close Count0
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private