Using React Hot Loader with


WPEForm - No-code Drag-n-Drop WordPress Form Builder

Useful for payments, quotation, quizzes, conversations & user feedbacks of all kinds.

Check out to support my efforts (made by me).

Let’s focus on an example where we use the great react hot loader to have the best in class DX when developing react app. It can be found in action under examples/plugin of the repo.


First install the dependency

npm i react-hot-loader

Modify wpackio project config

From the documentation of react hot loader, it states that we need to add a plugin to babel-loader. For that, let’s hack into webpack config using jsBabelOverride from

module.exports = {
	// ...
	// Hook into babeloverride so that we can add react-hot-loader plugin
	jsBabelOverride: defaults => ({
		plugins: ['react-hot-loader/babel'],
	// ...

This would instruct wpackio to extend babel-loader options and include the babel plugin provided by react-hot-loader.

Customize our App

Let’s say we have src/app/main.jsx as our primary entry-point. It has the following code.

import React from 'react';
import { render } from 'react-dom';
import App from './App';

document.addEventListener('DOMContentLoaded', () => {
	const entry = document.querySelector('#wpackio-reactapp');
	render(<App />, entry);

Here the App.jsx is the main react application.

So let’s edit src/app/App.jsx file and modify the content.

import React from 'react';
+ import { hot } from 'react-hot-loader';

const App = () => (
	<div className="App">
		<h2>Hello From React</h2>

- export default App;
+ export default hot(module)(App);

Now make changes and see it load live without page refresh.

React HMR

Edit this page