Parcel Bundler with React and Hot Module Replacement

2 min readDec 21, 2017

How to get started with Parcel.js

Parcel.js is a fast performance web application bundler utilizing multicore processing. You get a lot of things out of the box with little configuration. It’s not without it’s bugs, but its a new technology that might be fun to experimenting with. Let’s dive in.

Note: You need Node v8.0.0 or above for this to work. If you use another version of Node you get an Uncaught ReferenceError: require is not defined.

First we need to install Parcel. Then we will create a package.json file, and install our react and babel dependencies.
npm install -g parcel-bundler npm init -y npm i react react-dom npm i -D babel-preset-env babel-preset-react

You could also use Yarn instead:
yarn global add parcel-bundler yarn init -y yarn add react react-dom yarn add babel-preset-env babel-preset-react --dev

With that out of the way, let’s add in a script to run our dev server. Add this to your package.json

"scripts": {
  "dev": "parcel index.html -p 3500",
},

Create a .babelrc file to transpile the jsx

{
  "presets": ["env", "react"]
}

Create the following folders and files according to the below file structure.

Parcel-Example-App
|-- src
    |-- components
        |-- App.jsx    
    |-- index.jsx
|-- .babelrc
|-- .gitignore
|-- index.html
|-- package.json--------------------------------------------------------------------<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./src/index.jsx" charset="utf-8"></script>
  </body>
</html>--------------------------------------------------------------------/* index.jsx */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';const $root = document.getElementById('root');ReactDOM.render(<App />, $root);if (module.hot) {
  module.hot.dispose(function () {
    // module is about to be replaced
  });module.hot.accept(function () {
    // module or one of its dependencies was just updated
  });
}--------------------------------------------------------------------/* App.jsx */
import React from 'react';
const App = () => <div>Hello World!</div>
export default App;

Now you have Parcel setup with React and Hot Module Replacement. Just run npm run dev and you’re good to go!

Note: At the time of this writing, there are a couple bugs that need to be addressed before I can write on the production build. I will link a Part 2 when it happens. Thanks for reading!

Parcel Bundler with React and Hot Module Replacement

Written by David Kang