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]
>> Now, let's get into Parcel. Parcel's a really awesome tool, it's a bundler for JavaScript. So, there's lots of other bundlers we could use. In previous versions of this course even I've used Webpack, which is another cool tool, and there's lots of stuff on Frontend Masters about that.
[00:00:18] You can actually go check out Intro to React V3, which uses Webpack. But we're gonna use Parcel today, and I'm a big fan of Parcel because it's zero configuration. Literally, you just point it at the entry point to my application, and Parcel is smart enough to figure out everything else.
[00:00:36] Okay this uses Typescript, this uses CSS, this one uses a bunch of stuff. It's pretty low touch, we're not even going to create a configuration file for Parcel because it can figure everything out on its own. So, what I want you to do now is I want you to open your terminal again.
[00:00:52] I'm gonna say npm install -D parcel@1.12.3. We discover there's actually a problem with 1.12.4, so be careful that you're on 3, or else this project actually will break on 1.12.4. One thing that you'll see, and I'll admit it's a bit annoying, once this actually resolves installing, is 1.12.3 does have some security vulnerabilities.
[00:01:25] Not a big deal, not for now, anyway, I went looked at them. For running it on your local computer, you're gonna be just fine. Okay, that's what I'm talking about here, found five vulnerabilities, one moderate, two high, two critical. Again, if this was my production application, you can go up to grade to Parcel 2, which is still in beta mode, which is why I didn't wanna put you on that.
[00:01:51] But the author says it's okay, but for now, we're just gonna stick to 1.12.3. Another thing of interesting note, Parcel used to be called parcel dash bundler. So, you had to do parcel-bundler like this. That's no longer the case, they got the new name of just parcel, so you can just do that.
[00:02:14] I think they both work though, to be honest. Okay, now, on your package.json, We're just gonna create a new command here in scripts called dev. And inside of dev, we're gonna put parcel, and the entry point to our application, which in our case is going to be src/index,html.
[00:02:40] So, that might surprise some of you, why am I pointing it at index.html? Well, what it's actually going to do is it's going to open your index.html, and then it's going to read that you have style.css. It's gonna run that through post CSS automatically for you, which will run it through autoprefixer and some other things.
[00:02:56] And then, it's gonna to find that you have App.js here, and it's going to run that through Babel, it's gonna run it through a bunch of other things like that. So, it's just really smart to figure out how to do all that kinda stuff. While we're here in index.html, we no longer need the script tags, so go ahead and delete those cuz we're going to bundle React directly into our application and not rely on unpackage anymore.
[00:03:24] And then now, we have this. We've broken our application cuz we haven't installed React to that, we'll do that here in just a second. And yeah, let's keep going. So, the next thing I want you to do now is now we can actually have dependencies. We're gonna say npm install, not with a capital D, by the way, because these are actually production dependencies, react@17.0.1, and react-dom@17.0.1.
[00:04:02] This will install React. So, now that we can actually require our React code inside of our app.js. So now, I have these React errors here, but what I can do is I can say import React from "react". Notice that all these ones went away. And then, if I go down here to ReactDOM, all I have to do from that is import ReactDOM from "react-dom".
[00:04:34] Now, all of my errors are fixed, right, I can do npm run lint. Everything's working, and now I can say nmp run dev. This is gonna start a local server here for me. So now, if I hold command and click on localhost:1234, or just open 1234 in my browser, you'll see that my app is now working again but it's running off a localhost server, and all that good stuff.
[00:05:03] This does hot module refresh, so if I head over to my App.js and I change this to be from "Adopt Me!" to "Adopt Me?" question mark. Now, if I go over here, I didn't even refresh, I guess you wouldn't see that cuz it's a logo, but let's put some question marks after Luna.
[00:05:28] Notice I didn't even refresh the page, so you actually get the hot module refresh on here as well. There we go. So, that's Parcel. Again, there's lots of other cool stuff you can use, there's Webpack, there's Browserify. I'm a big fan of esbuild, which is a really new one.
[00:05:51] Snowpack is interesting. Vite, or even rollup, rollup's really great as well. There's lots of other tools to use here but Parcel's just really nice to get started with because we don't have to configure it, it just kinda works out of the box. One thing with React is you generally put one component in one file, that's just kind of a rule of thumb.
[00:06:08] It doesn't always have to be true but I would say that's 98% true, might even be more than that. So, I'm gonna make a new file here, here inside of my source directory, and it's gonna be called Pet.js. Create Pet.js. And then, we're gonna move this component here, so I'm just gonna cut that.
[00:06:34] I'm gonna put that in Pet.js here. And then, at the top, I'm gonna say import React from 'react'. And then, down here at the bottom, we have to say export default Pet. So now, we have this component that's self-contained to App.js. And now, over an App.js, I can just come in here and say import Pet from ' /Pet.
[00:07:06] If you're not familiar, if you don't have a dot slash in front of it, it thinks that it's that's a node module that I'm gonna get off of npm. But if there's a dot slash in front of it, it's like there's a file in the same directory called Pet.
[00:07:18] So, I create the Pet component here, I export it here at the bottom. And then, here, I say import Pet from '/Pet. So now, this is literally that component coming in from that other directory. So now, if I save this and refresh again, everything still works, but now it's split up across multiple files.
[00:07:38] This is kind of the magic that having a bundler allows us to have.