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

Brian extracts the JavaScript into its own file, then creates a second component that is reusable within the parent component.

Get Unlimited Access Now

Transcript from the "Reusable Components" Lesson

[00:00:00]
>> Brian Holt: All right this is really feeling gross to write this inside of a script tag, does everyone feel sufficiently gross inside? Good, that’s what I wanted you to feel this morning. So what I want you to do is I want you to open a file called App.js, just put it in the same source directory.

[00:00:18] One thing I wanted to point out at this point as well. React is extremely flexible. It's not very prescriptive at all about pretty much anything. I like this because it allows me to make technical decisions for myself and not rely on the technical decisions of others, but that's a philosophy that I have, right?

[00:00:35] And you don't necessarily have to share that. Which means we can organize our project however we want, React doesn't care, React has zero opinions on the matter of how you organize your project. I have organized this project just for simplicity, it's not a very big project. So, I'm not saying that this repo that we're gonna end up with is incredibly well organized, I'm just gonna say it's simple.

[00:01:00] So that's one thing I wanted to throw out there, that's not something I'm intending to teach you with this workshop. Okay, so take everything from your script tag here, cut that out, and put this inside of your app. Delete that comment as well. Say that. Go back over to your index.html and put your src ="./App.js".

[00:01:34]
>> Brian Holt: Okay, so all I did was cut that entire script out of the source here and I put that inside of app.JS.
>> Brian Holt: Next thing we're gonna do is we're going to create another component.
>> Brian Holt: We're gonna say const Pet = another arrow function
>> Brian Holt: I'm going to return React.createElement.

[00:02:05]
>> Brian Holt: Another div.
>> Brian Holt: Another empty object, and inside of that another array and we're going to describe a pet very quickly.
>> Brian Holt: So I'm gonna say react.createElement. Gonna make this an h2, lets make it an h1 actually cuz that's my notes have, empty object and you can put whatever your pet's name is there, mine's name is Luna, okay?

[00:02:40]
>> Brian Holt: And then I'm gonna put three different lines in here, and this is gonna be an h1 and two h2's. And Luna is a Dog, and her breed is Havanese.
>> Brian Holt: So I've created another stamp here, right? I have not used the stamp but I've gone to the store and I've purchased one and I'm just kinda holding it, not doing anything with it yet.

[00:03:11]
>> Brian Holt: Okay, so here, inside of App, I'm gonna make this into an array so I can put multiple children in it.
>> Brian Holt: And here, let's make this look nice.
>> Brian Holt: I'm gonna put three instances of the pet item.
>> Brian Holt: So I'm gonna put React.createElement Pet, then I'm gonna put this three times.

[00:03:59]
>> Brian Holt: Now notice I'm not putting the rest of the stuff in there as well. You can if you want to. You can put empty object and empty array or something like that. You don't have to. It's optional. If you don't give it anything, it just assumes that it has no attributes and has no children.

[00:04:18]
>> Brian Holt: So I made a rubber stamp, and I stamped it three times, right? So now, what do you expect to see when we render this? Well, I expect to see a div, right? Inside of that div, the first thing we see is an h1, and then I'm gonna stamp Pet, okay, so I'm gonna go inside of Pet here and I'm going to inspect a div, an h1 and two h2s here, right?

[00:04:42] And I'm gonna see that this pattern repeated three times, make sense? It's now on 3, if we go in here, you should see Adopt Me, Luna Dog Havanese, Luna Dog Havanese, Luna Dog Havanese.
>> Brian Holt: So this is what's cool about components is they are inherently reusable, right? I made one pet component and I stamped it three times.

[00:05:12]
>> Brian Holt: Which is pretty cool, except for the fact that this is not very flexible at all, right? It's not flexible. There are other dogs besides Luna, I'm told, so we probably need to make this a little bit more flexible.