CloudReports
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner
No Result
View All Result
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner
No Result
View All Result
CloudReports
No Result
View All Result
Home React

Migrate from Hot Reload to Fast Refresh

npn by npn
December 16, 2020
in React
Reading Time: 3 mins read
0
Migrate from Hot Reload to Fast Refresh
892
VIEWS
Share on FacebookShare on Twitter

Contents

  • 1 Background
  • 2 Overview
  • 3 Before
    • 3.1 After
  • 4 Afterword
Rate this post

Background

I used React to enable HMR for webpack and webpack-dev-server using the following modules, but I didn’t like it because the Functional Component wasn’t updated properly. Since it’s a big deal, I will use react-refresh provided by react recently to make it a cool development environment. Please note that the writing style before the change seems to be old in the first place.

  • @ hot-loader / react-dom
  • react-hot-loader

Overview

Remove react-hot-loader and install react-refresh-webpack-plugin .

the manner of the introduction of-Refresh-React Webpack-Plugin, for people who guide came from the react-hot-loader, will continue to make changes in accordance with.

ADVERTISEMENT

Before

webpack.dev.js

 module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
/* Omission */
  resolve: {
    alias: {
      "react-dom": "@hot-loader/react-dom",

index.tsx

import React from "react"
import ReactDOM from "react-dom"

function renderApp() {
  ReactDOM.render(<App />, document.querySelector("#root"))
}

if (module.hot) {
  module.hot.accept("components/App/App", () => {
    renderApp()
  })
}

App.ts

import { hot } from "react-hot-loader/root"
import React from "react"

/* Omission */

export default hot(App)

After

  • Remove alias for @ hot-loader / react-dom
  • Added react-refresh / babel to babel-loader plugins
  • Added ReactRefreshWebpackPlugin to plugins

webpack.dev.js

const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin")



  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: [require.resolve("react-refresh/babel")],
          },


  plugins: [
    new ReactRefreshWebpackPlugin()

Remove module.hot.accept()

index.tsx

import React from "react"
import ReactDOM from "react-dom"

function renderApp() {
  ReactDOM.render(<App />, document.querySelector("#root"))
}

renderApp()

Remove hot()

import React from "react"



export default App

Remove react-hot-loader/babel from .babelrc

.babelrc

-    "react-hot-loader/babel",

Afterword

It was easy. It feels good to update the Functional Component without reloading.

Previous Post

[React] React installation for Mac

Next Post

Keeping cash at home, a phenomenon that is growing in France

npn

npn

Next Post
Keeping cash at home, a phenomenon that is growing in France

Keeping cash at home, a phenomenon that is growing in France

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

No Result
View All Result

Categories

  • Android (1)
  • Ant Design tutorial (7)
  • App/Game (2)
  • Javascript (16)
  • Layout and Routing (2)
  • Linux (9)
  • PC & LAPTOP (6)
  • PERSONAL FINANCES (1)
  • React (13)
  • SQL (2)
  • TECHNOLOGY & DIGITAL (7)
  • The Basics (5)
  • Web development (37)

Search

No Result
View All Result
  • About Us
  • Documentation
Together We Learn!

© 2021 Cloudreports - Developer ideas, tips and stories...

No Result
View All Result
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner

© 2021 Cloudreports - Developer ideas, tips and stories...