Parcel and Hot Module Reloading for React

README.md

Note to Self

React HMR using Parcel

Enabling HMR for React using Parcel steps:

1. Install dev dependencies

yarn add babel-preset-env babel-preset-react babel-plugin-transform-class-properties --dev

2. Install dependencies

yarn add react-hot-loader

3. create .babelrc

{
  "presets": ["env", "react"],
  "plugins": ["react-hot-loader/babel", "transform-class-properties"]
}

4. add hot module to the app or root component

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

const App = () => {
  return <h1>React FooBar</h1>
}

export default hot(module)(App)