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

Check out a free preview of the full Complete Intro to React, v2 (feat. Router v4 and Redux) course:
The "Preact" Lesson is part of the full, Complete Intro to React, v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Preact is a near-drop-in replacement for React with a much smaller footprint. Preact is able to achieve this smaller size by eliminating some legacy support and turning over more work to the browser. Brian refactors the application to use Preact and compares the productions size to the version that used React. The code for the final version of the application can be found on the v2-preact branch.

Get Unlimited Access Now

Transcript from the "Preact" Lesson

>> Brian: Okay, so I'm gonna give you one more suggestion on how to make this drop even further, and we're actually going to not include react. What? Okay, [INAUDIBLE] we're gonna include preact. So, just one last thing. There's another library called preact which I didn't really think was reliable until recently but it has a lot of traction behind it, it's written by a really smart, one really smart guy and a great community around him.

[00:00:33] It's a drop-in compatible library to react, and it's only three kilobytes If you gzip it and compress it, whereas react ends up at about 80ish, gzipped and compressed.
>> Brian: The caveat here is it doesn't include everything that react includes. It doesn't include propTypes, it doesn't include React.createClass. It only includes ES6 class and

>> Brian: Functional components, stateless functional components and some other very minor differences. However, they do ship what's called the compat library, that for an additional 5k, they will support all of those features too. So real quickly, this entire app that we built with react, we're going to rip it out and put Preact in.

[00:01:28] With just a little bit of Webpack magic.
>> Speaker 2: Before you do, there's a couple of comments about using Uglify and Webpack-b. You don't use Webpack-b if you're using Uglify.
>> Brian: Is that the, that's probably what my-
>> Speaker 2: I think that's what they're saying the bug was.
>> Brian: Alright, so In any case, we can drop that because you are using it with dash p.

>> Brian: Okay. Yeah, see we ended up with the same thing. So this is ready to ship out to production. But we're gonna try and see if we can shave off some of the additional K off of that bundle using preact. So I want you to go to your webpack config.

>> Brian: And we're gonna do an additional field. It's gonna be alias.
>> Brian: Every time we ask for react, we're gonna serve it preact-compat, which is that react replacement library. And every time it asks for, we have to put this in quotes, 'react-dom', we're also gonna give it preact-compat and this library is as far as I know 100% compatible with the react API but it just serves preact instead.

>> Brian: Okay then another thing we need to do is preact does have to be run through babble so we just have to make sure that that is happening.
>> Brian: So in this include, I'm gonna put that in ray. And we just have to give it one more thing.

[00:03:21] We have to do path.resolve.
>> Brian: node_modules/preact-compat/src. So everything that comes from there also must be run through Babel as well.
>> Speaker 2: Resolve is misspelled, it's reslove.
>> Brian: Thank you.
>> Speaker 2: I think you also forgot comma after your alias.
>> Brian: I probably did. I'm losing my mind. Thank you.

[00:03:53] Okay, and that's it. That's all you have to do. This will drop in preact for you. So [LAUGH] let's see if this actually works.
>> Brian: Boom.
>> Brian: Did I spell alias wrong, too? No.
>> Speaker 2: Aliases.
>> Brian: No, I have alias in my.
>> Brian: Now why is that
>> Brian: This is inside of resolve, okay.

[00:04:45] Yeah.
>> Brian: So inside of resolve, next to extensions, that's where the alias goes.
>> Brian: So, we drop from 218 to 96. Just from switching from react to preact. And supposedly, I haven't bunched those marks up myself, but I can tell you that supposedly preact is actually faster than react.

[00:05:25] So it's an interesting thing that you should evaluate. We're not using it at Netfli,x but I'm gonna try and see how well it works with our Netflix code base. But let's go actually [LAUGH] make sure that it works, right? If it doesn't work then it's not that impressive.

>> Speaker 2: Richard is asking what about the ecosystem? Will all the react library components be compatible with preact?
>> Brian: Pretty close The only thing which I purposely did not talk about today is it doesn't do mix-ins at all. React does have the ability to do mix-ins that they're trying to deprecate because they're awful.

[00:06:01] That's why I don't even talk about them. But says yeah, we're not messing with that so they don't do it. But other than that, I haven't personally seen anything that it didn't interoperate.
>> Brian: The other thing is, we would have to go fix our server to get this to server side render, and I'm not gonna do that, but it's not that hard.

[00:06:27] So, if you wanna get this to run server side rendering you do have to go modify your server. It's not as easy as dropping in pre- it's pretty close though.
>> Brian: So A D A, and there you go, it still works.
>> Brian: Pretty cool, right?
>> Brian: It's a, yeah.

>> Brian: Yep, so there you go. That's Preact. There's also one called Inferno, which is pretty closed to. It's even smaller than preact and supposedly even faster. But I don't think that's a stability of preact. So preact in my opinion is valuable alternative. It's something that's definitely evaluated if youre doing react.

[00:07:22] Because you get to take advantage of all the reacts ecosystems but much smaller page load. But I leave that up to you to decide if that's what you want to do or not. And as you see here, it's really small. If we moved everything to es6 components and we started using the preact package instead of the react package, we would drop an additional 5K off our package, so there's It's pretty compelling.

[00:07:50] Any questions about preact? I've only tooled around with it just a little. I wanted to make you aware of how easy it is to migrate to preact. They do an awesome job, so thanks preact team and preact team, thanks to both.
>> [LAUGH]