egghead-logo-white
Learn to Code
Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Bundle a React App with Parcel

    Alex Jover MoralesAlex Jover Morales

    Parcel 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 app starting from scratch and having hot-reloading, dev-server and generating an optimised bundle with no configuration and only 4 dependencies.

    reactReact
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss