Adding Hot Module Reloading to Create React App

Chris Shepherd
Jul 23, 2016 · 2 min read

The React team have just released Create React App. It’s a quick and simple way to get started with a single-page React application and I expect it’s going to be popular as it’s already got over 2000 stars on GitHub in less than a day!

The focus is on zero configuration and letting you concentrate on just writing your application. As someone who enjoys the whole Babel/Webpack configuration dance to set up a new project I still think this is amazing as I quite easily get caught up in “analysis paralysis” when starting a new project. This allows you to just start and when it’s time to branch out and add more configuration you can just run npm run eject and it will then expose the previously hidden Webpack/Babel/ESLint configuration.

Due to the focus on simplicity, there are some really good things that are missing at the moment. I think the biggest one is Hot Module Replacement (HMR). It’s big productivity boost to have your application instantly re-render in the browser without a page reload. It’s currently working for CSS but it hasn’t been enabled for React components yet. But you can enable it by updating your index.js to look like this:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
const rootEl = document.getElementById('root');ReactDOM.render(
<App />,
if ( {'./App', () => {
const NextApp = require('./App').default;
<NextApp />,

This will just use Webpack’s HMR to re-render your application anytime App.js (or a file it in it’s dependency tree) is changed.

Take a look at Create React App and start submitting some feedback as I think this is a great opportunity to get more people interested in using React who were previously scared away.

Originally published at

Chris Shepherd

Written by

Developer from Middlesbrough, living in London. Mostly interested in React, Node and the web.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade