Hot Reload

Hot Reload

• Nos permite injectar el código sin necesidad de compilar el proceso completo, solo hace un cambio en vez de estar preparando el proyecto completo.
  1.- Instalamos la dependencia:

npm install react-hot-loader 

2.- en .babelrc actualizamos los plugins:

  "plugins": [
    "babel-plugin-transform-class-properties",
    "@babel/plugin-transform-runtime",
    "react-hot-loader/babel"
  ]

3.- En routes > App.jsx.
importamos hot:

import { hot } from 'react-hot-loader/root';

y en la última linea(en la que exportamos), modificamos de la siguiente manera:

export default hot(App); 

4.- Y solo en webpack.config.dev.js, ya que no necesitamos el hot reload para producción:
Modificamos el entry:

module.exports = {
  entry: ['react-hot-loader/patch', './src/index.js'],
  .....
}

En devServer añadimos hot:

  devServer: {
    historyApiFallback: true,
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3005,
    hot: true,
  }, 

y npm run start

Usando las versiones

"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"

No se necesita instalar react-hot-loader (de hecho hay conflictos que impiden instalarlos si usas react 18

Basta con que en webpack uses

devServer: {
    historyApiFallback: true,
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3005,
    open: true,
    hot: true,
    liveReload: true,
  },

¿Hot Reload se puede integrar en React Native?

Seguramente por la extensión de ESLint me aparce el siguiente error/advertencia en las etiquetas del componente con TypeScript

Para dar solución a esto se debe añadir “jsx”: “react”, en el archivo jsconfig.json -> compilerOptions.
Con esto desaparecerá.