This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Intro to React v4 course:
The "Parcel" Lesson is part of the full, Complete Intro to React v4 course featured in this preview video. Here's what you'd learn in this lesson:

Add a script to start Parcel and server your React app from localhost.

Get Unlimited Access Now

Transcript from the "Parcel" Lesson

[00:00:00]
>> Brian Holt: So let's go ahead and start building our project here. We're gonna go into our command line, and we're gonna say mpm install -D parcel-bundler,
>> Brian Holt: Like that.
>> Brian Holt: Something that I wanted to, this obviously all will work for you because you're all doing this on the same date that I am.

[00:00:38] But for people watching this video in the future,
>> Brian Holt: You might have version incompatibilities. Because if you watch this six months from now, versions will change, APIs will break, all that kind of stuff. If you're finding yourself having weird errors with ESLint, or Prettier, or Parcel, what I would suggest you do is go to the GitHub for this particular project, which is here.

[00:01:05] And look at the package.json for the versions that I'm using, and just go and install those versions of what I'm using. Because things might break, or you can at least find an upgrade guide or something like that. But that's something you should be suspect of. So for example, of Parcel, we are using 1.9.7.

[00:01:30]
>> Brian Holt: Oops, t hat's the project.
>> Brian Holt: Okay,
>> Brian Holt: So we have parcel-bundler installed now, and this is the wow moment for Parcel. I'm just gonna say comma, and I'm gonna put dev. This is inside of scripts, right, parcel src/index.html, that's it. That's really all we have to do for Parcel for the rest of the course.

[00:02:07] There's no additional configuration that we need here, just blows my mind.
>> Brian Holt: But that's because Parcel knows out of the box what to do with most of the types of frontend files. So it knows how to handle Flow, it knows how to handle TypeScript, it knows how to handle JSX.

[00:02:26] These are all things that it just knows how to handle out of the box, which is amazing.. It can handle SASS, it can handle LESS, handles quite a bit of stuff.
>> Brian Holt: Great, so now what we should be able to do is say mpm run dev.
>> Brian Holt: Now, this isn't super interesting because we're not really compiling anything.

[00:03:04] Right, we're not doing module imports, we're not bringing in anything from our node module, sSo nothing's really happening here. All it's just doing is running a local server for us. So whereas before, you have been running your project using the file open. Right, we're not gonna do that anymore.

[00:03:21] Instead of doing file open, what we're gonna do is, we're gonna go to localhost, which is, localhost points at your computer, right, so it kinda loops back to itself. So it pretends that it's going out to the Internet to get this file, but it's really just grabbing it from your own local computer, that's what localhost does.

[00:03:40] And then localhost:1234 is the port that it's on, by default, that's where it opens, so localhost:1234. The port, in case you're wondering, it's like an address. Right, localhost tells you where to go, so it goes to your computer. And then it says, which address, which door to knock on to get it.

[00:03:58] Right, so we're going to address 1234, and we open it, we can see our project here, right?