This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Parcel" Lesson
[00:00:00]
>> Brian Holt: So the first thing I wanna say about Parcel is that I have taught, historically in this class, I have taught Webpack and Webpack is a phenomenal tool. It is part of the OpenJS Foundation as well. There is a great course in Frontend Masters about it. If you wanna learn Webpack and React together I teach it with React V3.
[00:00:21] And that's still totally valid if you wanna check that out. But I'm gonna use a different packager today that is called Parcel. The reason why I chose to teach with Parcel is it's extremely hands-off. You just point it at a file and it just kind of figures it everything out by itself.
[00:00:37] There's no configuration to it. Webpack is phenomenal. It's super powerful. If you have crazy things you need to do with it, Webpack is your friend in doing crazy stuff like that. But it's kinda difficult to set up. It's inevitable that with power comes complexity, right? So suffice to say I love both tools.
[00:01:00] I'm just choosing Parcel today so that we can focus on React and not necessarily focus on the bundler. What we're gonna do now is we're gonna say npm install D parcel- bundler like that. That one takes a second cuz there's a lot of stuff that comes with it.
[00:01:32]
>> Brian Holt: This is the actual tool that will bundle every code together, and get it ready. 1 for your development environment, and 2 for production. And it's really smart. You just point it at your index html file and it discovers all the paths just by figuring everything out. And it figures out like this is a TypeScript file, or this is a JavaScript file, or this is a CSS file and it just neatly packages everything for you.
[00:01:55] It's a pretty impressive tool.
>> Brian Holt: It's one I actually I use quite frequently. And both Webpack and Parcel definitely worth supporting. They both have open collectors, so that's something you feel inclined to do. You can see that they actually drop a link in there for you.
>> Brian Holt: Frontend Masters does, thanks Frontend Masters.
[00:02:26]
>> Brian Holt: Okay, so now that we've done that, I want you to go into your package.json. And we're going to add another script in here that's going to be dev.
>> Brian Holt: And this is gonna say parcel src/index.html. So again, all you have to do with Parcel is you just point it at the index.html file and it just figures everything else for you.
[00:03:00]
>> Brian Holt: So now I can go into my adopt me. Well, so first thing I wanna mention here. This was confusing to me for a long time until someone pointed it out to me. As I was like, how does it know what parcel is, right? I don't think I have parcel available here, right, it says parcel command not found.
[00:03:16] So like how does it know that? Well if you go inside of your node modules here, which is where all of your node, when I say npm install bundle there, that's where it goes into node modules. And there is a secret.bin directory her. Of all the various different binary tools I can use, right?
[00:03:36] And one of them in here is called parcel, which is connected to parcel-bundler. So that's how it finds it.
>> Brian Holt: Echo's not in here right, for example, Echo's just part of like Mac. But it is able to find parcel and prettier in here. So, just so you know that that's how that gets connected together.
[00:04:04]
>> Brian Holt: So now I can say, npm run dev.
>> Brian Holt: And it's gonna build all the stuff together. And it's ready in 1.76 seconds. You can see here that there's now a dist and a .cache director. That is something that Parcel creates for you. You can just basically ignore it, and I can open now.
[00:04:23] So if I Cmd + click this, it'll open in my browser. And you can see, magically, I'm running on localhost:1234, but now this is being packaged by Parcel.
>> Brian Holt: Now there's some pretty cool stuff about this. If I go into app.js and I change this to be,
>> Brian Holt: I don't know, maybe add another Adopt Me in here, and I save this.
[00:04:48] It automatically refreshes my page for you. So it does a hot model refresh for you out of the box for free. You don't have to do anything about it, it just works.
>> Brian Holt: And that's really it, we're not gonna configure parcel anymore than that. It's smart enough to figure everything else out.