> For the complete documentation index, see [llms.txt](https://michey85.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://michey85.gitbook.io/webpack/react-hot-reload.md).

# React Hot Reload

```
yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh
```

{% code title="babel.config.js" %}

```javascript
module.exports = {
    presets: [
        "@babel/preset-env",
        ["@babel/preset-react", { runtime: "automatic" } ] // конфиг уточняет каким образом обрабатывать JSX, данная запись для React 17 (позволяет не импортировать React в каждом файле)
    ],
    
    plugins: ["react-refresh/babel"]
    
}
```

{% endcode %}

{% code title="webpack.config.js" %}

```javascript
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
    entry: './src/index.js', // в данном случае обязательно указать
    
    plugins: [
        new ReactRefreshWebpackPlugin(),
    ]
}
```

{% endcode %}

Данный функционал не нужен для продакшн сборки, тем более что приведет к ошибке. Для корректной работы нужно настроить конфиг вебпака с опциональным включением плагина.

{% code title="babel.config.js" %}

```javascript
const plugins = [];

if (process.env.NODE_ENV === 'production') {
    plugins.push("react-refresh/babel");
}

module.exports = {
    presets: [
        "@babel/preset-env",
        ["@babel/preset-react", { runtime: "automatic" } ] // конфиг уточняет каким образом обрабатывать JSX, данная запись для React 17 (позволяет не импортировать React в каждом файле)
    ],
    
    plugins,
    
}
```

{% endcode %}

Аналогично для вебпак конфига.