No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
10H
57M
16S
Curso Pr谩ctico de Webpack

Curso Pr谩ctico de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Hot Reload

15/22
Recursos

Aportes 4

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渏sx鈥: 鈥渞eact鈥, en el archivo jsconfig.json -> compilerOptions.
Con esto desaparecer谩.