Complete Intro to React, v7 Bundlers Overview
This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Bundlers Overview" Lesson
>> Let's start with, what is a bundler? If you look at this page right now, I'm just viewing source on the the page that you and I just created here, right? It's creating this file here index.9e7b1db9.js. As you and I both know, we didn't write that, we wrote app.js, right?
[00:00:30] Well, how did we get from here to this, right? And if you look at this, That's actually fairly simple, right? It's actually not even really doing very much transformation for us. I guess the only thing that it is doing at the moment is that it's doing render here, down here, right?
[00:00:48] And it moved it down from there, which is kind of funny. So, how is that happening? I guess I need to refresh the page here. Yes, this is actually not running. So if I do this again npm run dev, this actually will be much bigger. Sorry, to interrupt my site on what bundlers are, we do have to do one thing here on line 14 this is new for Parcel too, put type equals module.
[00:01:33] Cuz we're using ES6 modules, right? And so you have to inform Parcel to kick into module mode instead of CommonJS which is like const react equals require react that that style of module is called CommonJS. So once you do that then Parcel will be like okay I get it now, now if I refresh this page, and I open this, you'll notice that this hash changed as well.
[00:02:51] Particularly if you are supporting older browsers, right? If you are still supporting, Internet Explorer11, one, I am deeply sorry, and two, you need something that's going to package it in such a way that those browsers can understand. Another thing is, we're doing things here like arrow functions, right?
[00:04:20] Browsers definitely don't speak JSX. So you need something to translate that from code that I'm writing to code that browsers can understand. I probably could have just said that and ended it there, but here we are. Why are we not using create-react-app? Or what is create-react-app? Let's start with why we're not using create-react-app.
[00:05:04] And you're like, how? Where am I? How did I get here? Who took my keys, right? You start asking questions like that. Create-react-app is great, if I have to knock out something in ten minutes and I wanna just prototype really quick. Actually these days they probably still will use Parcel, cuz it's almost as fast, right?
[00:05:22] But you can just say npm init React app, and you'll just get like a brand new React app ready to go, right? It'll have TypeScript, it'll have testing, it'll have a bunch of stuff like that, it's solid technology. But that's why we're not using create-react-app because I didn't want you to start with a functioning development environment.
[00:05:44] I wanted you to start writing code, start to feel the pain of why we do something that way and then I want you to know the tool to solve the pain that we experience. So that's what create-react-app is. That's why we're not using it, question.
>> Not sure maybe I heard you wrong, I think you said npm, it's npx right?
>> So I guess it doesn't work anymore. So there used to be a way to init, projects called npm init and it looks like create-react-app stopped supporting that. So you have to do, to your point, npx create, you can see there I used it to create next step, create-react-app test app.
[00:06:26] So it will go through and just set up everything for you. And to his point, most of it's optional, but again, you kind of have to, you're starting at step 14 and you're wondering how you got there. By the time that you're done with this project you'll understand every single file and why it is there and more than anything you don't have to follow my way of writing code don't for that matter, right?
[00:06:53] And I want you to understand the tool, understand what it does, and then I want you to make a conscious decision. This adds to my experience of this does not add to my experience and then go forth and with your opinion on it. So if we look here into test app You can see here it's got a bunch of stuff in it.
[00:07:16] It comes with tests and who writes tests? [LAUGH] It's got a robots.txt, stuff like that, manifest.json, ain't nobody use that, just kidding. You should probably use it, it's a good idea. Look at that, comments, now they're joking with me, no one writes comments. I remember I got in a very serious discussion with Jim Young and other fantastic Frontend Masters teacher about how much you should comment your code, and at the time I was very wrong, Jim was right.
[00:07:50] Jim was saying that you should comment, well, Jim writes a lot of comments. I think he was some time on that. I feel like I've just started like four fights with other Frontend Masters teachers during the course of this course. It's fine, they're not here, they can't argue back