Complete Intro to React v4 Complete Intro to React v4

Installing React from npm with Parcel

Check out a free preview of the full Complete Intro to React v4 course:
The "Installing React from npm with 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:

Include React and ReactDOM from the npm registry automatically with Parcel. This should blow your mind a little bit.

Get Unlimited Access Now

Transcript from the "Installing React from npm with Parcel" Lesson

[00:00:00]
>> Brian Holt: We're gonna go to app.js. Right now, we're relying on this imported from our CDN, so we're loading the other script tags. What would be better, if we could just bundle that all up, cuz what happens if unpackage goes down. Right, unpackage in reality is not meant to serve production traffic, it's meant for experiments.

[00:00:18] Right, so we don't wanna actually depend on them being available, we wanna basically be reliant on ourselves. So what we're gonna do is, we're gonna come over here and we're gonna say npm. Actually, I'm gonna show you something that's even, in my opinion, a little bit cooler that Parcel does that I found out the other day.

[00:00:40] So it's just running, right, I have not mpm installed React yet. What I'm gonna say up here is say,
>> Brian Holt: import React from "react".
>> Brian Holt: I'm gonna save it.
>> Brian Holt: And if you come back over here, it's gonna say installing react, so it actually goes out and gets React for you.

[00:01:02] So you don't even have to do those npm installs yourself, I thought that was pretty cool. Does it go in my package.json, man, it does that, how cool is that? I don't know, I just noticed that yesterday, I was like, wait, where are all these packages coming from?

[00:01:21]
>> Speaker 2: That's cool.
>> Brian Holt: Yeah.
>> Speaker 2: [LAUGH]
>> Brian Holt: So I actually come back to index.html and delete these two unpackage things.
>> Brian Holt: Come back to app.js and also do import.
>> Brian Holt: What I'm gonna do is just to show you how to do it, say [ render ], like this, from "react-dom".

[00:01:49] So what I'm telling it here is, just pull in the render function, I don't need all of react-dom at this moment in time. And then you can delete this down here, so then it's just render, like that.
>> Brian Holt: And again, it'll go out and grab react-dom for me, I don't have to go get it.

[00:02:18]
>> Brian Holt: So now it's been built, so we can come back over here and refresh, and everything still works. Just to prove to you that it's not, I'm not doing anything fishy here.
>> Brian Holt: Notice I'm not grabbing anything from unpackage anymore, everything's coming in via app. Now notice it's quite large, it's now 759 kilobytes, it's a lot of code, right, especially for such a short program.

[00:02:43] But that's because we're not gzipping anything, right, and we're getting the development builds of react. We're getting the development builds of react-dom, and nothing's being minified. That's fine for development, right, but when we go out to production, we'll make sure everything's small and tiny and packaged up. We will talk about that tomorrow, probably.

[00:03:03]
>> Speaker 3: The chat room is going pretty crazy.
>> Brian Holt: About that installing by itself?
>> Speaker 3: Parcel is legit awesome, that's pretty awesome, I don't know, lots of people freaking out.
>> Brian Holt: Shout-out to Devon, the guy that, you should definitely go tweet to Devon, I can't remember what his last name is at the moment right now.

[00:03:24] But I'm sure if you search for Parcel Devon, he'll come up. Built a really, really cool piece of technology, it's really, really focused on giving you a great developer experience, and I'm just a huge fan.
>> Brian Holt: Really pushing, I love tools that focus on developer experience, and that is definitely one guy that cares about it.

[00:03:45] And now Jamie, Kyle, and a bunch of other like really cool and important people are working on it as well, so good stuff. So now we have all that stuff coming in from react and react-dom. The other thing, there used to be a big part of this course about how to set up hot module reload or, I can never remember what HMR stands for.

[00:04:07] I always say hot module reload, and that's not correct. Anyway, HMR, that's already built-in by default to Parcel, it does code splitting automatically. It does minification when you do build, it does gzip, it does everything that you need it to do just kind of out of the box.

[00:04:27] It makes it really, really easy to follow best practices. So I'm a huge fan, I think they did an amazing job.