Complete Intro to React v4

Complete Intro to React v4 Extracting Component Module


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 "Extracting Component Module" 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:

Brian uses some VS Code magic to extract the Pet component to it's own module. Parcel imports and composes the modules together to deliver to the browser.

Get Unlimited Access Now

Transcript from the "Extracting Component Module" Lesson

>> Brian: So we have pet in here right now. We're gonna move this into a separate module. So what's actually really cool here is I have this light bulb that comes up from VS code. So I just highlight, I wanna move this into a new file, right? So I highlight this lightbulb right there and I say move to a new file.

>> Brian: And then it just automatically builds me a pad.js here, it imports react from react and it exports that for me.
>> Speaker 2: How did you do that?
>> Brian: So I highlighted what I wanted to export, just bring it back in here. Highlighted what I wanted to export, it brings up this lightbulb, it's kind of hard to see right there, right?

[00:00:53] And there's a couple things that you can do, but I said, move to a new file.
>> Speaker 2: And Parcel's doing this, or Visual Studio Code?
>> Brian: That's VS Code, yeah, which magical tool am I using this time? [LAUGH]
>> Brian: That's pretty damn cool too, right?
>> Speaker 3: They're asking if you're David Copperfield field of code.

>> Brian: I mean in the hacky sense that I'm stealing everyone else's cool stuff and passing it off as my own? Yeah, sure. So, I prefer to do it a little bit differently, this way. Const pet and then I'm going to say at the bottom: export default pet.
>> Brian: Okay, so now again.

[00:01:48] You do have to come up here.
>> Brian: You'll have to take these curly braces off cuz it wants to do a named import. And I want it to be a default export. That's all you have to do. So now, we are making our own modules, right? Now we have a app component in its own file, we have a pet component in its own file, and they're separate.

[00:02:11] The nice thing about Parcel is it'll stitch all that stuff together for you automatically. Don't have to worry about it. So now if we come back over here, just everything still works, but now it's stitching together multiple files. So to talk about alternatives that you could be using here, I did talk about Webpack a little bit.

[00:02:30] Definitely look into Webpack, it's still a great piece of technology. The other one is Browser Fi, written by another Frontend Master substack, James. What's James' last name?
>> Speaker 4: Halliday.
>> Brian: Halliday. Really smart guy. I use Browser 5 forever. The nice thing about Browser 5 is it's really easy to write plug-ins for us.

[00:02:51] So when I was working in Netflix, we used the Browser 5 quite a bit. So another good piece of technology that you could definitely sub in here and it work as well. Yeah? No, I think we finished doing Parcel. We finished doing ES, kind of the tooling part of this.

[00:03:09] So you may not have to do this kind of stuff all the time. You may already have a project that's set up with all the tooling and such. But I wanted to show you how to set up your own project youRself. From here on out, basically we have the entire project set-up to have a real react project.

[00:03:23] So we'll continue from this point doing that. The next thing we're going to talk about is something called JSX.