Complete Intro to React, v7 Parcel

Transcript from the "Parcel" Lesson

[00:00:00]
>> Let's talk about Parcel. So I'm very excited to talk about parcel in this course because in V6, it was in a weird state. Cuz V2 was kind of out but not really out and then V1 didn't work with everything in this course. Now Parcel version 2 is out and everything just works.

[00:00:18] I'm so happy, I gotta clean up so much code because of that. It's a very satisfying feeling to clean up code. So Parcel is a bundler, previous versions of this course I taught Webpac for obvious reasons. Webpac is great. But I switched to Parcel because it is just the easiest tool to set up.

[00:00:39] You literally just point it at a file and say, build this project and then it just works. And it actually has gotten a little bit more configurable over time, it used to be totally not configurable which you can tell I'm super into cuz I keep bringing it up.

[00:00:54] Parcel's awesome because it just says, this is a TypeScript file. Therefore, I'm gonna use TypeScript to compile it. This is a CSS file, therefore I'm gonna use PostCSS to run it through, right? And it just has a lot of just very sane defaults that just go through and it works super well.

[00:01:11] It's not always gonna build the fastest or the smallest bundle, but it's gonna save you a ton of developer time. And you just have to ask yourself, what's that worth in the grand scheme of things, right? If I'm building a project for Netflix where there's 2,500 employees, I probably need to spend a lot of time getting that configuration, right?

[00:01:28] But if I'm at a startup and there's just two of us, developer time, incredibly important, right? Therefore, Parcel is a really good fit for that. And I'm not saying that Parcel isn't fast either. They're making it better all the time. They're rewriting it in Rust, they're doing a bunch of really cool stuff with it.

[00:01:43] So basically, I think my advice just from my opinionated, Brian Holt perspective, start with Parcel and one as soon as we outgrow it. Or have some need that Parcel doesn't fill, then move to esbuild or Vite or something like that. But we'll use Parcel for this, and hopefully it'll impress you because I think it's greatest.

[00:02:04] So I want you to come in here and I want you to say npm install dash capital D parcel. It used to be called Parcel dash Bundler but now they actually have the parcel name, so you can actually just do Parcel. In fact you have to, Parcel 2 is not on parcel-bundler.

[00:02:21] This is going to install a lot of Node modules. It's enormous, so it might take a second. You'll probably be fine just doing it like this. I'm going to be using version 2.2.1. So you might wanna say npm install dash capital D parcel add 2.2.1. This is the one that I'm worried about breaking, [LAUGH] right?

[00:02:41] Cuz if this breaks, the entire project breaks. So let's just make sure that I got that version. It is taking a while to install this, but I mean, if you look at our node directory, you can see we went from having one thing to having many. And it's just because Parcel installs everything to make it work with everything possible in the JavaScript ecosystem.

[00:03:16] So yeah, by installing that, we added 181 packages. And I'm on 2.3.2, so, I mean, it'll be fine or we'll panic when it's not. But I wouldn't be a lot higher. When you're watching this later, if this is on Parcel 3, panic, right? Go back to 2.3 please.

[00:03:44] Then I want you to add a script here, this is one that we'll end up using the most, we'll call it dev. It'll just be parcel src/index.html. And that's really just about it. It'll just figure everything else by itself. At this point in the course, if this was like, we were reading Webpac, the next hour of the course would be on Webpac, right?

[00:04:08] I know this because I've taught Webpac previously in this course and it took about an hour, right? So thanks Parcel team, thanks Webpac team as well but, Let's see what happens if we do npm run dev. So you can see here, it'll generate a parcel cache directory, it'll generate a dist directory.

[00:04:33] If you start having weirdness with stuff not working or in a way you anticipate, delete these two directories and then run it again, okay? And then I want you to open localhost 1234 and you should see your project. Which Parcel should take care of you. Okay? Now we have a bundler, right?

[00:05:00] So now we can split files apart. We can import stuff from NPM. We can use JSX, all this stuff that was not available to us now is now available cuz Parcel is gonna run all this code transformation for us. So the first thing I want you to do, is I want you to go in here.

[00:05:16] You can stop your server, I hit Ctrl + C to do that. I'm gonna say npm install without the D and say react at 17.0.2 and react-dom at 17.0.2. Again, this is React 17, which is actually important. Please don't be on 18 for this course. If 18 is out when you're watching this, wait for version 8 of this course to come out, cuz I'll talk about React 18 then.

[00:05:55] I don't think they're breaking anything, so honestly probably could run this in a 18. But famous last words, I'm sure something will break. It always does. So that'll put us on react 17, you can see that here. So if you go into app.js, now we can say up the top here, import React from react and import, ReactDOM from react dash dom.

[00:06:28] We can even get kind of fun here instead, and just import render. So we'll delete that on line 33 here I deleted the React.DOM part. And then instead of importing the entire package, we can just import render like that using these curly braces. You might ask, why? For fun, both of them are fine for the record.

[00:06:54] Someone might tell you, is like, well, you could do tree shaking, get rid of stuff like that, there's nothing to tree shake out of React DOM, so both work just fine.
>> What does the alternative look like?
>> You would just import the entire package like this. And this would bring in the entire react-dom package.

[00:07:11] And then you'd say react-dom.render. I guess in theory and as a general rule of thumb, if I'm just pulling in specific things from a package, I try and pull out just the things I need. So in theory, in the future, you could tree shake, right? Tree shake is basically the idea of that you only include the code that you use.

[00:07:29] So what's a good example that I like, jQuery, right, jQuery has 200 functions or actually, Lodash is an even better example. Lodash has 300 functions, right? And no one uses all of Lodash. Has anyone ever used all of Lodash? No, none of you have ever use all Lodash.

[00:07:45] I'm not even gonna ask the question because no one has ever used all. Not even the creator of Lodash has used all of Lodash. So you only wanna include the functions that you're actually gonna use. And if you import just the piece of it like this, certain bundlers have the ability to only include code that gets run.

[00:08:01] That make sense? So, I just did this out of habit. It's also shorter, again, lazy.
>> The other question is, is this destructuring?
>> So, the pedantic answer to that is, no. The [LAUGH] pragmatic question is, essentially. Const x, let's say const my object equals. This is destructuring, where I have an object here where I have declared something called x, oops, right?

[00:08:46] And then here I'm pulling it out here. This motion is called destructuring so if I said console.log x here, what would it log out? One, right? The question then becomes, is this destructuring? It's semantically doing the same thing, right? It's pulling something out of this. But it's not destruction because it's not going through that, actually it's that same code pathway.

[00:09:15] It's actually just selectively importing something. This has no runtime cost, this has no runtime cost. This is done by static analysis, this is done by the JavaScript engine. You know that feeling where you know you're being pedantic and you don't like it but you have to be? It's like my life.