[Parcel](https://parceljs.org/) comes in as the new cool kid in the bundlers world. Unlike other bundlers which take lots of explicit configuration, Parcel works out of the box and requires almost zero-configuration by intelligently inferring it depending on what you use in your code.

This lessons shows you how to bundle a simple [React](https://reactjs.org/) app starting from scratch and having hot-reloading, dev-server and generating an optimised bundle with no configuration and only 4 dependencies.

Bundle a React App with Parcel

Instructor: [00:01] Let's start totally from scratch where we have an app that has a simple index.html, a simple index.js which is the entry point, and a very simple app component which says, "hello, react." That's all.

[00:19] We go back to the package JSON. We start from no dependencies at all.

[00:24] Let's then install React and React DOM. Then, let's install a setup dependency, both the Parcel bundle, and we need Babel and some configuration to make possible to [inaudible] JSX, new versions of MS Read, and so on. We can use babel-preset-react-app, which takes all the Babel configuration and dependencies from Create React App, which is all it needs to run a React app.

[01:08] Now we need to create a babelrc file in the root of the project, where we need to define the preset of React app that we just installed. Then it's applied.

[01:23] Parcel will use, as an entry point, the dependencies that we define in the index.html. Let's here import the index file that would have, inside, src.

[01:38] Now we have an arom parcel in development mode. For that, let's create a script. Let's name it Start. All you need is to say, "parcel index.html."

[01:52] We run this. We run a development server that runs it in this URL, which I already have open here. We reload, and then we see "hello, react."

[02:08] This development server has hot module reloading by default. If we change something, it will be updated automatically, without any extra configuration.

[02:19] Another cool feature is that if we make a mistake -- let's say we misspelled this import -- it will output a very nice log here in the console. Let's get this back to working again. By default, we can also import CSS, and you'll see it has CSS modules, as well.

[02:44] Finally, in order to generate a bundle in production mode, all we need to do is go here. Let's duplicate this script and say, "build." We just need to say, "parcel build."

[03:00] This will set the node development variable, which some developers use to perform automation. It will also minify all code generated. We can skip that using no-minify, although that's something you probably wouldn't want.

[03:17] Let's stop the development server, and then run NPM run build. There we go. Our production bundle has been generated in the dist folder.

Bundle a React App with Parcel

Share this video with your friends

This lesson is a Community Resource