You are currently viewing Using Parcel Bundler with React

Using Parcel Bundler with React



Parcel is a web application bundler that offers blazing fast performance with zero configuration compared to webpack. In this video, we will create a basic React project using Parcel Bundler.

Tutorial from Nick Karnik. Check out his YouTube channel: https://www.youtube.com/channel/UClCm-WAOgN6XLwCpefSVezg

Nick on Twitter: https://twitter.com/theoutlander

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 21 Comments

  1. Mobin92

    Seriously what is wrong with web development!? Could we please stop reinventing fricking basic tools and frameworks all the time!?

  2. This video is amazing! For some reason, I wasn't going for Parcel field, but now, I'm more than convinced to use it every day =)

  3. Ephrey Ilunga

    Please, is PARCEL equal to Webpack ? Or can I really use Parcel instead of Webpack ?

  4. Mateja Petrovic

    Parcel is an amazing tool especially for newcomers because they can get a react app up and running in seconds! It really makes the whole process faster, more approachable and enjoyable. With everything taken into account Parcel can have a great impact on developer happiness.

  5. Les

    What vscode extensions do you use or recommend?

  6. DrT1MA

    Hello, i have a problem (srcindex.html: URI malformed
    ) , you now how fix it? Sorry for my english)

  7. I got a dependency resolution error. The only difference I saw between my and your environment was the use of pnpm in place of npm, which (also following your suggestion to install parcel-bundler at both global and local scopes) I thought might be impacting it's behavior. Hence, your package.json contents at the time of calling "parcel src/index.html" would have been helpful.

    (As it turns out, I had to install and import 'prop-types', as these appear to have been transferred out of the original react package – and which subsequently worked. See:

    https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes)

  8. rct999

    I did this with typescript, and it was amazingly easy. Just point script src to an tsx file and create tsconfig.json with:

    {

    "compilerOptions": {

    "jsx": "react",

    "allowSyntheticDefaultImports": true

    }

    }

  9. Eric Noguchi

    HMR does not work for me unless add

    if (module.hot) {

    module.hot.dispose(() => {});

    module.hot.accept();

    }

  10. Rick

    I'm going to create an emmet plugin that slaps you when you try to wrap a block element in a div for no $%#@$%ing good reason.

  11. codewithnacho

    This was awesome! Wish you kept doing more tutorials for parcel. 😀

  12. Avi Mehenwal

    it looks good. Does it work at ease with Typescript? I might use it in my next project

  13. Avi Mehenwal

    And how does parcel deal with image compression and svg optimizations?

  14. I got this error:parcel : The term 'parcel' is not recognized as the name of a

    cmdlet, function, script file, or operable program. Check the

    spelling of the name, or if a path was included, verify that the

    path is correct and try again.

    At line:1 char:1

    + parcel src/index.html

    + ~~~~~~

    + CategoryInfo : ObjectNotFound: (parcel:String) [], C

    ommandNotFoundException

    + FullyQualifiedErrorId : CommandNotFoundException

  15. Yashin Hussain

    Thankyou your video relived me of my problem. Thanks and keep up the good work

Leave a Reply